1

私は JQuery を初めて使用し、ダイアログ フォームを表示するコードが機能していません。

JFiddle - > http://jsfiddle.net/MzA4q/9/

<body>
    <div id="dialog-form" title="Add New Reference Status">
        <p class="validateTips">Enter Reference Status not found in the list box.</p>
        <form>
            <fieldset>
                <label for="refStatus">Reference Status</label>
                <input type="text" name="refStatus" id="refStatus" class="text ui-widget-content ui-corner-all" />
            </fieldset>
        </form>
    </div>
    <div>
        <form id="mySubmitForm">
            <table>
                <tr>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                </tr>
            </table>
            <div id="referenceStatus-contain" class="ui-widget">
                 <h1>Existing Reference Statuses:</h1>

                <table id="data-table">
                    <tbody>
                        <tr>
                            <td>
                                <select id="ReferenceStausBean_1_TransStatus" class="ui-widget ui-widget-content">
                                    <option value="X">PQR</option>
                                </select>
                            </td>
                            <td>
                                <select id="ReferenceStausBean_1_ReferenceStatus" class="ui-widget ui-widget-content">
                                    <option value="X">X</option>
                                </select>&nbsp;&nbsp;
                                <button class="add-RefStatus">Add Non-Existing Reference Status</button>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <select id="ReferenceStausBean_2_TransStatus" class="ui-widget ui-widget-content">
                                    <option value="X">PQR</option>
                                </select>
                            </td>
                            <td>
                                <select id="ReferenceStausBean_2_ReferenceStatus" class="ui-widget ui-widget-content">
                                    <option value="X">X</option>
                                </select>&nbsp;&nbsp;
                                <button class="add-RefStatus">Add Non-Existing Reference Status</button>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <select id="ReferenceStausBean_3_TransStatus" class="ui-widget ui-widget-content">
                                    <option value="X">PQR</option>
                                </select>
                            </td>
                            <td>
                                <select id="ReferenceStausBean_3_ReferenceStatus" class="ui-widget ui-widget-content">
                                    <option value="X">X</option>
                                </select>&nbsp;&nbsp;
                                <button class="add-RefStatus">Add Non-Existing Reference Status</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </form>
    </div>
</body>

ダイアログフォームが表示されません。IE9、Firefox、およびChromeでこれを試しました。

助けてください。

4

2 に答える 2

1

フォーム内のボタンはフォームを送信し、ページをリロードします。そのため、ボタンを で入力要素に変更するか、type="button"これをコードに追加してデフォルトのフォーム送信を防止する必要があります。

$('.add-RefStatus').button().on('click', function(e) {
    e.preventDefault();

    // the rest of your code here
});

フィドル

于 2013-06-10T19:52:27.320 に答える
0

メソッドに追加return false;すると、ダイアログが Chrome に表示されます。

$('.add-RefStatus')
        .button()
        .click(function () {

        var nearbySelectIDLocal = $(this).parent().find('select').attr('id');
        if (nearbySelectIDLocal.search(/ReferenceStatus$/) != -1) {
            nearbySelectID = nearbySelectIDLocal;
        }
        var x = $(this).offset().left;
        var y = $(this).offset().top;
        x += 100; // or whatever size of your button
        // $( "#dialog-form" ).dialog( "open" );
        $("#dialog-form").dialog('open').dialog('option', 'position', [x, y]);
        updateTips("Enter Reference Status not found in the list box.");
        return false;
    });
于 2013-06-10T19:53:10.603 に答える