CODEWITHSUNDEEP
jquerymodal-dialog
user2472245
user2472245

Reputation: 13

JQuery Dialog not working

I am new to JQuery and my code to display Dialog form is not working.

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>

The dialog form is not displaying. I have tried this with IE9, Firefox and Chrome.

Please help.

Upvotes: 1

Views: 121

Answers (2)

user1921
user1921

Reputation:

I added return false; to your method and the dialog shows in Chrome now.

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

Upvotes: 0

adeneo
adeneo

Reputation: 318182

A button inside a form will submit the form and reload the page, so you need to either change the button to an input element with type="button", or prevent the default form submit by adding this to your code:

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

    // the rest of your code here
});

FIDDLE

Upvotes: 1

Related Questions