Click here to Skip to main content
15,879,613 members
Please Sign up or sign in to vote.
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
Updated 2-Apr-12 3:33am
v2

Have you verified that $("#modalDialog") is a valid object?
 
Share this answer
 
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').
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.
 
Share this answer
 
$("#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 )
 
Share this answer
 
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

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900