Close the dialog box of Jquery

Question

0.00/5 (No votes)

See more:

Hi
I'm pretty new to using the Jquery and MVC and I'm having pretty tough time to get a dialog box closed on a button click.Here is the scenario in detail.

I have a .cshtml page which I'm displaying in the JQuery dialog box by using the $(

).load(url).dialog("open").The dialog gets successfully displayed.In that page which I'm displaying in the URL,I have 2 buttons to to perform a search or close the dialog and go back to screen.Unfortunately the functionality of the close is not working as expected
Here is the code for loading the dialog.

JavaScript

$(document).ready($(function () {
                $('#searchFacility').button().on("click", function () {
                    //showUrlInDialog('/Home/FacilitySearch');
                    $("#modalSearch").load('/Home/FacilitySearch').dialog({ autoOpen: false, modal: true, close: function (event, ui) {
                        $("#modalSearch").empty().dialog('destroy');
                        alert('Dialog closing');
                    }
                    }).dialog('open');
                    return false;
                });

And here is the code for the Cancel Click:

JavaScript

    $(document).ready($(function () {
        $("#btnCancel").button().on("click", function () {
            alert('hi');
            $("#modalDialog").dialog('close');
        });
    }));

<

The click event is successfully getting executed but the dialog is still persistent and goes away when "esc" key is pressed or "X" on top of the dialog is clicked.

Here is the output generated in the browser.

HTML

<pre lang="xml"><div style="outline-width: 0px; outline-style: initial; outline-color: initial; height: auto; width: 1000px; position: absolute; left: 449px; top: 0px; display: block; z-index: 1001; " class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-resizable" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-modalSearch"><div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span class="ui-dialog-title" id="ui-dialog-title-modalSearch">&nbsp;</span><a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button"><span class="ui-icon ui-icon-closethick">close</span></a></div><div id="modalSearch" style="display: block; width: auto; min-height: 417px; height: auto; " class="ui-dialog-content ui-widget-content" scrolltop="0" scrollleft="0">


        <title>Facility Search</title>
        <link href="/Content/Site.css" rel="stylesheet" type="text/css">
        <link href="/Content/themes/redmond/jquery-ui-1.8.18_Redmond.css" rel="stylesheet" type="text/css">








<h3>Facility Search</h3>
        <div>
            <table class="Facilitytable" width="50%">
                <tbody><tr>
                    <td>
                        <table cellpadding="1px" cellspacing="0">
                            <tbody><tr id="NameAddressLabels">
                                <td id="NameLabel">
                                    Name
                                </td>
                                <td id="AddresslblCell">
                                    Address
                                </td>
                                <td id="CityCell">
                                    City
                                </td>
                                <td id="StateZipCell">
                                    <table width="100%" cellspacing="1px" cellpadding="1px">
                                        <tbody><tr>
                                            <td style="width: 40%">
                                                State
                                            </td>
                                            <td>
                                                Zip
                                            </td>
                                        </tr>
                                    </tbody></table>
                                </td>
                            </tr>
                            <tr id="NameAddressInputs">
                                <td id="NameInputCell">
                                    <input id="Name" name="Name" type="text" value="">
                                </td>
                                <td id="AddressInputCell">
                                    <input id="StreetAddress" name="StreetAddress" style="width:225px" type="text" value="">
                                </td>
                                <td id="CityInputCell">
                                    <input id="City" name="City" style="width:85px" type="text" value="">
                                </td>
                                <td id="StatesZipCell">
                                    <table>
                                        <tbody><tr>
                                            <td id="StateSelectCell">
                                                <select id="State" name="State"><option>AT</option>
<option>BT</option>
<option>CT</option>
<option>DT</option>
<option>ET</option>
</select>
                                            </td>
                                            <td id="ZipEntryCell">
                                                <input id="ZipCode" name="ZipCode" style="width:60px" type="text" value="">
                                            </td>
                                        </tr>
                                    </tbody></table>
                                </td>
                            </tr>
                            <tr id="StartsEndsCounty">
                                <td id="StartsWithEndsWithOptionsCell">
                                    <table>
                                        <tbody><tr>
                                            <td><input id="Contains" name="Contains" type="checkbox" value="true"><input name="Contains" type="hidden" value="false"> Contains
                                            </td>
                                            <td><input id="StartsWith" name="StartsWith" type="checkbox" value="true"><input name="StartsWith" type="hidden" value="false"> Starts With
                                            </td>
                                        </tr>
                                    </tbody></table>
                                </td>
                                <td style="width:35%"></td>
                                <td style="text-align: right" align="right" id="CountyCell">
                                    County :
                                </td>
                                <td id="CountyInput" style="text-align: right">
                                    <input id="County" name="County" style="width:85px" type="text" value="">
                                </td>
                            </tr>
                        </tbody></table>
                        <table>
                            <tbody><tr id="NumericalSearchLabels">                                
                                <td class="alignright" style="width:33%">
                                    <input type="submit" id="btnSearch" value="Search" class="ui-button ui-widget ui-state-default ui-corner-all" role="button" aria-disabled="false">
                                </td>

                            </tr>
                        </tbody></table>
                        <table>

            </table>
                    </td>
                </tr>

            </tbody></table>
        </div>



</div><div class="ui-resizable-handle ui-resizable-n"></div><div class="ui-resizable-handle ui-resizable-e"></div><div class="ui-resizable-handle ui-resizable-s"></div><div class="ui-resizable-handle ui-resizable-w"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se ui-icon-grip-diagonal-se" style="z-index: 1001; "></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 1002; "></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 1003; "></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 1004; "></div><div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"><div class="ui-dialog-buttonset"><button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Ok</span></button></div></div></div>
</pre>

</div>

Posted 30-Mar-12 6:31am

S@53K^S

Updated 2-Apr-12 3:33am

v2

Add a Solution

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Not Active · Answer 1 · 2012-03-30T07:15:00

Solution 1

Have you verified that $("#modalDialog") is a valid object?

Posted 30-Mar-12 7:15am

Not Active

Comments

S@53K^S 2-Apr-12 8:54am

Yes I have verified that $("#modalDialog") is valid object,this way $("#modalDialog").empty() and it worked.When I was discussing with one of team members the same he suggested that I may be using html,head and body elements,which is causing the jQuery to fail,but even after removing those and creating a partial view and using the same it is still useless.

[no name] 2-Apr-12 8:59am

empty() does not tell if the object is valid. It only tells if the element contains children or not. Use a debugger and check $("#modalDialog").length != 0

S@53K^S 2-Apr-12 9:26am

I have checked it using chrome the length is 1 which means it is valid.Do you want me to give a copy of the output of the Div tag that displays the dialog ?.

[no name] 2-Apr-12 9:30am

Is the alert box being displayed when clicking the cancel button.

The On method is not necessary since there is no dynamically created elements

S@53K^S 2-Apr-12 9:35am

Yes,whatever code I have written in the button click event of the button executes without any issues.Except for the .dialog("close") or .dialog('close').

[no name] 2-Apr-12 9:49am

The html output is just useless, unreadable clutter. It was not necessary to add it.

You don't need to call empty() in the close function. Other than that without actually debugging through the project I can't see anything wrong.

S@53K^S · Answer 2 · 2012-04-02T04:12:00

hi Mark and Vino2012,

Thank you for your support in solving this issue.I guess your's,Vino2012 and my team member's help made me achieve the goal.I have given the description of what the problem was.

Step1:
My team member suggested me to use a partialview and put it on the page using @HTML.Partial()

So I have done that and put the page which is being called as URL inside the index.cshtml.This page was placed inside a div tag and I hid the div tag on document.ready().

Step 2:

I have loaded the div into the dialog and displayed the page inside the dialog.On the page I have written the following code in jQuery on the button click

JavaScript

<script type="text/javascript">
    $(document).ready($(function () {
        $("#btnSearch").button().live("click", function() {
            $(document).ready($(function() {
                $("#modalSearch").dialog('close');
            }));
//            alert("Welocme to the dialog box");
        });
    }));
</script>

and it worked.Thanks to vino2012 for suggesting to use $(document).ready to achieve this.

I would not be able to select any single answer as the correct one as it is a mix of suggestion,so please forgive me for not selecting the right answer.

vino2012 · Answer 3 · 2012-03-31T03:48:00

Solution 2

$("#btnCancel").live("click", function () {
                alert('hi');
                $("#modalDialog").dialog('close');               
            });

Can u try like this...

.live ( it will access html element which is build after (dynamic content), $(document).ready or document load )

Posted 31-Mar-12 3:48am

vino2012

Updated 31-Mar-12 3:49am

v2

Comments

S@53K^S 2-Apr-12 8:55am

I guess .live is deprecated in jQuery 1.7.1 and in the documentation,it was suggested to use .on() in place of .live,but let me give it a try once.

[no name] 2-Apr-12 9:01am

There are no dynamically created elements and this still won't work if $("#modalDialog") is not valid