Develop Reference

jQuery event binding with dynamically loaded elements when scroll down at the end of window

<script type="text/javascript">
$(document).ready(function() {
var page = 0;
$(window).scroll(function () {
if ($(document).height()-$(document).height()*0.2 <= $(window).scrollTop() + $(window).height()) {
$.ajax({
type: "POST",
url: "/",
dataType: "json",
data: { 'page' : page, 'csrfmiddlewaretoken': '{{csrf_token}}'},
success: function(data) {
obj1 = JSON.parse(data.fulldata);
var newHTML = '<a href = "" >somecode</a>';
$(".newdata").append(newHTML);
},
error: function(data) {
// alert("error")
}
});
}
}
});
</script>
i have readed this link for dynamically added elements, that we must bind the function to one of it's parents
...but no success
i am not pasting the entire code here. suppose code is correct and working fine. only when i am clicking the loaded element its not working..
Thanks in advance
full code

why this code is not loading pages ajax jquery

Guys What I am trying to do is load a page on navigation click with ajax and put some delay in it loading
when nothing is clicked I want load home page following loading animation with jquery and a delay with PHP code
and if something on nav is clicked I want to load that particular file
but this code don't seem to be working
var res = {
loader: $('<div />', {class: 'loader' } ),
container: $('.content')
};
$(document).ready(function(){
$.ajax({
url: 'templates/delay.php',
beforeSend, function(){
res.container.append(res.loader);
},
success, function(){
res.container.find(res.loader).remove();
$('.content').load('templates/pages/home.php');
}
});
$('ul#nav_a li a').click(function(){
$.ajax({
url: 'templates/delay.php',
beforeSend, function(){
res.container.append(res.loader);
},
success, function(){
res.container.find(res.loader).remove();
var page=$(this).attr('href');
$('.content').load('templates/pages/'+page+'.php');
return false;
});
});
}
});

I will not discuss the code itself, but just improve it.
Try this code and tell me if you get what you want : ( comments inside the js code )
$(document).ready(function(){
$.ajax({
url: 'templates/delay.php',
// old code : beforeSend,
beforeSend: function(){
res.container.append(res.loader);
},
// old code : success,
success: function(){
res.container.find(res.loader).remove();
$('.content').load('templates/pages/home.php');
}
// beforeSend and success are keys with functions as values that's why we use ":" and not ","
// the "," comma is used to separate ajax settings
});
$('ul#nav_a li a').click(function(){
var page = $(this).attr('href');
$.ajax({
url: 'templates/delay.php',
// old code : beforeSend,
beforeSend: function(){
res.container.append(res.loader);
},
// old code : success,
success: function(){
res.container.find(res.loader).remove();
$('.content').load('templates/pages/'+page+'.php');
// old code
// return false;
// });
// we close our ajax.success function
}
})
// old code
// }
// return false is used to prevent browser to run the a href that's why we use it in the a.click function and not inside the ajax block
return false;
})
})

var res = {
loader: $('<div />', {class: 'loader' } ),
container: $('.content')
};
$(document).ready(function(){
res.container.append(res.loader);
$('.content').load( "templates/pages/home.php", function() {
res.container.find(res.loader).remove();
});
$('ul#nav_a li a').click(function(){
var page=$(this).attr('href');
$('.content').load( 'templates/pages/'+page+'.php', function() {
res.container.find(res.loader).remove();
});
});
}
});
Just copy and paste it.

Second jQuery function failing to run

