I've got 3 separate files.
Forms (a basic wordpress page built within Wordpress). The data here shows up fine and works as expected.
<div class="select-wrapper">
<select class="paybill" name="provider-name" id="provider-name" onchange="formFilter(this.value)">
<option value="" disabled selected hidden>- Choose a Provider -</option>
<?php foreach( $providerslist as $providerlist ) {
$theprovidernname = get_the_title($providerlist);
$providerlocations = get_field('provider_locations', $providerlist);
$pcount = count($providerlocations);
for($i = 0; $i < $pcount; $i++){
$location_name = get_field_object('location_name', $providerlocations[$i]);
if(!empty($location_name)){
break;
}
}
if(empty($location_name)){
$location_name = array(value=>"TEXT");
}?>
<option value="<?php echo $location_name['value']?>"><?php echo $theprovidernname; ?></option>
<?php } ?>
</select>
</div>
A filtering Javascript file. The purpose of this file is to get the data from the select field and pass it using AJAX to the 3rd PHP file.
function formFilter(str){
//clears previous results
document.getElementById("form-results").innerHTML = "";
var value = str.value;
console.log(value);
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
var xmlhttp = new XMLHttpRequest();
} else {// code for IE6, IE5
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
document.getElementById("form-results").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET",".../framework-forms-results.php?location="+value,true);
xmlhttp.send();
}
A custom PHP file living in the Child Theme folder of the site. What I'm trying to do is call a custom post type called 'location' and then work through the data. On other pages I'm able to get this exact code to work just fine but here it will not work at all. This is the entirety of this Page at the moment. If I remove the get_posts code and just echo some text, it will return the text so I know the issue is with the get_posts call. I just can't figure out why. If I try to load this page alone without going through the select options, it still returns a 500 error.
//Create Array of All Locations
$locations = get_posts(array(
'posts_per_page' => -1,
'post_type' => 'location',
));
print "<pre>";
print_r($locations);
print "</pre>";
Any thoughts as to why the get_posts call won't work on this custom page but will work if it's used via shortcodes on pages built within wordpress?
I've tried debugging, logging errors and reviewing the logs. I've tried to require the blog header to bring in other necessary files but nothing.
If you are calling this URL directly, which is not how WordPress ajax is intended to work, you can still get this code to run by adding this PHP code:
$parse_uri = explode( 'wp-content', $_SERVER['SCRIPT_FILENAME'] );
require_once( $parse_uri[0] . 'wp-load.php' ); to the top of the file.
Link: https://codex.wordpress.org/AJAX_in_Plugins (I know this says Ajax in plugins but this is also what you would do if developing a custom theme to keep your code WordPress-y).
Related
I am struggling to get my code to display in HTML. I know I am probably missing something really simple, but I am stuck.
I have an Angular 7 app. I want to retrieve the xlsx data (worksheet) and display it in HTML. Simple right? My issue is that all the examples are in browser js and I need to retrieve it from a component. Here's the kicker, I already have the method and can print out json and html via console. log, but cannot find how to return it to an editable grid in HTML.
component.ts
fileUpload() {
let fileReader = new FileReader();
fileReader.onload = (e) => {
this.arrayBuffer = fileReader.result;
var data = new Uint8Array(this.arrayBuffer);
var arr = new Array();
for (var i = 0; i != data.length; ++i) arr[i] = String.fromCharCode(data[i]);
var bstr = arr.join("");
var workbook = XLSX.read(bstr, { type: "binary" });
var first_sheet_name = workbook.SheetNames[0];
var worksheet = workbook.Sheets[first_sheet_name];
console.log(XLSX.utils.sheet_to_json(worksheet, { raw: true }));
console.log(XLSX.utils.sheet_to_html(worksheet));
}
fileReader.readAsArrayBuffer(this.file);
}
html
<input type="file" style="display: inline-block;" (change)="incomingfile($event)" placeholder="Upload file" accept=".xls,.xlsx,.ods">
Upload
Currently I can retrieve any workbook/worksheet, but I simply cannot find how to return it to a ui grid of some sort from the .ts file.
I have been through numerous tutorials including ui-grid, ng-grid and https://redstapler.co/sheetjs-tutorial-convert-excel-html-table/
I appreciate I am probably being a dumbass, but any help would be appreciated. I cannot use a commercial component and simply need to render this in an editable table on my html page. I will then look at changing column headers and exporting the file via the backend SpringBoot REST to Mongo (all working)
I am aware that there are numerous similar questions on SO, but the working examples do not seem to display the data(even without any errors). Could be a versioning error etc. I also tried ui-grid, but came up with this issue: 'readAsArrayBuffer' on 'FileReader': parameter 1 is not of type 'Blob'. The example here is however also in .js and not via a typescript component: parameter is not of type 'Blob'
I am simply not able to bind the output to the HTML
How can we exclude Externals section from jsDoc output correctly?
I have lots of externals in my project that I do not want to show on the navigation panel at all, as it takes up all the space, and is useless to us.
I have been able to hack it manually, by changing the code in file node_modules\jsdoc\lib\util\templateHelper.js, but this is not a reusable approach for my team of developers.
The hack was in overriding members.externals with an empty array:
/*
members.externals = members.externals.map(function(doclet) {
doclet.name = doclet.name.replace(/(^"|"$)/g, '');
return doclet;
});
*/
members.externals = [];
Unfortunately, after years of using jsDoc, all I can do is to continue re-hacking it after every update of the dependency, in file node_modules\jsdoc\lib\util\templateHelper.js.
Fortunately, even with the current version 3.5.5, the hack still works the same:
// HACK: set Externals to an empty list:
members.externals = []; /*members.externals.map(function(doclet) {
doclet.name = doclet.name.replace(/(^"|"$)/g, '');
return doclet;
});*/
I'm not sure this is much more elegant, but this is what I ended up doing. It works for all projects without having to hack the jsdoc install.
My problem: I have classes derived from imported node_modules and I wanted the inherited information included in my documentation, but I didn't want the base classes clogging up the sidebar navigation.
First, I added a plugin to my jsdoc-template (I called it skip-node_modules):
exports.handlers = {
processingComplete: function (e)
{
for (let i = 0; i < e.doclets.length; i++)
{
const doclet = e.doclets[i]
if (!doclet.undocumented && doclet.meta && doclet.meta.path.indexOf('node_modules') !== -1)
{
// hack the name so I can find it in the .tmpl file
// I tried to add a new flag to the doclet, but it didn't pass through
doclet.longname += '~'
}
}
}
};
Then I added a check in the navigation.tmpl:
<ul class="list">
<?js
this.nav.forEach(function (item) {
?>
<?js if (item.longname[item.longname.length - 1] !== '~') { ?>
<li class="item" data-name="<?js= item.longname ?>">
...
<? } ?>
And poof, no more node_module imports in my sidebar. (This does have the downside of not showing a sidebar when you click through to these classes. I'm sure with more hacking I can get rid of that, but it wasn't too important.)
It would be easy to change this to check for external symbols. console.log(e) in the plugin to get all the info the doclets provide and find what works for your situation.
I have requirement where client wants to customize the items in quick launch for only certain
pages.So, I want to change the items in the quick launch with some other items for a few pages.(Not about cahnging the style of quick launch. Its about the replacingthe content in quick launch)
I hope using CEWP, I can achive this.But I am not much aware how to do it.
You can have two approachs here:
1) creating a webpart to replace the quicklaunch: This way you can read the Navigation from SPWeb, and build it your own.
2) Using jQuery to change the html loading the page. In this approach, I would apply a 'display:none' to quicklaunch, make the changes in html, and then 'display:block' back. The con in this solution is that you must rely on the names/titles/urls of the items, so if an admin changes, it could break it.
I had followed following steps to achive the goal
1.. Added a CEWP in the page
Created a text file with Following script and added it to shared dcouments
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function startClock(){
var div= document.getElementById('s4-leftpanel-content');
var spans= div.getElementsByTagName('span');
for (index = spans.length - 1; index >= 0; index--) {
spans[index].parentNode.removeChild(spans[index]);
}
var urls= div.getElementsByTagName('a');
for (index = urls.length - 1; index >= 0; index--) {
urls[index].parentNode.removeChild(urls[index]);
}
var pTag = document.createElement('p');
pTag.innerHTML = "HR Report";
div.appendChild(pTag);
var aTag = document.createElement('ul');
div.appendChild(aTag);
var newLi = document.createElement('li');
aTag.appendChild(newLi);
var a= document.createElement('a');
a.setAttribute('href',"url");
a.innerHTML = "report2";
newLi.appendChild(a);
//do onload work
}
if(window.addEventListener){
window.addEventListener('load',startClock,false); //W3C
}
else{
window.attachEvent('onload',startClock); //IE
}
</script>
enter code here
Paste the url text file in shared documents in CEWP as content link(Edit web part >>content link>>paste url)
Now, existing items in the Quick Launch is removed and new items are added
I've followed the samples. I added a _PjaxLayout:
<title>#ViewBag.Title</title>
#RenderBody()
Modified my _Layout:
<div id="shell">
#RenderBody()
</div>
<script type="text/javascript">
$(function () {
// pjax
$.pjax.defaults.timeout = 5000;
$('a').pjax('#shell');
})
</script>
Updated ViewStart:
#{
if (Request.Headers["X-PJAX"] != null) {
Layout = "~/Views/Shared/_PjaxLayout.cshtml";
} else {
Layout = "~/Views/Shared/_Layout.cshtml";
}
}
Yet every time I click on an 'a' tag, the pjax code doesn't get called. It's as if the selector isn't working when I set up pjax. What am I doing wrong?
UPDATE:
If I do this:
$('document').ready(function () {
$('a').pjax({
container: '#shell',
timeout: 5000
});
});
I see the pjax code getting hit and the Request headers get updated, and the new content loads on the page, but the styling and layout get really messed up and duplicated...
UPDATE:
Inspecting the DOM after this craziness happens reveals that the new page content is getting loaded directly into the anchor that I click, instead of into the element with id #shell. WTF?
You are using a legacy syntax, the new pjax uses the following:
$(document).pjax('a', '#shell', { fragment: '#shell' });
Also I am not familiar with the language you use, but in order to make pjax happen there has to be an HTML element with the id shell in your ViewStart.
As I am not sure about the syntax in that language, try something similar to this for testing:
#{
if (Request.Headers["X-PJAX"] != null) {
echo "<ul id="shell"> pjaaxxx </ul>"; // Would work in php, update syntax
} else {
Layout = "~/Views/Shared/_Layout.cshtml";
}
}
I am not seeing that syntax as valid in the PJax documentation.
Are you sure you didn't mean $(document).pjax('a',{});?
$.pjax immediately executes from what I can tell.
I was researching about how to check if the cookies are enabled in a browser and i found a lot of answer, i even tested a few ones, but after that a friend of mine suggest me to use Modernizr for that.
I started to search about that and i found a lot of stuff related with CSS3 and HTML5, but i don't want that, i just wanna know if is it possible to check that cookies are enabled or not with Modernizr?
check this url, hope it's helpful :
https://github.com/Modernizr/Modernizr/commit/33f00fbbeb12e92bf24711ea386e722cce6f60cc
Below code is copied from http://sveinbjorn.org/cookiecheck.
function are_cookies_enabled()
{
var cookieEnabled = (navigator.cookieEnabled) ? true : false;
if (typeof navigator.cookieEnabled == "undefined" && !cookieEnabled)
{
document.cookie="testcookie";
cookieEnabled = (document.cookie.indexOf("testcookie") != -1) ? true : false;
}
return (cookieEnabled);
}
A direct answer to the question is 'Yes!' and it is built in
Example code:
if (Modernizr.cookies == false) {
alert('Please enable cookies');
}
else {
// do something with cookies
}
You can also use the css class .cookies or .no-cookies to show/hide a panel telling the user they need cookies enabled.
.cookies #noCookies
{
display: none;
}
<div id='#noCookies'>
This site requires cookies! Please turn them on already!
</div>
(This .cookies class is added to <body> tag by Modernizr).
Note: If you are creating a custom build of Modernizr the cookies option is currently 'hidden' under the 'Non-core detects' section.
Another way with PHP
HTML/PHP:
<?php
session_start();
$_SESSION['cook'] = 1;
echo "<img src=\"cookcheck.php\">";
?>
PHP - cookcheck.php:
<?php
session_start();
if ($_SESSION['cook'] !== 1)
{ $image="/nocookmsg.png"; } # Cookies NOT Enabled
else { $image="/blank.png"; } # Cookies Enabled
$img=imageCreateFromPNG($image); # Create Image
header("Content-type: image/png"); # Send Header
imagePNG($image); # Send Image
?>