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 append a dialog into a main div on your page on button click

I have a log in button that when a user clicks on it a terms and condition dialog pops up and overlaps the contents on a page as follows
TermsSuccess: function (result, context) {
var topTerms = findSetByInArray(result.Data, 'ParentId', 0);
var termsHTML = '<div id="terms"><ul class="termsList">';
for (var i = 0; i < topTerms.length; i++) {
var cls = (topTerms[i].isNew) ? 'newTerm' : 'Term';
termsHTML += '<li id=' + topTerms[i].ID + ' class=' + cls + '>'
termsHTML += topTerms[i].PageIndex + '. ' + topTerms[i].Detail;
termsHTML += getChildrenTerms(result.Data, topTerms[i].ID, topTerms[i].PageIndex + '. ');
termsHTML += '</li>';
}
termsHTML += '</ul></div>';
$(termsHTML).dialog({
modal: true,
resizable: false,
width: 400,
height: 600,
closeOnEscape: false,
open: function (event, ui) {
$(this).parent().children().children('.ui-dialog-titlebar-close').hide();
},
title: "Terms & Conditions",
buttons: [{
text: "Decline",
"class": 'btnDialog',
click: function () {
$(this).dialog("close");
}
},
{
text: "Accept",
"class": 'btnDialog',
click: function () {
betEvents.btnAccept_onClick();
$(this).dialog("close");
}
}]
});
}
I want this dialog to be appended to the following div on the page instead of it poping up over all the contents
<div id="mainarea"></div>
i tried to do something as the following but it doesnt work
function onClick(){
if $("#btnLogin").click(function(){
$('termsHTML').append('#mainarea');
});
}
your guidance will be appreciated.

