Question

我是JQuery的新手，我显示Dialog表单的代码无效。

JFiddle - ＆gt; 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。

请帮忙。

Answer 1

表单中的按钮将提交表单并重新加载页面，因此您需要使用type="button"将按钮更改为输入元素，或者通过将此代码添加到代码中来阻止默认表单提交：< / p>

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

    // the rest of your code here
});

FIDDLE

Answer 2

我在您的方法中添加了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;
    });

JQuery Dialog无法正常工作

2 个答案: