0

ある html ファイル (file1.html) が別の html ファイル (file2.html) をロードするコードを書きました。file2.html (フォーム ページ) には、いくつかの小さな php コード (session_start() を呼び出す)、いくつかのフォーム フィールド、および $.ajax() 関数を含むいくつかの jquery JavaScript 関数が含まれており、入力が入力されると、php ファイルが呼び出されます。file1.html が file2.html をロードすると、$.ajax() 関数を除いて、file2.html のすべての jquery JavaScript 関数が適切に実行されます。$.ajax 関数は、file2.html ($.ajax() を使用) をブラウザにロードすると正しく機能します。次に、以下のコードに示すように $.ajax 関数を file2.html から file1.html に移動して問題を解決しようとしましたが、成功しませんでした。

どこが間違っていますか？( http://api.jquery.com/load/で確認し、正しい方向に進むためにこのサイトを見ていましたが、同様の問題は見つかりませんでした。

助けてください。

コード file1.html (file2.html から $.ajax 関数を移動)

<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>
4

1 に答える 1