How to display postback dropdown in jQuery dialog , modal window ? is it possible?

Question

0.00/5 (No votes)

See more:

Hi i tried some examples of jquery dialog and modal window popup...here my problem is when i click on button popup window will display....it contain some dropdown withg postback...when i click dropdown1 then it is not fire the data to dropdown2...how to use cascading dropdown in popup??is it possible in modal window or jquery dialog???can anybody help with example.

Posted 11-Oct-12 17:47pm

ANOOP CL NAIR

Updated 12-Oct-12 1:51am

v7

Add a Solution

Comments

Peeyush Pachaori 12-Oct-12 3:18am

Correct me if i didn't understand properly: You Clicked the button, went to server, got the data, populated the dropdown. Now when you select some option value in dropdown you want another server call?

ANOOP CL NAIR 12-Oct-12 4:47am

i have a button in .aspx page ...when i click on button ..it will open a popup....now i am using modalpopextender...problem in modalpopextender...so i need to try another popup which contain some dropdown list....dropdown1 contain countries, dropdown2 contain state....for example if i select dropdown1 then dropdown2 will only display states of india....

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)

n.podbielski · Answer 1 · 2012-10-12T07:41:00

Solution 1

Problem with jQuery UI dialog in asp.net is that default its adding html to body not form and asp.net require to have all within single form.

So to correct this you have to add one function to options

JavaScript

allOptions.open = function (type, data) {
jQuery(this).parent().appendTo("form:first");
};
jQuery('.class').dialog(allOptions);

this will add dialog to form and all asp.ent events will fire since it does not matter where within form resides control.

Posted 12-Oct-12 7:41am

n.podbielski

Comments

ANOOP CL NAIR 12-Oct-12 13:48pm

thank u for ur replay....can u please give me the full code with postback dropdown example....

n.podbielski 12-Oct-12 17:20pm

Can you paste your code? Maybe we can work something out?

ANOOP CL NAIR 13-Oct-12 0:49am

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script src="javascript/jquery-1.4.3.min.js" type="text/javascript"></script>
<style type="text/css">
.web_dialog_overlay
{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: #000000;
opacity: .15;
filter: alpha(opacity=15);
-moz-opacity: .15;
z-index: 101;
display: none;
}
.web_dialog
{
display: none;
position: fixed;
width: 380px;
height: 200px;
top: 50%;
left: 50%;
margin-left: -190px;
margin-top: -100px;
background-color: #ffffff;
border: 2px solid #336699;
padding: 0px;
z-index: 102;
font-family: Verdana;
font-size: 10pt;
}
.web_dialog_title
{
border-bottom: solid 2px #336699;
background-color: #336699;
padding: 4px;
color: White;
font-weight:bold;
}
.web_dialog_title a
{
color: White;
text-decoration: none;
}
.align_right
{
text-align: right;
}
</style>
<script type="text/javascript">

$(document).ready(function () {
$("#btnShowSimple").click(function (e) {
ShowDialog(false);
e.preventDefault();
});

$("#btnShowModal").click(function (e) {
ShowDialog(true);
e.preventDefault();
});

$("#btnClose").click(function (e) {
HideDialog();
e.preventDefault();
});

$("#btnSubmit").click(function (e) {
var brand = $("#brands input:radio:checked").val();
$("#output").html("Your favorite mobile brand: " + brand);
HideDialog();
e.preventDefault();
});
});

function ShowDialog(modal) {
$("#overlay").show();
$("#dialog").fadeIn(300);

if (modal) {
$("#overlay").unbind("click");
}
else {
$("#overlay").click(function (e) {
HideDialog();
});
}
}

function HideDialog() {
$("#overlay").hide();
$("#dialog").fadeOut(300);
}

allOptions.open = function (type, data) {
jQuery(this).parent().appendTo("form:first");
};
jQuery('.class').dialog(allOptions);

</script>
</head>

n.podbielski 13-Oct-12 2:14am

First: i received 3 notification of comments, but I can see one. Are you sure your code was not shortened as is to long for comment?
Maybe improve your answer with it.

Second: you are not using jQuery UI dialog as I suspected so my solution wont do you any good.
Third: Your server events should work with JS like this. Are you want to do that on server side or client side?