We Keep Coding

Working example of datatables with lazy loading of images

I'm looking for a working example of lazy-loading of images within datatables that continues to work after clicking on a column heading to change the sorting.
The method I've had the most success with uses the jquery.lazyload plug:
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>
<script type="text/javascript">
$(function() {
$("img.lazy").lazyload();
});
</script>
Here's how I reference the image:
<img class="lazy" data-original="https://example.com/image.jpg" width="50" height="50" />
The lazy loading works fine if I never change the sorting. However, if I decide to change the sorting of the table by clicking on one of the column headings, the lazy loading stops working and any images that were not downloaded at this point will remain blank when I scroll them into view.
I wasn't born a javascript or jQuery expert, so had to learn from examples here on SO and elsewhere. But this problem stumps me. From my research, I see a lot of comments and snippets about how it is possible, but no actual working example that proves this is supported.
jquery-lazyload images in jquery-databables
https://datatables.net/forums/discussion/1959/image-thumbs-in-table-column-lazy-loading
I wont rattle off the numerous other links I found here and elsewhere, I just need some kind soul to help.

Use drawCallback option to define a function that will be called every time DataTables performs a draw.
For example:
$('.table-data').DataTable({
drawCallback: function(){
$("img.lazy").lazyload();
}
});
See this jsFiddle for code and demonstration.

I'm sort of stuck with this one seeing as I don't have access to your backend or more information about your circumstances but I think what will work will be to call your lazy load code in the draw event like this:
$(document).ready(function() {
$("img.lazy").lazyload();
$('.table-data').DataTable({
"drawCallback": function(){
$("img.lazy").lazyload();
setTimeout(function(){
$(window).trigger("scroll")
}, 1000);
}
});
});
I've got an example up here, but I think you might be using server-side processing?

jQuery Datepicker okay on first load of a page but fails thereafter

This is the second time I have asked this question. Neither the responses I received initially nor any of the myriad of other answers to similar questions have helped me to solve the problem.
The problem is that once a datepicker object is initialized, a second initialization causes it to fail. I have tried all sorts of blurring and destroying but nothing has worked for me.
Please take a look at this simple page which demonstrates the problem
Here is the javascript for the page that contains the datepicker input elements...
$(document).ready (function(){
sp = " ";
lf = '\n'
$(function (){
$("input#datepicker").datepicker();
$("input#datepicker2").datepicker();
})
})// document ready
I would truly appreciate any help to get this working. I've already spent about eight hours with no success.
Thanks,
-dmd-

Your code is obsolete. you got a document ready function inside of an document ready function ( $(function(){}) is a shorthand of $(document).ready(function(){}). But this isn't the Problem. Use the following code in your divtest.html and remove the calls in datepicker.html:
$(function(){
$(document).on('DOMNodeInserted','input#datepicker,input#datepicker2', function(){
$(this).datepicker();
});
}

Finally, I have a solution and it is simple.
On the datepicker page, before initializing datepicker, add this line
$('#ui-datepicker-div').remove();
then
$("input#datepicker").datepicker();
$("input#datepicker2").datepicker();
This works for me and I truly hope it works for everyone else who has been bogged down with the issue.

Ajax load php into div giving me issues

I've been hammering away at this for a couple of days trying to resolve it before turning to StackOverflow. But I simply can't see where I'm going wrong.
All I want to do is on document load, bring in dansearch.php into the "displayresults" Div with the following code.
Can anyone shed any light here on how to fix this and more importantly why so I can fully understand the issue? Thanks in advance!
<script>
$(document).ready(function() {
$("#displayresults").load("dansearch.php");
});
</script>
<div id="displayresults"></div>

There are only 2 possibilities, if your code is not working,
Jquery inclusion may not proper.
Your php page or its location is not correct.

Use a .get
<script>
$(document).ready(function() {
$.get("dansearch.php", function(data) {
$("#displayresults").html(data);
});
});
</script>
<div id="displayresults"></div>

jQuery click(function() not working but plain Javascript working just fine

THIS IS THE FULL SCRIPT
http://goo.gl/HoCxk
I have a problem with this function:
$('.message').click(function(){
alert("it works");
var clicked_msg=$(this);
$('#current_message').html(clicked_msg.attr("id"));
});
If instead of the above I add an onclick="msgClicked()", and then do something like this:
function msgClicked(){
var x=document.getElementById("current_message");alert("it works");x.innerHTML("test");}
The jQuery library is obviously imported as literally everything else is done using the jQuery framework and all the other functions implemented on the messaging system are jQuery. Everything works perfect there but for some reason I can't figure out what is wrong with this one.
If any of you are willing to help out and you need to see what is actually going on, please let me know and I will create an account for you on my website. Removing all the protection from the content would take a looong long time.

How are you?
Usually these little annoyances are caused because:
You made a typo (such as .message being incorrectly spelled in either JS or the HTML)
You are trying to assign this function to an element which has not been yet created
Just to be sure, try this:
alert($('.message').length)
$('.message').click(function(){
alert("it works");
var clicked_msg=$(this);
$('#current_message').html(clicked_msg.attr("id"));
});
If it outputs 0, it's because one of the two problems above might be happening, and then, try this:
$(function(){
alert('The page loaded!');
alert('.message elements in page: ' + $('.message').length);
$('.message').click(function(){
alert("it works");
var clicked_msg=$(this);
$('#current_message').html(clicked_msg.attr("id"));
});
});
If you don't get any alert messages, there's something wrong with your jQuery import, and it might be a conflict (such as including jQuery twice!)
If the .message elements in page are more than 0, then it was the second issue (you were trying to assign the .click event to an element which hadn't been yet created)
And if it still says 0 elements, then there are no elements with class "message" created.
I hope this points you in the right direction.
Cheers!

Stacking Images When Page Loads

I've read through a number of similar questions but nothing has worked for me yet. The url is here: http://www.promotion1.com/home-wmc-slide
I've installed a slider and the images are stacking before the script, I do not know JavaScript...
Would anyone be willing to look at the site and see if there might be a quick fix? I seriously need the help.
Thank you!

Try changing your javascript from $(window).load(...) to $(document).ready(..)
$(document).ready(function (){
$("#pikame").PikaChoose();
});

Make sure you're using the newest version of PikaChoose and then do the following.
For your css:
#pikame{ display:none; }
In your js:
$(document).ready(function (){
var showUL = function(){ $("#pikame").show(); };
$("#pikame").PikaChoose({buildFinished:showUL});
});