Open a page as dialog window using Jquery

Question

0.00/5 (No votes)

See more:

Hello experts,

Here is what I have
Search.aspx is a web form which has following code

XML

<form id="form1" runat="server">

     <div id="NewTireSearch" align="center">
        <asp:UpdatePanel ID="uplNS" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true" >
         <ContentTemplate>
            <p>
                <select id="Manufacturer" name="Manufacturer" <asp:Literal ID='litManfDis' runat='server' />
                    <option>SELECT MANUFACTURER</option>
                    <asp:Literal ID="litManf" runat="server" />
                </select>
           </p>
           <p>
                <select id="ConCom" name="Consumer-Commercial" <asp:Literal ID='litConcomDis' runat='server' />
                    <option>CONSUMER/COMMERCIAL</option>
                    <asp:Literal ID="litConCom" runat="server" />
                </select>
           </p>
           <p>
                <select id="TireLine" name="Tireline" <asp:Literal ID='litTirelineDis' runat='server' />
                <option>TIRELINE</option>
                <asp:Literal ID="litTireline" runat="server" />
                </select>
            </p>
        </ContentTemplate>
     </asp:UpdatePanel>
</div>
    </form>

I have a button in Page2.ASPX

<input id="btnAddNewSearch" type="button" onclick="showDialog('NewTireSearch');" value="Add New Search"  />

Now I want to write a Jquery on btnAddNewSearch Click in such a away that it should open Search.ASPX page as a dialog window/ pop up window

Here is what I tried with JQuery

C#

$(document).ready();
  function(){
            mfiJ('#NewTireSearch').dialog();
            }
  function showDialog(id) {
  debugger;
            mfiJ('#' + id).dialog("open");
        }
         function closeDialog(id) {
            mfiJ('#' + id).dialog("close");
        }

This is not working. Can anyone help me with this please?

Posted 26-Feb-15 7:38am

sudevsu

Updated 26-Feb-15 8:00am

v2

Add a Solution

Comments

ZurdoDev 26-Feb-15 13:51pm

Please debug it to find out why it is not working.

sudevsu 26-Feb-15 14:00pm

I kept debugger in Jquery also but control doesn't go there. Is it something incorrect way of calling Jquery in button click

Sergey Alexandrovich Kryukov 26-Feb-15 16:52pm

Why? If you are already using jQuery, it's much better to use its UI on-page modal dialogs.
Note that the dialog you want is pop-up, could be blocked by many...
—SA

1 solution

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)

devcode007 · Accepted Answer · 2015-02-26T08:43:00

Solution 1

Assuming Page2.aspx has a button btnAddNewSearch
and NewTireSearch is on different page Search.aspx.
1) Using window.open(Search.aspx.) to open Search.asxp from 'btnAddNewSearch' click.
2)Then use

C#

$(document).ready();
  function(){
            $('#NewTireSearch').dialog();
            }

to open it in a dialogue.

Posted 26-Feb-15 8:43am

devcode007

Comments

devcode007 26-Feb-15 15:33pm

TRY THIS -----. You dont need to have another page. Below is short-quick code of opening jqeury dialogue. You must ensure that you add Jquery references used

<head runat="server">
<title></title>
<link href="Styles/jquery-ui-1.11.2.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<input id="btnAddNewSearch" type="button" />
</form>
<div id="dialog-NewTireSearch" style="display: none; overflow: hidden">
</div>
<script type="text/javascript" src="Scripts/jquery-ui-1.11.2.js"></script>

<script language="javascript" type="text/javascript">

function showDialog() {
$("#dialog-NewTireSearch").html('dialoge');
$("#dialog-NewTireSearch").dialog({
resizable: false,
height: 150,
modal: false,
autoOpen: true,
buttons: {
Close: function () {
$(this).dialog("close");
}
}
});
}

</script>
</body>

sudevsu 26-Feb-15 15:50pm

Well, This is what I tried before stating a thread in here. So it did not work and so I started in new page. Either works for me. I don't. This is what Exactly I did.

devcode007 26-Feb-15 15:59pm

It is working at my side. If you could copy paste above code, is it still not working for you ?

sudevsu 26-Feb-15 16:17pm

Alright so this is what is happened. instead of $ , our webapplciation has some variable used. Meaning $('#dialog-NewTireSearch') is not identifying the ID
mfiJ('#dialog-NewTireSearch') worked. This website was entirely developed only in Literals. Not just ASP control was used. By the time literals were gone from the picture I was a kid so didn't have any clue whats going on with this crappy website.

sudevsu 26-Feb-15 16:22pm

Here comes killer again.
Now that my div tag has select items (dropdowns) How can I load my Drop downs on dialog pop up?

devcode007 26-Feb-15 16:24pm

so i assume it is working for you now.
Regarding popup styling, you need to look at Jquery's dialog API since i dont have any knowledge at top of my head regarding that.

sudevsu 26-Feb-15 16:38pm

But how to load my controls in dialog window. Meaning, I have 'dialog-NewTireSearch' Div with some drop down list, checkboxes, textboxes and a button. How to load/bind these? where should I wrte the code to bind my drop downs

devcode007 26-Feb-15 17:28pm

this should give you the idea.
http://jqueryui.com/dialog/#modal-form

sudevsu 27-Feb-15 8:21am

Thank you