I have created two user-defined functions within the "head" section of an HTML page and I am calling them with a script just before the closing "body" tag. The trouble is that the second function is not working, unless I include an "alert" statement in the first function (which halts the execution until I dismiss the alert).
I am guessing it is caused by the first function not actually finishing completely before the second one starts and by having my alert statement it gives the first function time to finish.
Function one is to build a list of images in DIV tags.
Function two implements FlexSlider to initiate a slideshow of the images.
Calling the below as it is will render a page with all images shown. If I uncomment the alert box and run it again, the screen is rendered with my images, I dismiss the alert box, and then FlexSlider kicks in and starts the slideshow.
Here are the two functions defined in the "head" section.
<script type="text/javascript">
var buildslider = function () {
$.ajax({
type: "GET",
url: "/myImages/homepageslider/PhotoGallery.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('img').each(function() {
var location = '/myImages/homepageslider/';
var url = $(this).attr('src');
var alt = $(this).attr('alt');
$('<div class="slide-group"></div>').html('<img src="'+location+''+url+'" alt="'+alt+'"/>').appendTo('.slides');
});
}
});
//alert("buildslider finished");
};
var runslider = function() {
$('.flexslider').flexslider({
selector: '.slides > .slide-group',
controlNav: false,
directionNav: false
});
};
</script>
And here is the code near the closing "body" tag.
<script>
$(document).ready(function() {
buildslider();
runslider();
});
</script>
What am I doing wrong and how do I correct this so it can be done properly?
Thank you in advance.
David.

Return the ajax() returned object from the first function. This is a jQuery "promise" object which will then expose done and fail methods. These methods take a function, so you can just insert your second function into done. See example below:
<script type="text/javascript">
var buildslider = function () {
return $.ajax({
type: "GET",
url: "/myImages/homepageslider/PhotoGallery.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('img').each(function() {
var location = '/myImages/homepageslider/';
var url = $(this).attr('src');
var alt = $(this).attr('alt');
$('<div class="slide-group"></div>').html('<img src="'+location+''+url+'" alt="'+alt+'"/>').appendTo('.slides');
});
}
});
};
var runslider = function() {
$('.flexslider').flexslider({
selector: '.slides > .slide-group',
controlNav: false,
directionNav: false
});
};
</script>
Then run with:
<script>
$(document).ready(function() {
buildslider().done(runslider);
});
</script>
It also makes it easier to handle failures in a more general way:
<script>
$(document).ready(function() {
buildslider().done(runslider).fail(function(){
alert("#%&£ happens!");
});
});
</script>
Using promises is far more flexible than using callbacks, and supports multiple done() functions, so is now the preferred way to do this.
Note: A simpler shortcut for DOM ready is $(function(){ your code here }); or if you want it to have a locally scoped $ use jQuery(function($){ your code here }); which acts as both a DOM ready handler and provides a locally scoped $ to avoid clashes (e.g. with other plugins).

<script type="text/javascript">
var buildslider = function () {
$.ajax({
type: "GET",
url: "/myImages/homepageslider/PhotoGallery.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('img').each(function() {
var location = '/myImages/homepageslider/';
var url = $(this).attr('src');
var alt = $(this).attr('alt');
$('<div class="slide-group"></div>').html('<img src="'+location+''+url+'" alt="'+alt+'"/>').appendTo('.slides');
});
}
});
//alert("buildslider finished");
};
var runslider = function() {
$('.flexslider').flexslider({
selector: '.slides > .slide-group',
controlNav: false,
directionNav: false
});
};
$( document ).ajaxComplete(function( event, xhr, settings ) {
if ( settings.url === "/myImages/homepageslider/PhotoGallery.xml" ) {
runslider();
}
});
</script>
Now Just call the buildslider() only no need to call the runslider() in your document.ready..

try something like this
var buildslider = function () {
$.ajax({
type: "GET",
url: "/myImages/homepageslider/PhotoGallery.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('img').each(function() {
var location = '/myImages/homepageslider/';
var url = $(this).attr('src');
var alt = $(this).attr('alt');
$('<div class="slide-group"></div>').html('<img src="'+location+''+url+'" alt="'+alt+'"/>').appendTo('.slides');
$('.flexslider').flexslider({
selector: '.slides > .slide-group',
controlNav: false,
directionNav: false
});
});
}
});
};
final script block
$(document).ready(function() {
buildslider();
});
Note : execute slider code after ajax is successfully completed.

how to create a pop up in mvc 4?

So, i want to show a pop up when deleting a row from my table, so this is my action link :
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"></script>
#Html.ActionLink("Delete", "Delete", new { id=item.cin },new { #class = "delete-logo" ,#pkNo=item.cin})
<div id="confirmDialog" title="Warning"></div>
my script :
<script type="text/javascript">
$(document).ready(function () {
buttonizeALL();
setLinks();
});
function buttonizeALL()
{
$(".delete-logo").button();
}
function setLinks()
{
//delete person
$(document).ready(function () {
$(".delete-logo").live("click", function (e) {
e.preventDefault();
var pkNo = $(this).attr("pkNo");
$("#confirmDialog").dialog({
resizable: false,
height: 200,
width: 300,
modal: true,
buttons: {
"Yes": function () {
$(this).dialog("close");
var rowNo = '#row-' + pkNo;
var url = '/Subscribers/Delete/' + pkNo;
$.ajax({
type: "Delete",
url: url,
data: {},
cache: false,
dataType: "json",
success: function () {
$(rowNo).animate({ opacity: 0.0 }, 400, function () {
$(rowNo).remove();
});
},
error: function (jqXHR, exception) {
alert('Uncaught Error.\n' + jqXHR.responseText);
}
}); //end ajax call
}, // end of yes button
"No": function () {
$(this).dialog("close");
}
} //end buttons
}); //end modal
}); //end delete
});
} //end setLinks
my problem is the pop up doesn't work, and when i used my script without the pop up it works, so please if some one have any idea i will be very appreciated.

Here is your example tidied up a little in a jsFiddle i.e. I've moved the setLinks() code into the document.ready() function.
$(document).ready(function () {
buttonizeALL();
setLinks(); // removed this
});
Also I've replaced the ActionLink with the anchor tag it will render.
This is using Jquery 1.8.3 and jQuery UI 1.9.2. The pop-up seams to work fine.

first off, don't use "live" command anymore. Thats been deprecated in lieu of the "on" command. Also there is no need to use the $(document).ready within the setLinks function. Since its a standalone function (not self executing) its only put into memory until its called when you call it in the doc.ready function.

Redirect parent window from within Jquery modal UI

I load a Jquery Modal UI with the following code:
// Dialog
$('#avatar-manager').click(function () {
$dialog.dialog('open');
return false;
});
var $dialog = $('<div></div>')
.dialog({
autoOpen: false,
resizeable: false,
modal: true,
title: 'Change your avatar...',
position: 'top',
width: 600,
open: function () {
$(this).load('/components/avatar/avatar.aspx?id=<%=Helpers.CurrentUserId(Session["SessionHash"].ToString())%>&type=user');
}
});
$dialog.parent().appendTo(jQuery("form:first"));
All works well. The avatar.aspx page has the code on an a to complete the process:
$('#go').live('click', function () {
$('#croppanel').hide();
$('#loadingpanel').show();
$.ajax({
type: "POST",
url: "http://<%=Atomic.UI.Helpers.CurrentServer()%>/AtomicService/Assets.asmx/CreateAvatar",
data: "{'avatarPath':'" + file_path + "','type':'user', 'w':'" + $('#<%=w.ClientID%>').val() + "','h':'" + $('#<%=h.ClientID%>').val() + "','x':'" + $('#<%=x.ClientID%>').val() + "','y':'" + $('#<%=y.ClientID%>').val() + "'}",
contentType: "application/json",
dataType: "json",
success: function (msg) {
if (msg["d"].length > 0) {
//done
//$dialog.dialog('close');
var cachekiller = Math.floor(Math.random() * 1000);
>>>>
}
},
error: function (msg) {
alert("Unfortunately, we can't upload that image now. Why not try again?");
$('#loadingpanel').hide();
$('#croppanel').show();
}
});
I would like to redirect or close the modal where the >>>>'s are. How can I do this? I know $(this).dialog can't access the modal because of context, but I'm at a loss how to close from within the window. Remembering this a completely seperate page to where the dialog instantiation is done.
Help, suggestions and questions appreciated :)

Although my question perhaps didn't read that a really simple solution was required, it turned out that all I needed was:
setTimeout(window.location.reload(true), 3000);
Worked a treat :)