Develop Reference

Pass JSON result from AJAX to HTML

I am querying a fuseki server using AJAX and the result that I am getting is a JSON object.
I would like to use pagination to go through the result with a limit of records per page. I have tried to send the JSON object to a div in the html file but it is not working. Is there a workaround this? Here is my code:
function myCallBack2(data) {
var all_results = '';
for (var i = 0; i < data.results.bindings.length; i++) {
var bc = '';
if (i % 2 == 0) {
bc = '#b8cddb';
} else {
bc = '#f2f5f7';
}
all_results += '<div class="all_results" style="background-color:' + bc + '">';
for (var j = 0; j < data.head.vars.length; j++) {
var text = data.results.bindings[i][data.head.vars[j]].value;
var type = data.results.bindings[i][data.head.vars[j]].type;
all_results += '<div class="result_row">';
if (type == ('literal')) {
all_results += '<p> ' + data.head.vars[j] + ": " + text + '</p>';
} else {
all_results += '<a href=' + text + " title=" + data.head.vars[j] + '>' + text + '</a>';
}
all_results += '</div>';
}
all_results += '</div>';
}
$('#result').html(all_results);
}
function doSparql() {
var myEndPoint = "http://localhost:3030/Test/query";
name = document.getElementById("search").value;
var requiredName = "?Author foaf:firstName \"" + name + "\".}";
myQuery = ["PREFIX dcterms: <http://purl.org/dc/terms/>",
"PREFIX foaf: <http://xmlns.com/foaf/0.1/>",
"PREFIX locah: <http://data.archiveshub.ac.uk/def/>",
"SELECT ?Register ?Id ?Date ?Type",
"WHERE{",
"?Register dcterms:creator ?Author.",
"?Register dcterms:identifier ?Id.",
"?Register dcterms:type ?Type.",
"?Register locah:dateCreatedAccumulatedString ?Date.",
requiredName
].join(" ");
console.log('myQuery: ' + myQuery);
window.alert(myQuery);
$.ajax({
dataType: "jsonp",
url: myEndPoint,
data: {
"query": myQuery,
"output": "json"
},
success: myCallBack2,
error: myError
});
console.log('After .ajax');
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//raw.github.com/botmonster/jquery-bootpag/master/lib/jquery.bootpag.min.js"></script>
<div id="page-selection1" "></div>
<div id="result " class="result "></div>
<div id="page-selection2 "></div>
<script>
$('#page-selection1,#page-selection2').bootpag({
total: 50,
page: 1,
maxVisible: 5,
leaps: true,
firstLastUse: true,
first: 'First',
last: 'Last',
wrapClass: 'pagination',
activeClass: 'active',
disabledClass: 'disabled',
nextClass: 'next',
prevClass: 'prev',
lastClass: 'last',
firstClass: 'first'
}).on("page ", function(event, num) {
$("#result ").html("Page " + num);
});
</script>
I am expecting to show part of the results instead Page 1, Page 2... in #result according to a limit per page.

How to make: enable / disable option for javascript function with php?

I am still new in php, javascript so I hope that you can help me. :)
I have a LightBox which works good. But Now I want to make enable / disable option for Lightbox in my Wordpress theme.
I have this code for settings options page:
array (
'id' => 'enable_lightbox',
'type' => 'switch',
'title' => __('Enable Lightbox', 'framework'),
'desc' => __('Enable or disable lightbox', 'framework'),
'default' => 1,
),
and this is code for lightbox:
/LightBox
function buildShareThis(url){
var switchTo5x=true;
stLight.options({publisher: "496075ad-6369-474b-ba12-283ff1fe76ac", doNotHash: false, doNotCopy: false, hashAddressBar: false});
var customShareThis = "<div class='share'>";
customShareThis += "<span class='st_sharethis_large' displayText='ShareThis' st_url='"+url+"'></span> ";
customShareThis += "<span class='st_facebook_large' displayText='Facebook' st_url='"+url+"'></span>";
customShareThis += "<span class='st_googleplus_large' displayText='Google +' st_url='"+url+"'></span>";
customShareThis += "<span class='st_twitter_large' displayText='Tweet' st_url='"+url+"'></span> ";
customShareThis += "<span class='st_pinterest_large' st_url='"+url+"'></span>";
customShareThis += "<span class='st_linkedin_large' displayText='LinkedIn' st_url='"+url+"'></span>";
customShareThis += "<span class='st_baidu_large' displayText='Baidu' st_url='"+url+"'></span>";
customShareThis += "<span class='st_reddit_large' displayText='Reddit' st_url='"+url+"'></span>";
customShareThis += "<span class='st_tumblr_large' displayText='Tumblr' st_url='"+url+"'></span>";
customShareThis += "<span class='st_email_large' displayText='Email' st_url='"+url+"'></span>";
customShareThis += "<span class='st_print_large' displayText='Print' st_url='"+url+"'></span>";
customShareThis += "</div>";
return customShareThis;
}
jQuery(".fancybox, a[href$='.jpg'], a[href$='.png'], a[href$='.jpeg'], a[href$='.gif'], .video")
.attr('rel', 'gallery')
.fancybox({
closeClick : false,
nextEffect: 'fade',
prevEffect: 'fade',
beforeShow: function() {
var caption = jQuery(this.element).data("caption") ? jQuery(this.element).data("caption") : "";
this.title = this.title ? this.title + buildShareThis(this.href) + caption : buildShareThis(this.href) + caption;
},
afterShow: function(){
stButtons.locateElements();
},
helpers : {
title : {
type: 'inside'
}
}
});
What code do I need to use to get this working ?
So that I could from settings options page turn on or turn off Lightbox ?
Thank you

