0

js と jquery を使用して小さな webproject のコードを書いています。その中で、ある時点でボタンをクリックすると、ダイアログが作成されます。ダイアログには、名前フィールドといくつかの数値フィールドを含むフォームがあります。ユーザー入力をチェックしてサーバーに送信することになっているほか、ブラウザのリストに名前フィールドを追加することで、親密なユーザーに、もう 1 つの項目が追加されました。2つの奇妙なことが起こっています -

1) フォームを投稿した後、送信ボタン ハンドラーのどこかに dialog('close') を発行しなくても、ダイアログ ボックスは自動的に閉じます。

2) 名前エントリはリストに追加されません。送信後にページ全体が更新されたかのようです。名前のリストの元のデフォルト エントリを使用します。

なぜこれが起こっているのか誰にも考えがありますか? あなたの援助のためにいくつかのコードを投稿します.代わりにAjaxを使用することを提案しないでください. これは、JS の方法に対する私の理解の根本的な欠陥を反映していると思います。他のテクノロジに切り替えるだけでなく、まずそれをクリアしたいと考えています。

    <div id='dialog' title='Define New Matrix'>
<form name='form1' id='form1'  method='post'>
<fieldset>
    <label for="Name">Name</label>
    <input type='text' name='nameofmatrix' id='Name' class='whitepanes'><br>
    <label for="a11">a11</label>
    <input type="text" name='a11' id='a11' class='whitepanes number-field'><br>
    <label for="a22">a22</label>
    <input type="text" name='a22' id='a22' class='whitepanes number-field'><br>
    <button id='submit_button'>Submit</button>
    <button id='cancel_button'>cancel</button>
</fieldset>
</form>
    <p id='tip' style='color:red;'><i>All fields are required</i></p>
</div>
<script>
    //#button_define is a button on whose clicking the dialog opens. 
            $('#button_define').click(function(){
        $('#dialog').dialog('open');
        $('#tip').html("<p style='color:red; font-size:small'>All fields are      mandatory</p>");
    });

    $('#submit_button,#cancel_button').button();

    $('#cancel_button').on('click',function(){
            $('#dialog').dialog('close');
    });

    $('#submit_button').click(function(event){
        event.preventDefault();
        var name=$('input[name=nameofmatrix]').val();
        //Validate is a function which returns a bool if validation proceeds     correctly
        var isCorrect = Validate();
        if(isCorrect){
        //if validated correctly then add to list

            $('#form1').submit();   
            //$('#dialog').dialog('close');
            $('#selectable').append("<li class='ui-widget-content'>",name,"</li>"); 
        } 

    });
</script>
4

2 に答える 2

2

投稿後にページ全体が更新されたかのようです。元のエントリで。

それがまさに起こることです。に属性がないため、どこに POST リクエストを送信しているのかわかりませんが。ただし、によってトリガーされる標準の非 AJAX リクエストは、リクエストをサーバーに送信し、サーバーからのレスポンスをレンダリングします。応答がこの同じページである場合、この同じページが再度レンダリングされます。actionformform

JavaScript は、この新しい応答を読み込むときに、前のページの状態を覚えていません。それらが同じページであっても、サーバーからの 2 つの別個の応答です。そう...

1) フォームを投稿した後、送信ボタン ハンドラーのどこかに dialog('close') を発行しなくても、ダイアログ ボックスは自動的に閉じます。

ダイアログが閉じません。ページが更新されると、まったく新しいページ コンテキストになります。閉じませんでした。このコンテキストではまだ開かれていません。

2) 名前エントリはリストに追加されません。

ページの読み込み時にこれが発生する原因は何もないため、新しいページのコンテキストでは発生しません。サーバー側のコードでは、POST 要求への応答にこのコンテンツを含める必要があります。

これは、JS の方法に対する私の理解の根本的な欠陥を反映していると思います。他のテクノロジに切り替えるだけでなく、まずそれをクリアしたいと考えています。

この誤解には、AJAXがJavaScript の一部であるという事実が含まれています。（「AJAX」の「J」は「JavaScript」の略です。）「他のテクノロジーに切り替える」ことではありません。すでに使用しているテクノロジーの機能を利用しています。AJAX が実際に行うことは、ページ コンテキストを更新せずにサーバーとの間で要求を送信し、応答を受信することだけです。

于 2013-10-06T17:57:22.840 に答える
1

を正しく追加していませんname。連結演算子は ではなく、javascriptcommaの aです。+

$('#selectable').append("<li class='ui-widget-content'>" + name + "</li>");

次に、 を使用してフォームを送信しているため、フォームが更新されます$('#form1').submit();。送信中にページを更新したくない場合は、ajax を使用します。

于 2013-10-06T17:56:58.270 に答える