0

動的に div 内にページをロードする機能を入力して、システムを増やしています。つまり、ページの中央領域が更新されます。このために、私は JQuery を使用しています。しかし、次のような問題がありますが、同じ FORM を送信するときに、JQuery-Ajax を介して次のページをロードして、この 2 番目のページのデータを使用するために投稿を送信する必要があります。

面白いのは、私が選ばれていないことです。Submit() フォームは、常に 1 つの場合にのみ実行してください。2 つの状況の下に HTML を投稿します。

以下のhtmlコードでは、form.submit()内に作成したwarning testが表示されています。

    <form id="form" accept-charset="utf-8" name="frmPadrao" method="POST" action="HTTP://localhost/fwsibe/index.php/acesso/listarSistemasValidar">
        <br>
        <fieldset id="tabelainfo" style="width: 560px;">
            <legend style="color: #083C06;">
                <b>Dados</b>
            </legend>
            <br>
            <table id="tabelainfo">
                <tbody>
                    <tr>
                        <td>
                            <b>SIBE:* </b>
                        </td>
                        <td>
                            <select name="slSibe">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <br>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <input class="button" type="submit" value="Confirmar" name="btConfirmar">
                        </td>
                    </tr>
                </tbody>
            </table>
        </fieldset>
        <br>
        <br>
    </form>

2 番目のコードの警告。送信 () が表示されない、または送信フォームが認識されない:

    <form id="form" accept-charset="utf-8" name="frmPadrao" method="POST" action="HTTP://localhost/sibe/index.php/almembal/motivoajustealm/pesquisar">
        <br>
        <fieldset id="tabelainfo" style="width: 560px;">
            <legend style="color: #083C06;">
                <b>Filtrar por:</b>
            </legend>
            <br>
            <table id="tabelainfo">
                <tbody>
                    <tr>
                        <td>
                            <b>SubTipo Produto:* </b>
                        </td>
                        <td>
                            <select name="slSubTipo">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <br>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <input class="button" type="submit" value="Confirmar" name="btConfirmar">
                        </td>
                    </tr>
                </tbody>
            </table>
        </fieldset>
        <br>
        <br>
        <div>
            <a title="" onclick="window.open('HTTP://localhost/sibe/index.php/almembal/motivoajustealm/incluir', '_blank', 'width=800,height=600,scrollbars=yes,status=yes,resizable=yes,screenx=0,screeny=0');" href="javascript:void(0);">Incluir</a>
        </div>
        <br>
        <table id="tabelainfo">
            <tbody>
                <tr id="corpotabela">
                    <td align="center">Não existem Motivos de Ajuste cadastrados para esta pesquisa.</td>
                </tr>
            </tbody>
        </table>
    </form>

ページの HEAD で既に適切に初期化されている JQuery スクリプトの下に、さらに、$ (this) として他の enventos に対して既にテストされています。クリックすると、すべて問題ありません。

$(document).ready(function() {
    $("#form").submit(function() {
        alert("SUBMIT FORM");
//        alert($(this));
//        console.log($(this));


//        $.post($(this).attr("action"), $(this).serialize(), function(data) {
//            $("#divCentral").html(data);
//        });

//        return false;

    });
});

原因となっているバグを見つけるのを手伝ってくれませんか。Submit () は JQuery で認識されませんか?

編集:

私はすでに問題の原因を発見しました。コンポーネントが jquery-ajax によってロードされたページに対して描画されると、イベント .submit() が機能しないように見えますが、ページがデフォルトでロードされるとイベントが機能します。

問題は、 が Ajax によってロードされ、JQuery 関数がそれを認識しないことです。ファイルへの ajax リクエストによってテンプレートの中央ページをロードする関数を作成しています。最初はテスト用で、2 つ目は $_POST で動作するように作成しています。今のところJQuery関数はうまくいっています:

function carregaUrl(url) {
    //alert("carregaUrl=" + url);
    $("#divCentral").load(url);
    console.log($('form').attr('name'));



}

    function carregaUrl2(url) {

    var data = $("form").serialize();

    $.ajax({
        type: "POST",
        url: url,
        data: data
    }).done(function(data) {
        $("#divCentral").html(data);
    });

}
4

1 に答える 1

0

ここで何が起こっているかというと、ハンドラーが起動し、アラートを開始し、フォーム送信が発生してページが効果的にリロードされます。

この送信を防止して現在のページにとどまる場合、またはこの送信で移動するページにアラートを追加する場合は、イベント ハンドラーが false を返す必要があります。

現在のページにとどまりたい場合は、これを試してください。

jQuery(function($){

    function formSubmit(form) {
        $.post(form.attr('action'), form.serialize(), function(data){
            $("#some-outer-container-with-form").html(data);
        });
        $("#form").submit(function(){ return formSubmit(form) }); //we need to rebind 
        return false;        
    }

    $("#form").submit(function(){ return formSubmit( $(this) ) });
});
于 2013-07-15T11:27:04.773 に答える