What's the correct way to callback from infinity scroll? currently this `
$(function() {
code();
$('#catview').infinitescroll({
dataType: 'html',
navSelector: 'div.nextPage',
nextSelector: 'div.nextPage a:first',
itemSelector: '#catalogue',
loading: {
finishedMsg: '',
msgText: '',
img: '/../../../images/loading.gif',
},
debug: true,
animate: true
}, $(function() {
code();
}));
});`
Doens't work :( if i set an alert before code() i will see it when page loads and that's it... the other part of the code is :
function code() {
alert('1')
$('.teest').caroufredsel({
direction: 'left',
circular: true,
items: {
visible: 1,
minimum: 2,
},
scroll: {
fx: 'fade',
easing: 'easeOutCubic',
duration: 200,
},
auto: {
duration: 1600
},
width: 208,
height: 265,
prev: {
button: '.prev'
},
next: {
button: '.next'
}
});
}
all i see if run those 2 codes is the alert 1 , the caroufredsel working on the first page, if i scroll down to seconds page nothing happens, it just loads
Please try this :-
$(function() {
$('#catview').infinitescroll({
dataType: 'html',
navSelector: 'div.nextPage',
nextSelector: 'div.nextPage a:first',
itemSelector: '#catalogue',
loading: {
finishedMsg: '',
msgText: '',
img: '/../../../images/loading.gif',
},
debug: true,
animate: true
},
function(arrayOfNewElems)
{
code();
});
});
As per Infinite Scroll Jquery documentation call back function change your code
$(function() {
code();
}));
to
function(arrayOfNewElems){
//here your collaback function
});
Turns out $(function... is readed as object from the javascript engine , and infinity-scroll cannot callback objects. Removing all the $ from the function solve everything
Related
I'm trying to fetch big amounts of data from a MySQL-database. Therefore I don't want the user to fetch all data at once, cause this could potentially break the DB-server. Yet when I set the jQuery Datatable options, it doesn't seem to be affected by the DisplayLength I set. When I change the amount of items to show, the box and the pagination at the bottom do change, yet the data remains the same.
I've tried to add an invisible field at the and of the columns, which seemed to help in the past. For this problem it didn't though.
$.post("index.php?action=getDataStructurePropsFromSensorId", {
sensorId : sensorId
}, function(data) {
dataProps.push({ "mDataProp": "data_entry_id" });
data.forEach(function (item, i) {
var th = i;
$('#data-th-'+th).html(item['struct_property_label']);
$('.data-th').each(function () {
if ($(this).html() == '') {
$(this).hide();
} else {
$(this).show();
}
});
dataProps.push({ "mDataProp": "data_value_"+i.toString(), "bSortable": false,"bSearchable": false});
});
dataProps.push({ "mDataProp": "data_entry_created_at", "bSortable": false, "bSearchable": false });
dataProps.push({ "mDataProp": "data_entry_id", "bVisible": false });
var obj2 = {
"bStateSave": true,
"bProcessing": true,
"bRetrieve": true,
"bServerSide": true,
"sAjaxSource": "index.php?&action=getSensorData&sensor_id="+sensorId+"&from="+from+"&till="+till,
"iDisplayLength": 5,
"aLengthMenu": [[5, 10, 25, 50, 100, 200], [5, 10, 25, 50, 100, 200]],
"aoColumns": dataProps,
"fnRowCallback": function( nRow, aaData, iDisplayIndex ) {
return nRow;
},
"aaSorting": [[0, 'asc']],
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"fnInitComplete": function (oSettings, json) {
},
"fnDrawCallback": function () {
}
};
oDataTableOverview = $('#sensor_data_dt').dataTable(obj2);
}, "json");
I'm expecting 5 records, depending on the page and the selection in the pagination amount box. Does anyone have an idea why I'm getting all data instead of 5 records?
Which datatables version are you using? For datatables with version 1.10 and above, please use the "pageLength" instead of "iDisplayLength"
$('#example').dataTable( {
"pageLength": 5
} );
In My case i fix it
datatable_object.settings()[0]._iDisplayLength = -1;
datatable_object.draw();
I am quite new to the JQuery language but I have found a tutorial on the net that helped me to get the dialog working from a click button.
the function i use is as following:
$("#registration_ok").click(function() {
$("#dialog").attr('title', 'Registration').text('Your Registration was Successfull!').dialog({ buttons: { 'Ok': function() {
$(this).dialog('close');
}}, open: function(){
jQuery('.ui-widget-overlay').bind('click',function(){
jQuery('#dialog').dialog('close');
})
}, closeOnEscape: true, draggable: false, resizable: false, hide: 'fade', show: 'fade', modal: true, dialogClass: 'success'});
});
I now want to use this function and call it from a php file, but i cant get it to work.
I might need to rewrite the function since i think it will only respond on an actual click so i tried the following:
function dialog() {
$("#dialog").attr('title', 'Registration').text('Your Registration was Successfull!').dialog({ buttons: { 'Ok': function() {
$(this).dialog('close');
}}, open: function(){
jQuery('.ui-widget-overlay').bind('click',function(){
jQuery('#dialog').dialog('close');
})
}, closeOnEscape: true, draggable: false, resizable: false, hide: 'fade', show: 'fade', modal: true, dialogClass: 'success'});
};
I have tried to call the function in different ways, but none did work:
if(isset($_GET['success'])) { echo '<script type="text/javascript"> function() { dialog(); } </script>'; }
Or
if(isset($_GET['success'])) { echo '<script type="text/javascript"> dialog();</script>'; }
none did work, can anyone tell me what i am doing wrong?
Have you tried wrapping the code to be fired in a .ready(); function?
$(document).ready(function(){
});
This will ensure the jquery only fires when the page has loaded. I suspect it's firing too early before all of the elements are present thus not working correctly.
The new code would look something like this:
<?php
if(isset($_GET['success'])){
echo '<script type="text/javascript">
$(document).ready(function(){
dialog();
});
</script>';
}
?>
i want to set up highcharts.
i made a simple random number in this url
http://echocephe.com/new/custom_number.php
i want to use these random datas on Dynamically updated data charts
this is code can you help me to solve this problem thanks.
<script type="text/javascript">
$(function () {
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart;
$('#container').highcharts({
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function() {
var x = (new Date()).getTime(), // current time
y = Math.random();
series.addPoint([x, y], true, true);
}, 1000);
}
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: (function() {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i++) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
})()
}]
});
});
});
</script>
maybe its better to check highchart forums
here is the answer
http://www.highcharts.com/docs/working-with-data/preprocessing-live-data/
index.php
$(document).ready(function(){
$('a.bruker').click(function() {
var idx = $(this).attr('id');
$.ajax({
url:'bruker.php',
type:'POST',
data: 'id='+idx,
cache: false,
success:function(data) {
$('#bruker').html(data);
}
});
});
});
echo "<div id='bruker'></div>";
<a class='bruker' id='1'>name1</a>
<a class='bruker' id='2'>name2</a>
bruker.php
if(isset($_POST['id'])) {
echo "<script> $(function() {
$('.bruker-box').dialog({
autoOpen:true,
resizable: false,
closeOnEscape: true,
width:600,
height:500,
show: 'fade',
modal: true,
open: function(event, ui) { },
position: { my: 'center', at: 'center' }
})
$('#ui-id-2').css('border', 'none');
$('.ui-widget-overlay').click (function () {
$('.bruker-box').dialog( 'close' );
});
});</script>";
echo "<div class='bruker-box' title='(".$_POST['id'].")'>";
echo "example";
echo "</div>";
When i click out of the first box (name1) and click on name2 i want to get only the name 2 to come up, but the first box (name1) comming up first and than name2.
How can i get this right? Is there a way to reset somthing when i click on a new one?
This is happening because, every time an anchor is clicked, you are injecting a new div containing a dialog set to autoOpen. (Turn on Developer Tools F12 in Chrome and watch what happens.)
The autoOpen divs accumulate, redisplaying themselves with each change to the DOM.
To solve this, you can remove() the div after it displays. Change your bruker.php file to look like this:
Note the addition of a close: function in the dialog definition:
PHP:
if(isset($_POST['id'])) {
$out = "
<script>
$(function() {
$('.bruker-box').dialog({
autoOpen:true,
resizable: false,
closeOnEscape: true,
width:600,
height:500,
show: 'fade',
modal: true,
open: function(event, ui) { },
position: { my: 'center', at: 'center' },
close: function() {
$('div.ui-dialog').remove();
}
}); //END .dialog()
$('#ui-id-2').css('border', 'none');
$('.ui-widget-overlay').click (function () {
$('.bruker-box').dialog( 'close' );
});
}); //END document.ready
</script>";
$out .= "<div class='bruker-box' title='Name: (" .$_POST['id']. ")'>";
$out .= "example";
$out .= "</div>";
echo $out;
}
I'm a beginner with php and fullcalendar.I need to update the calendar with the user input value ($('#name')). But it doesn´t work.
I have this code.
$(document).ready(function() {
var UsrAux;
$('#name').blur(function(){
UsrAux = $('#name').val() // <-- This is the input
});
$('#calendar').fullCalendar({
draggable: true,
height: 400,
cache: true,
eventSources: [
// your event source
{
url: 'CalendarServer.php',
type: 'POST',
data: {
uno: 'Something',
UsrCdg: UsrAux
},
error: function() {
alert('error!');
},
color: '#e2ebef', // a non-ajax option
textColor: 'black' // a non-ajax option
}
]
});
});
Any help would be greatly appreciated!
The blur event function should be defined before the fullCalendar as it gets the data (the user input) you need.
Hi this is the solution.
$(document).ready(function(){
var UsrAux;
UsrAux=$('#name').val();
$('#name').blur(function(){
UsrAux=$('#name').val();
var source = {
url: 'CalendarServer.php',
type: 'POST',
data: { // Parms
uno: 'Somenthing',
UsrCdg: UsrAux
},
error: function() {
alert('error!');
},
color: '#e2ebef', // a non-ajax option
textColor: 'black' // a non-ajax option
};
$('#calendar').fullCalendar('removeEvents');
$('#calendar').fullCalendar('addEventSource', source);
});
$('#calendar').fullCalendar({
draggable: true,
height: 400,
cache: true,
eventSources: [
// your event source
{
url: 'CalendarServer.php',
type: 'POST',
data: { // Parms
uno: 'something',
UsrCdg: $('#name').val()
},
error: function() {
alert('error!');
},
color: '#e2ebef', // a non-ajax option
textColor: 'black' // a non-ajax option
}
]
});
});