Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: ASP.NET jQuery Razor
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.
 
$(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:
 
        $(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.
<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 7:31am
S@53K^S1.7K
Edited 2-Apr-12 4:33am
v2
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

Have you verified that $("#modalDialog") is a valid object?
  Permalink  
Comments
Sastry_kunapuli at 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.
Mark Nischalke at 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
Sastry_kunapuli at 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 ?.
Mark Nischalke at 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
Sastry_kunapuli at 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').
Mark Nischalke at 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.
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 3

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
 
<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.
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

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 )
  Permalink  
v2
Comments
Sastry_kunapuli at 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.
Mark Nischalke at 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)



Advertise | Privacy | Mobile
Web04 | 2.8.150326.1 | Last Updated 2 Apr 2012
Copyright © CodeProject, 1999-2015
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100