php code
if($setting -> default == 1) // Is enable
{
echo '<script>var enable_Light = false; </script>';
}
in LightBox code add a if sectment.
if(enable_Light == true){
jQuery(".fancybox, a[href$='.jpg'], a[href$='.png'], a[href$='.jpeg'], a[href$='.gif'], .video")
.attr('rel', 'gallery')
.fancybox({
closeClick : false,
nextEffect: 'fade',
prevEffect: 'fade',
beforeShow: function() {
var caption = jQuery(this.element).data("caption") ? jQuery(this.element).data("caption") : "";
this.title = this.title ? this.title + buildShareThis(this.href) + caption : buildShareThis(this.href) + caption;
},
afterShow: function(){
stButtons.locateElements();
},
helpers : {
title : {
type: 'inside'
}
}
});
}

wrap selected text in <span> on behalf of selection of drop down list

I have a drop down list out of editor area . I have to add <span> on selection of any of those list item around the selected text. I have made styles for this .But its not working.
Note: I am not using any plugin.
document.write( '<select id="markup" onchange="createEditor( this.value );">' );
var markup = ['Person','Event','Place'];
for ( var i = 0 ; i < markup.length ; i++ )
{
document.write(
'<option value="' + markup[i] + '">' +
markup[i] +
'</option>' );
}
document.write( '</select>' );
var editor;
function createEditor( selected )
{
if ( editor )
editor.destroy();
/* CKEDITOR.stylesSet.add( 'my_styles',
[
{ name : 'Span1', element : 'span', attributes : { 'itemprop' : 'prop' } },
{ name : 'Span2', element : 'span', attributes : { 'itemscope' : '' , 'itemtype' : 'type' } }
]); */
editor = CKEDITOR.replace( 'editor1',
{
style : new CKEDITOR.style(
{
element : 'span',
attributes : { 'itemprop' : 'prop' },
}),
style1 : new CKEDITOR.style(
{
element : 'span',
attributes : { 'itemscope' : '' , 'itemtype' : 'type' },
}),
on :
{
instanceReady : function()
{
// config.stylesSet = 'my_styles';
var mark = document.getElementById( 'markup' );
this.style.apply(editor.getSelection().getSelectedText());
// this.style1.apply(editor.document);
}
}
} );
}
createEditor( '' );
</script>
Please Help anybody in wrapping selected text in <span> on selection of list item of drop drop down list.

Change a variable in javascript after onclick

I'm pretty new in coding with javascript and i have this issue:
I have the uploadify configuration, where i have this line:
// <![CDATA[
$(document).ready(function() {
$('#file_upload').uploadify({
'uploader' : 'js/uploadify/uploadify.swf',
'script' : 'ajaxup.php<?php if(isset($_SESSION['user_id'])) { echo "?session_id=" . session_id() ; } ?>',
'cancelImg' : 'css/img/cancel.png',
'auto' : true,
'displayData' : 'speed',
'multi' : true,
'fileDataName' : 'uploaded',
'fileExt' : '*.jpg;*.gif;*.png;*.jpeg',
'fileDesc' : 'Image Files',
'queueSizeLimit' : 30,
'simUploadLimit' : 1,
'sizeLimit' : 5024*1024,
'scriptData' : {'postkey' : postValueVariable},
'onOpen' : function() {
document.getElementById('index_upload').style.cssText = 'width: 600px !important';
document.getElementById('ajax_allbbcodes').style.cssText = 'display:inherit;';
$("#ajax_bbcodes").animate({
width: "500",
height: "100"
}, 1000 );
$("#ajax_HTMLcodes").animate({
width: "500",
height: "100"
}, 1000 );
$("#ajax_DirectLinks").animate({
width: "500",
height: "100"
}, 1000 );
<?php if(DIRECT_LINK_SHOW == 1) { ?>
$("#ajax_DirectLinkToImgs").animate({
width: "500",
height: "100"
}, 1000 );
<?php } ?>
},
'onProgress' : function(event,ID,fileObj,data) {
var bytes = Math.round(data.bytesLoaded / 1024);
$('#' + $(event.target).attr('id') + ID).find('.percentage').text(' - ' + bytes + 'KB Uploaded');
document.getElementById('progressbarOver').style.cssText = 'display:inherit;';
$("#progressbar").animate({
width: data.percentage + "%",
height: "20"
}, 200 );
return false;
},
'onComplete' : function(event, ID, fileObj, response, data) {
old_guests = document.getElementById("testajax").innerHTML;
document.getElementById('testajax').innerHTML = old_guests + response;
myArrayBBCode = $('.ajax_BBCode');
oldbb = document.getElementById('ajax_bbcodes').innerHTML;
document.getElementById('ajax_bbcodes').innerHTML = oldbb + myArrayBBCode[myArrayBBCode.length-1].innerHTML + ' ';
myArrayHTMLCode = $('.ajax_HTMLCode');
oldbbHTMLCode = document.getElementById('ajax_HTMLcodes').innerHTML;
document.getElementById('ajax_HTMLcodes').innerHTML = oldbbHTMLCode + myArrayHTMLCode[myArrayHTMLCode.length-1].innerHTML + ' ';
myArrayDirectLink = $('.ajax_DirectLink');
oldbbDirectLink = document.getElementById('ajax_DirectLinks').innerHTML;
document.getElementById('ajax_DirectLinks').innerHTML = oldbbDirectLink + myArrayDirectLink[myArrayDirectLink.length-1].innerHTML + ' \r\n';
<?php if(DIRECT_LINK_SHOW == 1) { ?>
myArrayDirectLinkToImg = $('.ajax_DirectLinkToImg');
oldbbDirectLinkToImg = document.getElementById('ajax_DirectLinkToImgs').innerHTML;
document.getElementById('ajax_DirectLinkToImgs').innerHTML = oldbbDirectLinkToImg + myArrayDirectLinkToImg[myArrayDirectLinkToImg.length-1].innerHTML + ' \r\n';
<?php } ?>
},
'onAllComplete' : function(event,data) {
document.getElementById('progressbarOver').style.cssText = 'display:none;';
}
});
});
// ]]>
I need to have two buttons with onclick function or something, that when pressed, to change that postValueVariable to Yes or No . I tryed in many ways but didn't worked. Hope i'll find the answer here. Thank you in advance !

