I have a very basic testing asp.net web application. There is one <asp:Button> that pops a jQuery dialog. In this dialog there is another <asp:Button> that makes a <div> tag visible, and in this <div> tag there is a third <asp:Button>. So far everything is okay.
Now according to my code the third button should pop a second jQuery dialog, but this never happens. Where am I mistaking?
Here is my aspx code:
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>
<asp:Button ID="btn" runat="server" Text="btn" />
<div id="div1">
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<table>
<tr>
<td>
<asp:Button ID="btn1" runat="server" Text="btn1" OnClick="btn1_Click" />
</td>
<td>
<div id="div2" runat="server" visible="false">
<asp:Button ID="btn2" runat="server" Text="btn2" />
</div>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div id="div3" style="display:none">
<h1>test</h1>
</div>
And here is the code for the jQuery:
<script type="text/javascript">
var dialogOpts = {
resizable: false,
bgiframe: true,
autoOpen: false,
width: "710px"
};
$('#div3').dialog(dialogOpts).parent().appendTo($("#form1"));;
$(function () {
$("#div3").dialog({
maxWidth: 1050,
maxHeight: 534,
width: 1050,
height: 534,
resizable: false,
autoOpen: false,
buttons: {
Cancel: function () {
$(this).dialog("close");
}
}
});
$("#btn2").click(function () {
$("#div3").dialog("open");
return false
});
});
</script>
<script type="text/javascript">
var dialogOpts = {
resizable: false,
bgiframe: true,
autoOpen: false,
width: "710px"
};
$('#div1').dialog(dialogOpts).parent().appendTo($("#form1"));;
$(function () {
$("#div1").dialog({
maxWidth: 1050,
maxHeight: 534,
width: 1050,
height: 534,
resizable: false,
autoOpen: false,
buttons: {
Cancel: function () {
$(this).dialog("close");
}
}
});
$("#btn").click(function () {
$("#div1").dialog("open");
return false
});
});
</script>
It is placed in the body and so far only the first jQuery pops up.
And this is my c# function that makes the second <div> tag visible:
protected void btn1_Click(object sender, EventArgs e)
{
div2.Visible = true;
}
visible = false
essentially prevents element from rendering. If you register the onclick event for the unrendered (UNRENDERED, not display:none nor visibility:hidden, your button does not physically reside in the page), the onclick event does not register to anything at all. After you show your button in the update panel, there is nothing to be run on click, because no click handling has been set (the button did not exist in the time of
$("#btn2").click(function () {
$("#div3").dialog("open");
return false
});
)
Related
I have a problem, I'm trying to get a value from code behind for using it in a confirm dialog. but I can't retrieve it, I don't know why.
I'm using a confirm dialog for my creation button (this show a div content):
<script type="text/javascript">
$(function () {
$("[id*=imgBtn_LotCrePL_Crear]").removeAttr("onclick");
$("#dialog2").dialog({
modal: true,
autoOpen: false,
title: "Confirmacion",
width: 350,
height: 220,
buttons: [
{
id: "Yes",
text: "Si",
click: function () {
$("[id*=imgBtn_LotCrePL_Crear]").attr("rel", "Borrar");
$("[id*=imgBtn_LotCrePL_Crear]").click();
}
},
{
id: "No",
text: "No",
click: function () {
$(this).dialog('close');
}
}
]
});
$("[id*=imgBtn_LotCrePL_Crear]").click(function () {
if ($(this).attr("rel") != "Borrar") {
$('#dialog2').dialog('open');
return false;
} else {
__doPostBack(this.name, '');
}
});
});
</script>
What I want is show in this confirm dialog is show to user info what is doing, thats the requirement.
In my code I have (until now just testing):
public string custom = "";
protected void Lotes_Crear_Individual(object sender, EventArgs e)
{
custom = "I want this f****ng value on my dialog";
// button action
}
This is my button, and I need that my div content shows my custom value:
<asp:ImageButton ID="imgBtn_LotCrePL_Crear" runat="server"
ImageUrl="~/images/CajaLlenar.png" OnClick="Lotes_Crear_Individual" />
<div id="dialog2" style="display: none">
Agregar grupo de lotes?
<asp:Label Text='<%#custom %>' runat="server" />
<label for="Name"><%#custom %></label>
<input type="text" id="Name" name="Name" value='<%#custom %>' />
</div>
I was testing in different ways, different controls... but It doesn't works
try using session
protected void Lotes_Crear_Individual(object sender, EventArgs e)
{
Session["custom"] = "I want this f****ng value on my dialog";
// button action
}
and then retrieve here: i changed <%# to <%= because you are just simply try to output a text
<asp:ImageButton ID="imgBtn_LotCrePL_Crear" runat="server"
ImageUrl="~/images/CajaLlenar.png" OnClick="Lotes_Crear_Individual" />
<div id="dialog2" style="display: none">
Agregar grupo de lotes?
<asp:Label Text='<%= Session("custom") %>' runat="server" />
<label for="Name"><%= Session("custom") %></label>
<input type="text" id="Name" name="Name" value='<%= Session("custom") %>' />
</div>
I try to make a popup dialog in my asp net website with form for send message.
I do in asp net user control:
<asp:Panel runat="server" ID="panelMain" ToolTip="" style="display: none">
<asp:Label runat="server" ID="Label1" AssociatedControlID="txtMessage" Text=""></asp:Label>:
<br />
<asp:TextBox runat="server" ID="txtMessage" ></asp:TextBox>
<asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator1"
ControlToValidate="txtMessage" Display="Dynamic"
ErrorMessage=""></asp:RequiredFieldValidator>
<br />
<asp:Button ID="butOk" runat="server" Text="" OnClick="butOk_Click"/>
<asp:Button ID="butCancel" runat="server" Text="" CausesValidation="false" />
</asp:Panel>
<script type="text/javascript">
$(document).ready(function()
{
$(".lbPopupLink").click(function() { //click hyperlink form main page
$("#<%= this.panelMain.ClientID %>").css("display", "block");
$("#<%= this.panelMain.ClientID %>").dialog
({
autoOpen: false,
modal: true,
width: 400,
height: 300,
dialogClass: "popupDialog",
resizable: false,
overlay: { opacity: 0.5, background: "black" },
}).dialog("open");
return false;
});
$("#<%= this.butCancel.ClientID %>").click(function()
{
$("#<%= this.panelMain.ClientID %>").dialog("close");
return false;
});
$("#<%= this.butOk.ClientID %>").click(function()
{
return $("#<%= this.panelMain.ClientID %>").dialogCloseAndSubmit($(this).attr("id"));
});
});
</script>
$.fn.extend({
dialogCloseAndSubmit: function(butOkId)
{
var dlg = $(this).clone();
$(this).dialog("destroy").remove();
dlg.css("display", "none");
$("form:first").append(dlg);
$("#" + butOkId, dlg).click();
return true;
}
});
In code behind:
protected void butOk_Click(object sender, EventArgs e)
{
// will be send mail
Literal str_message = new Literal();
str_message.Mode = LiteralMode.PassThrough;
str_message.Text = "<br />Success!Message: " + this.txtMessage.Text;
this.Page.Controls.Add(str_message);
}
And it's all good when TextBox is one line (Success!Message: hello), but if I change attribute to TextMode="MultiLine" I have no TextBox value (Success!Message:)
How can I solve this problem?
Maybe Try:
$(this).find('textarea[id*=txtMessage]').val();
As discussed in this answer
I have a asp.net web application. In my .aspx page I have a small jQuery dialog with two textboxes for which I am using a datepicker. How can I remove the focus of them when the dialog pops up. I've tried so many solutions posted on the internet and still they continue to be focused, therefore the datepicker shows and hides my whole dialog.
Here is the code I have for popping the dialog:
<script type="text/javascript">
var dialogOpts = {
resizable: false,
bgiframe: true,
maxWidth: 330,
maxHeight: 315,
width: 330,
height: 315,
autoOpen: false
};
$('#borrow_dialog_form').dialog(dialogOpts).parent().appendTo($("#form1"));;
$(function () {
$("#borrow_dialog_form").dialog({
});
$("#Button1").click(function () {
$("#borrow_dialog_form").dialog("open");
return false;
});
});
</script>
And here is the aspx:
<div id="borrow_dialog_form" title="Borrow" style="display: none;">
<asp:Label CssClass="labelStyle" ID="Label10" runat="server" Text="From"></asp:Label>
<asp:TextBox ID="datepicker2" runat="server"></asp:TextBox>
<asp:Label CssClass="labelStyle" ID="Label11" runat="server" Text="To"></asp:Label>
<asp:TextBox ID="datepicker" runat="server"></asp:TextBox>
<br />
<br />
<asp:Button Style="margin-left: 90px;" ID="borrow_item_button" runat="server" Text="Borrow item" OnClick="borrow_item_Click" />
</div>
Can someone please help me with that?
Did you try that?
$("#Button1").click(function () {
$("#borrow_dialog_form").dialog("open");
$("#datepicker").blur();
$("#datepicker2").blur();
return false;
});
or that?
$("#Button1").click(function () {
$("#borrow_dialog_form").dialog("open");
$("#borrow_item_button").focus();
return false;
});
I need to update my second drop down list from database according to the value selected from first drop down list in the Jquery dialog.
ASPX
<asp:UpdatePanel ID="upnl" OnLoad="upnl_Load" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div id="dv" style="display: none;" title="Tile">
<table>
<tr>
<td>Parent</td>
<td>
<asp:DropDownList ID="ddlDialog1" runat="server" /></td>
</tr>
<tr>
<td>Child</td>
<td>
<asp:DropDownList ID="ddlDialog2" runat="server" /></td>
</tr>
</table>
</div >
</ContentTemplate>
</asp:UpdatePanel>
JQuery
function ShowDialog() {
jQuery(document).ready(function () {
$("#dv").dialog({
draggable: true,
modal: true,
width: 500,
height: 400
});
});
}
jQuery(document).ready(function () {
$("#<%= ddlDialog1.ClientID %>").change(function () {
//This doesn't fire
__doPostBack('<%= upnl.ClientID %>', "DialogOnChange");
});
});
Problem here is,
How to change function doesn't fire when I select different values from first drop down list(ddlDialog1).
Any idea?
Since $("#dv").dialog(); make your document changed.
you have to bind $("#<%= ddlDialog1.ClientID %>") after the dialog opened.
$("#dv").dialog({
//...,
open: function(){
//..bind item in this dialog
},
});
This may help you.
$('#ddlDialog1').change(function(){
alert(Selected Value : + $('#ddlDialog1').val());
});
I have the following test ASPX page:
<head runat="server">
<title></title>
<script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.6.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var dlg = $("#dialog").dialog({
bgiframe: true,
autoOpen: false,
height: 300,
modal: true,
buttons: {
'Ok': function() {
__doPostBack('TreeNew', '');
$(this).dialog('close');
},
Cancel: function() {
$(this).dialog('close');
}
},
close: function() {
dlg.parent().appendTo(jQuery('form:first'));
}
});
});
function ShowDialog() {
$('#dialog').dialog('open');
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="TreeNew" runat="server" Text="New"
OnClientClick="ShowDialog();return false;" onclick="TreeNew_Click"/>
<asp:Label ID="Message" runat="server"></asp:Label>
<div id="dialog" title="Select content type">
<p id="validateTips">All form fields are required.</p>
<asp:RadioButtonList ID="ContentTypeList" runat="server">
<asp:ListItem Value="1">Texte</asp:ListItem>
<asp:ListItem Value="2">Image</asp:ListItem>
<asp:ListItem Value="3">Audio</asp:ListItem>
<asp:ListItem Value="4">Video</asp:ListItem>
</asp:RadioButtonList>
</div>
</div>
</form>
</body>
</html>
I use dlg.parent().appendTo(jQuery('form:first')); on close function to retreive the values from RadioButtonList.
It works well but before the page do the PostBack the div "Dialog" moves below the New button. Why?
I think that this is caused because you are calling:
dlg.parent().appendTo(jQuery('form:first'));
at the close callback. This will move the dialog. Why don't you call this immediately after creating the dialog?
try chaning
$(function() {
to
$(document).ready(function() {
also check where it fails with some sort of javascript debugger opera got builtin and FireFox got FireBug..