CODEWITHSUNDEEP
javascriptjqueryhtmlajax
Thomas
Thomas

Reputation: 5099

Script loaded through .load() fails

Im loading a contact page using .load() which contains a script that looks like this: 

<script type="text/javascript">

    $('#submit').click(function(e){
        e.preventDefault();
        var name = $('#name').val();
        var email = $('#email').val();
        var message = $('#message').val();
        $.post("<?php echo bloginfo( 'template_directory' ) . '/inc/mailit.php';?>", 
            {
                name: name,
                email: email,
                message: message
            },
            function(data) {
                var n = data.indexOf('<span class="success_message">');
                if (n !== 0) {
                    $('#message_box_1').empty().append(data);
                } else {
                    $('#contact_form').empty().append(data);
                }
            }
        );
    });
</script>

The script works fine when I load the contact page directly (i.e. go to http://example.com/contact-us) but it doesn't when I load the form and script into the dom using .load(). When I click #submit, the form submits without running the script. Any ideas what is going on?

Oh and the load script looks like this: 

<script>
$('#top_links a').click(function (e) {
    e.preventDefault();
    var link = $(this).attr('href');
    $('#content').empty();

    $('#content').load(link + ' #content > *');


});
</script>

UPDATE:

Thanks to @pointy for pointing out the problems with .load(). So now I have modified my code to use $.get :

<script>
$('#top_links a').click(function (e) {
    e.preventDefault();
    var link = $(this).attr('href');
    $('#content').empty();


    $.get(link, { }, 
        function(data) {
            $('#content').replaceWith($(data).find("#content"));
        }
    )
});
</script>

The problem is the same, the AJAX Script above still doesn't prevent the form from submitting or send a post request when the user clicks the submit button. I have placed both scripts outside of the content that is being loaded with $.get

Upvotes: 1

Views: 128

Answers (2)

Thomas
Thomas

Reputation: 5099

The problem was that the submit button was dynamically loaded content and I needed to use live(). $("#submit").live("click", function(e){})

Upvotes: 0

Pointy
Pointy

Reputation: 413996

When you load with .load() and use a selector after the URL like you're doing, jQuery simply does not run any scripts in the loaded content. It explicitly strips them out and throws them away.

I think the main reason it does this is that, since it's throwing away some portion of the page that's been loaded, it has no idea whether the embedded scripts that are inside the selected content will work without other JavaScript on the page that's not selected.

edit — unfortunately your substitute code will suffer from the same problem. The issue is that $(data) involves converting the returned page HTML into a document fragment. That, internal to jQuery, will go through a function called "clean" that strips out the scripts. It does save them, but they're thrown away by the time that the $(data) function call returns.

It's probably going to be a lot smoother if you can figure out a way for your server to do the work of figuring out that it doesn't have to return a complete page. It'll make things faster anyway; there's no point shipping a complete page when you're going to only use a portion of it.

Upvotes: 2

Related Questions