This should help get you started.
<button data-boolean='yes'>button one</button>
<button data-boolean='no'>button two</button>
window.postValueVariable = null;
updateValueVariable = function () {
window.postValueVariable = this.getAttribute('data-boolean');
alert('postValueVariable is now ' + window.postValueVariable);
};
var buttons = document.querySelectorAll('button');
for (var i = 0; i < buttons.length; i += 1) {
var button = buttons[i];
(function () {
button.addEventListener('click', updateValueVariable, false);
}())
}

JavaScript: Building a HTML table from a nested JSON

I have a problem building a HTML table from the following JSON
[
{
"size" : 167,
"price" : 453400,
"type" : "Neubau",
"children" : false
},
{
"size" : 167,
"price" : 453400,
"type" : "Neubau",
"children" : false
},
{
"size" : 167,
"price" : 453400,
"type" : "Neubau",
"children":[
{
"size" : 167,
"price" : 453400,
"type" : "Neubau",
"children" : false
},
{
"size" : 167,
"price" : 453400,
"type" : "Neubau",
"children" : false
}
]
},
{
"size" : 167,
"price" : 453400,
"type" : "Neubau",
"children" : false
}
]
when fed into these functions
function getRowHTML(dataObject, type) {
cycles = dataObject.length;
var markup = '';
for (var i=0; i < cycles; i++) {
// different markup for each line
switch (type) {
case 'size':
markup += ' <td>' + dataObject[i].size + '</td>';
break;
case 'price':
markup += ' <td>' + addDots(dataObject[i].price) + '€ </td>';
break;
case 'type':
markup += ' <td>' + dataObject[i].type + '</td>';
break;
}
// Check if an object has children and insert children HTML as well
if (dataObject[i].children) {
markup += getRowHTML(dataObject[i].children,type);
}
}
return markup;
}
function getHTML(data) {
var markup = '<table>';
markup += '<tr class="odd">' + getRowHTML(data,'size') + '</tr>';
markup += '<tr class="even">' + getRowHTML(data,'price') + '</tr>';
markup += '<tr class="odd">' + getRowHTML(data,'type') + '</tr>';
markup += '</table>';
return markup;
}
Everything works fine until I add the check for children and the corresponding recursive function call.
Then the result are the first two objects and the children but the last one won't be in the table. Any ideas?

You have forgotten the var on the cycles variable, making it an accidental global. The inner call to getRowHTML overwrites the value of the global cycles in the outer call, making the outer loop end early.
Note you also have HTML-injection problems if any of the properties can contain HTML-special characters. You should HTML-escape any content being inserted into an HTML string. Or, to avoid having to think about that, use DOM methods to create the table instead. eg.
function fillRow(row, items, property) {
for (var i= 0, n= items.length; i<n; i++) {
var item= items[i];
var s= item[property];
if (property==='price')
s= addDots(s)+'\u20Ac'; // €
row.insertCell(-1).appendChild(document.createTextNode(s));
if (item.children)
fillRow(row, item.children, property);
}
}
function makeTable(data) {
var table= document.createElement('table');
var properties= ['size', 'price', 'type'];
for (var i= 0, n= properties.length; i<n; i++) {
var row= table.insertRow(-1);
row.className= i%2===0? 'odd' : 'even';
fillRow(row, data, properties[i]);
}
return table;
}