Change this line:
$('termsHTML').append('#mainarea');
to
$(#mainarea).append(termsHTML);
and try again.
Explanation: $('termsHTML').append('#mainarea'); // here your selector is wrong

guive html to keyframe css

I have follow function:
$.keyframe.define([{
name: 'playSlide',
tMin : {'margin-left': "0"},
tMax : {'margin-left': "0"},
}]);
But i need make it:
$.keyframe.define([{
name: 'playSlide',
content: variable
}]);
This variable is text
text = "'0%' : { 'margin-left':'-0%'},";
text += "'25%' : { 'margin-left':'-0%'},";
text += "'30%' : { 'margin-left':'-100%'},";
text += "'50%' :{ 'margin-left':'-100%'},";
text += "'55%' : { 'margin-left':'-200%'},";
text += "'75%' : { 'margin-left':'-200%'},";
text += "'80%' : { 'margin-left':'-300%'},";
text += "'100%' : { 'margin-left':'-300%'}";
Is it possible?
Maybe of other form:
$("<style> #keyframes playSlide").html(text2);
Ou maybe:
$("animation playSlide").html(text2);
with: text2 variable below
text2 = "0% : { margin-left:-0%},";
text2 += "25% : { margin-left:-0%},";
text2 += "30% : { margin-left:-100%},";
text2 += "50% :{ margin-left:-100%},";
text2 += "55% : { margin-left:-200%},";
text2 += "75% : { margin-left:-200%},";
text2 += "80% : { margin-left:-300%},";
text2 += "100% : { margin-left:-300%}";
I can not do it
Nothing works

Jquery script not working without alert

When I remove the alert from the function, the script doesn't work anymore.
Any ideas about why it happens ?
Function with alert in front:
function conScroll(getID){
alert();
$('#con_'+getID).mCustomScrollbar({
theme: 'minimal',
autoHideScrollbar: true,
axis: 'y',
mouseWheelPixels: 250,
advanced:{
updateOnContentResize: true
}
});
}
$(document).on('click', 'a[id=cWin]', function(){
var ID = Math.floor(Math.random()*90000) + 10000;
var TITLE = jQuery(this).attr('title');
var PAGE = $(this).attr('href');
$('#content').append('<div id="'+ ID +'" class="draggable">'+
'<div class="moveband">'+
'<div class="title">'+ TITLE +'</div>'+
'<div id="buttons">'+
'<div id="m_'+ ID +'" class="minimize"></div>'+
'<div id="c_'+ ID +'" class="close"></div>'+
'</div>'+
'<div style="clear:both"></div>'+
'</div>'+
'<div id="con_'+ ID +'" class="draggcon">d</div>'+
'</div>');
$('#list').append('<div id="t_'+ ID +'" class="item">Chatbox #'+ ID +'</div>');
$('#con_' + ID).load('../php/' + PAGE + '.php');
WinControl();
conScroll(ID);
return false;
});

Add mCustomScrollbar initialization into settimeout. It will work.
setTimeout(function(){
$('#con_'+getID).mCustomScrollbar({
theme: 'minimal',
autoHideScrollbar: true,
axis: 'y',
mouseWheelPixels: 250,
advanced:{
updateOnContentResize: true
}
});
}, 1000);

Input OnClick is not recognized

I have this method that is recursively called.
This method creates a li that ll be used on Iscroll plugin.
My problem is:
The input button does not works. On his CSS I set cursor:pointer to check if the input is recognized, and it is. But I can click it several times that does nothing.
createList: function(p_id)
{
var lv_linhaDoc = '<li id="lis_' + p_id + '" class="listItem">' +
'<div class = "alinhar1" onClick="lis.Click(' + p_id + ', false)">' +
'<div class="ui-grid-a" style="font-size: large">' +
'<div class="ui-block-a"><p class="header" style="font-size: medium"><strong>' + 4 + '</strong></p></div>' +
'<div class="ui-block-a"><p class="line label"><strong>Data Criação</strong></p></div>' +
'<div class="ui-block-b"><p class="line value" style="text-align: right">' + '13/2/14' + '</p></div>' +
'<div class="ui-block-a"><p class="line label total"><strong> Valor</strong></p></div>' +
'<div class="ui-block-b"><p class="line total" style="text-align: right">' + 13 + ' ' + 15 + '</p></div>' +
'</div></div>' +
' <input type="button" class=" button_add" onClick="lis.Detail(' + p_id + ')" />' +
'</li>';
return lv_linhaDoc;
},
The problem is not in the Detail() function bacause I can't enter in that function because the click is not recognized
UPDATE
I found that the input button stopped working after I add these to the IScroll initialization
click: true,
tap: true,
I really need those arguments in the IScroll to do other fucntions.
IScroll initialization:
initScroll: function(){
var wrapper = document.getElementById('id5');
myScroll = new IScroll(wrapper, {
// click: true,
// tap: true,
scrollX : false,
scrollY : true,
scrollbars : false,
interactiveScrollbars : true,
mouseWheel : false,
hScrollbar : false,
vScrollbar : true,
useTransition : false,
snap : 'li',
indicators : {
el : '#scroller',
fade : false,
ignoreBoundaries : false,
interactive : false,
listenX : false,
listenY : true,
resize : false,
shrink : false,
speedRatioX : 0,
speedRatioY : 0,
checkDOMChanges: true,
},
});

Instead of trying to add the click handler inline, you can save the p_id as a data-attribute on the input and then setup a click handler using event delegation. With delegation you can setup a handler on elements that will be created dynamically later.
When creating the listitem, put the p_id in a data-attribute of the input e.g. data-pid:
<input type="button" class="button_add" data-pid="' + p_id + '" value="+" />
Then add a click handler that delegates to the .button_add class. In that handler you can retrieve the p_id from the data-attribute:
$(document).on("click", ".button_add", function(e){
var p_id = $(this).data("pid");
alert(p_id);
//call detail function and pass in the p_id
});
DEMO

You need to do something like below :
createList: function(p_id)
{
var lis = new lisClass();
var lv_linhaDoc = '<li id="lis_' + p_id + '" class="listItem">' +
'<div class = "alinhar1" onClick="lis.Click(' + p_id + ', false)">' +
'<div class="ui-grid-a" style="font-size: large">' +
'<div class="ui-block-a"><p class="header" style="font-size: medium"><strong>' + 4 + '</strong></p></div>' +
'<div class="ui-block-a"><p class="line label"><strong>Data Criação</strong></p></div>' +
'<div class="ui-block-b"><p class="line value" style="text-align: right">' + '13/2/14' + '</p></div>' +
'<div class="ui-block-a"><p class="line label total"><strong> Valor</strong></p></div>' +
'<div class="ui-block-b"><p class="line total" style="text-align: right">' + 13 + ' ' + 15 + '</p></div>' +
'</div></div>' +
' <input type="button" class=" button_add" onClick="lis.Detail(' + p_id + ')" />' +
'</li>';
return lv_linhaDoc;
},
You see i have aded var lis = new lisClass();

Just found the solution:
There's a bug on IScroll that if the parameter click is enable then all the form elements, such as the submit button do not work with iScroll.
So, I did this:
myScroll = new IScroll(wrapper, {
click: false,
scrollX : false,
scrollY : true,
scrollbars : false,
interactiveScrollbars : true,
mouseWheel : false,
hScrollbar : false,
vScrollbar : true,
useTransition : false,
snap : 'li',
preventDefaultException: {tagName:/.*/},
indicators : {
el : '#scroller',
fade : false,
ignoreBoundaries : false,
interactive : false,
listenX : false,
listenY : true,
resize : false,
shrink : false,
speedRatioX : 0,
speedRatioY : 0,
checkDOMChanges: true,
},
});
Notice that the parameter clickis now as false and i add the preventDefaultException: {tagName:/.*/},
I found this here