CODEWITHSUNDEEP
jquery
Joppo
Joppo

Reputation: 729

jquery .load doesnt execute $ajax function

I wrote some code where one html file (file1.html) loads another html file (file2.html). file2.html (a form page) includes some small php code (calling session_start()), some form fields and some jquery javascript functions including a $.ajax() function which in turn calls a php file when inputs have been entered. When file1.html loads file2.html all jquery javascript functions of file2.html are executed well except the $.ajax() function. The $.ajax function does work correctly when I load file2.html (with $.ajax()) in the browser. Then I tried to solve the problem by moving the $.ajax function from file2.html to file1.html as indicated in the code below, but without success.

Where do I go wrong? (I checked at http://api.jquery.com/load/ and was looking at this site to get me in the right direction but couldn't find a similar issue.

Please your help.

Code file1.html (with $.ajax function moved from file2.html)

<script src="js/jquery-1.10.1.min.js"></script>

</head>
<body>

<script>
$(document).ready(function(){
    $("#myForm").submit(function(){

        $.ajax({
            type: "POST",
            url: "step2_submit2ajx.php",
            data: $("#myForm").serialize(),
            dataType: "json",

            success: function(msg){
                $("#formResponse").removeClass('error');
                $("#formResponse").addClass(msg.statusgeneral);
                $("#formResponse").html(msg.statusgeneral);


            },
            error: function(){
                $("#formResponse").removeClass('success');
                $("#formResponse").addClass('error');
                $("#formResponse").html("There was an error submitting    
 the form. Please try again.");
            }
        });

        //make sure the form doesn't post
        return false;

    }); //.ajax

});

</script>

<script>
$(document).ready(function(){
    $("#section1").load("file2.html");


});
$('#page1').show();
$('#page2').hide();
</script>

<div id="page1">
page 1
<div id="section1">

</div>
<button onclick="toPage2();" type="button">< to Page 2</button>
</div>

<div id="page2" style="display:none;">
page 2
<div id="section2">

</div>
<button onclick="backPage1();" type="button">< Back to Page 1</button>
</div>


<script>
function toPage2() {  
    $('#page2').show();
    $('#page1').hide();
}

function backPage1() {  
$('#page2').hide();
$('#page1').show();
}
</script>
</body>
</html>

Upvotes: 0

Views: 407

Answers (1)

EPB
EPB

Reputation: 4029

based on your submitted code, you have a syntax error.

$("#formResponse").html("There was an error submitting    
  the form. Please try again.");

Should be on one line or broken up like this:

$("#formResponse").html("There was an error submitting" +
" the form. Please try again.");

This prevents your submit event callback from binding. [Edit: Because the JavaScript engine can't run your included code block]

Since it's not a syntax error... If you are loading file2.html which contains your form, but that bind to submit is in your file1.html, your form does not yet exist to be binded to. Wait until file2.html is loaded before attempting to use jQuery('#myForm').submit either with a timed wait in file1 or just including the script tag with your .ajax handler in file2.html

Matt Whipple reminded me... you could also do it like this:

<script>
$(document).ready(function(){
    $("#section1").load("file2.html", function(){
    $("#myForm").submit(function(){

        $.ajax({
            type: "POST",
            url: "step2_submit2ajx.php",
            data: $("#myForm").serialize(),
            dataType: "json",

            success: function(msg){
                $("#formResponse").removeClass('error');
                $("#formResponse").addClass(msg.statusgeneral);
                $("#formResponse").html(msg.statusgeneral);


            },
            error: function(){
                $("#formResponse").removeClass('success');
                $("#formResponse").addClass('error');
                $("#formResponse").html("There was an error submitting the form. Please try again.");
            }
        });

        //make sure the form doesn't post
        return false;

    }); //.ajax
   }); //end anonymous success
});
</script>

Here you have your submit callback binded once the form is successfully loaded into the page.

Upvotes: 0

Related Questions