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