jQuery can't use $.ajax on Dynamically loaded content

Question

I was working on a Login Form ( AJAX ) enabled. When a use clicks on link, that Login box, as a floating modal appears. The Content of that Login box is loaded from another page using jQuery's $().load function. On click of the link the Login Box loads. But, when I implemented AJAX submitting on that form:

$(document).ready(function(){
    $("form#loginbox").submit(function(e){ e.preventDefault(); /*AJAX function here*/ });
});

But the form is submitted normally, without following what is given in the function, that is ( Prevent the Default - Submitting and use AJAX ). so does that mean the Loaded content is not considered inside DOM or the script cannot read it? I load the content only once:

$(document).ready(function(){
    if($("#loadedform").html() == "")
    { $(this).load('/load/login.html'); }
    $(".login-modal').slideDown('slow');
});

The structure:

<div class="login-modal"><div id="loadedform"></div></div>

the content to be loaded:

<form id="loginbox" method="post" action="xyz.html">
<!-- INPUT Boxes and Submit Button -->
</form>

Richard Dalton · Accepted Answer · 2012-03-23 10:00:15Z

2

Change

$("form#loginbox").submit(function(e){ 
    e.preventDefault(); 
    /*AJAX function here*/ 
});

to

$('#loadedform').on("submit", "form#loginbox", function(e){ 
    e.preventDefault(); 
    /*AJAX function here*/ 
});

or if you're using a version before 1.7:

$('#loadedform').delegate("#loginbox", "submit", function(e){ 
    e.preventDefault(); 
    /*AJAX function here*/ 
});

This is because the event is registered when the page is loaded, so when your form is loaded it does not have the event attached. This change will register the event at a higher level in the dom so any new content will also work.

It also looks like you should change the code that loads the form to:

if($("#loadedform").html() == "") { 
    $("#loadedform").load('/load/login.html'); 
}
$(".login-modal').slideDown('slow');

Otherwise you won't be loading it into the right place.

edited Mar 23, 2012 at 10:00

answered Mar 23, 2012 at 8:39

Richard Dalton

35.8k6 gold badges75 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

GregL · Accepted Answer · 2012-03-23 08:44:15Z

1

Scripts on a page retrieved using .load() are not run, so your first script that tries to make the form submit via AJAX won't be run.

Instead, move that first script so it runs when .load() completes, using a callback:

$(document).ready(function(){
    if($("#loadedform").html() == "") { 
         $(this).load('/load/login.html', function() {
             $("form#loginbox").submit(function(e){ e.preventDefault(); /*AJAX function here*/ });
         }); 
    }
    $(".login-modal').slideDown('slow');
});

Also, try not to use a bracket style like you have in Javascript:

// some statement that begins a block here
{ doStuff(); }

This is because the Javascript interpreter can insert semi-colons after that first line sometimes, which can break your code.

See the section on Automatic Semicolon Insertion in the Javascript Garden page for more details.

answered Mar 23, 2012 at 8:44

GregL

38.2k8 gold badges65 silver badges68 bronze badges

2 Comments

Abhishek Biswal Over a year ago

Thanks. About your advice ( the block thing ) -> So, what happens when we compress the JavaScript files using a compressor like JSMin?

GregL Over a year ago

@AbhishekBiswal I believe, though I have not confirmed this, that those compressors automatically insert explicit braces ({, }) in your code. Which, it occurs to me, could again cause issues if it incorrectly guesses where they should go.

Starx · Accepted Answer · 2012-03-23 08:37:11Z

0

You have to delegate over the dynamic elements using .on() method

$(document).on("submit","#loginbox", function() {
 e.preventDefault(); 
 /*AJAX function here*/
});

answered Mar 23, 2012 at 8:37

Starx

79.3k50 gold badges187 silver badges266 bronze badges

1 Comment

GregL Over a year ago

It's worth pointing out that using document as the static element you are binding event handlers to is not recommended, as the performance will suffer if you have too many such handlers. This is the main reason why jQuery moved away from .live(), which used exactly that technique. Instead, they recommend binding to a static element much closer to the dynamically added content, to save the event from having to bubble up quite so far. See the Event Performance section on the documentation for .on() for more details.

Gary.S · Accepted Answer · 2012-03-23 08:48:32Z

0

e.preventDefault stops or cancels the current event if it can be cancel, however the submit event will continue to propagate up the DOM and can cause the submit to fire anyway. If you are really replacing the default functionality of the button you can either do both e.preventDefault and e.stopPropagation or you can just return false.

edited Mar 23, 2012 at 8:48

answered Mar 23, 2012 at 8:40

Gary.S

7,1411 gold badge28 silver badges38 bronze badges

Collectives™ on Stack Overflow

jQuery can't use $.ajax on Dynamically loaded content

4 Answers 4

Comments

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related