0

jQuery1.7.2とjQueryUI1.8.20を使用しています。私のページの1つに、フォームを含む簡単なダイアログがあります。

    <div id="dialog-addArtToCompetition" title="Add Art to Competition">
    <form id="addToCompetition" name="addToCompetition"
        action="${competition_new_base}" method="post">
        <fieldset>
            <input type="hidden" name="artPieceId" id="artPieceIdHidden" value="${artPiece.id}" />
            <label for="artCategoryId">Category: </label> 
            <select name="artCategoryId" id="artCategoryIdSelect"
                multiple="false" style="width: 200px; height: 50px;">
            </select> <br />
            <label for="competitionPrice">Price: </label>
            <select name="competitionPrice" id="competitionPriceSelect"
                multiple="false" style="width: 200px; height: 50px;">
            </select>
        </fieldset>
    </form>
</div>

次に、ダイアログを次のように登録します。

            $('#dialog-addArtToCompetition').dialog({
            autoOpen:   false,
            width:      400,
            height:     500,
            modal:      true,
            buttons:    {
                "Add":  function() {
                    $('#addToCompetition').ajaxSubmit({
                        accept:         'application/json',
                        dataType:       'json',
                        //beforeSubmit: showRequest,  // pre-submit callback 
                        success:        function(comp, statusText, xhr, $form) {
                            alert("Art added");
                            $(this).dialog( "close" );
                        },
                        error:          function(xhr, ajaxOptions, thrownError) {
                            alert("Some error occured");
                            $(this).dialog( "close" );
                        },
                        resetForm:      true
                    }); 

                    $(this).dialog( "close" );
                },
                "Cancel":   function() {
                    $(this).dialog( "close" );
                }
            },
            close:      function() {}
        });
    });

しかし、ダイアログを開くと、2番目の要素が欠落しています。ソースを表示して生成されているHTMLを再確認しましたが、生のHTMLファイルには選択がありませんが、Chromeの開発ツールを使用して表示するとElementsタグから欠落しています。そして、はい、私は正しいDIVを見ています。これは、jQueryがダイアログを作成するときに、ダイアログを本文に移動することを知っているからです。

jQueryがフォーム要素を削除するのはなぜですか？

4

1 に答える 1

0

空のselectで何らかの奇妙なことが起こっているようです。次の変更を加えたらすぐに

<div title="Add Art to Competition" id="dialog-addArtToCompetition">
<form method="post" action="/ArtSite/competitions/new" name="addToCompetition" id="addToCompetition">
    <fieldset>
        <input value="" id="artPieceIdHidden" name="artPieceId" type="hidden"/>
        <label for="artCategoryId">Category: </label>
        <select style="width: 200px; height: 50px;" multiple="false" id="artCategoryIdSelect" name="artCategoryId"><!-- empty --></select><br/>
        <label for="competitionPrice">Price: </label>
        <select style="width: 200px; height: 50px;"  multiple="false" id="competitionPriceSelect" name="competitionPrice"><!-- empty --></select>
    </fieldset>
</form>

</ p>

それはすべてうまくいったようだった。

于 2012-08-17T23:45:44.293 に答える