Second form select vanishes after applying jQuery-UI dialog

Question

I am using jQuery 1.7.2 and jQuery UI 1.8.20. One one of my pages, I have a simple dialog that contains a form:

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

I then register the dialog with the following:

            $('#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() {}
        });
    });

But, when I open the dialog, the second element is missing. I double-checked the HTML being generated buy viewing the source, and the raw HTML file does have the missing select, but when I view it using Chrome's Dev Tool, it is missing from the Elements tag. And, yes, I am looking at the right DIV, as I know jQuery moves the dialog out to the body when you create it.

Why would jQuery remove my form elements?

Answer 1

It seems there was some sort of weirdness going on with the empty selects. As soon as I made the following change

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

​​​​​​​​​​​​​​​​​​​​​​​

It all seemed to work.