We Keep Coding

How can I get value from code behind for a confirm dialog

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>

Get multiline textbox value from jquery dialog

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

Third asp.net button doesn't open a jQuery dialog

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
});
)

Dropdownlist change function doesn't fire in Jquery dialog

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());
});​

Disabling background or all controls on a ASPX page using Jquery

I am using this code to show a dialog box that will confirm for a delete button, it works fine, but when it pops up it doesn't disable any controls of ASP.Net page, so I can click on any of the controls or text boxes,
First thing I wanna do is fade out the page when Jquery opens my Div tag BOX and second to disable all the controls.
here's the code
Div (Custom Dialouge box)
<div id="divConfMessage">
<div align="center">
<br /><asp:Label ID="Label1" runat="server" Text="Deleting this eDecision will remove all site content and uploaded documents. Are you sure you wish to continue?" CssClass="headertext"></asp:Label><br /><br /><br /><br /><br />
<asp:Button ID="btnConfOK" Width="200px" Height="25px" CssClass="gradientbutton" OnClick="btDelete_Click" Runat="server" Text="Yes"></asp:Button>
<asp:Button ID="btnConfCancel" Width="200px" Height="25px" CssClass="gradientbutton" Runat="server" Text="No"></asp:Button><br /><br /><br />
</div>
</div>
Script (jquery)
<script type="text/javascript" src="/_layouts/1033/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("input[id$='btDelete']").click(function()
{
$("#divConfMessage").fadeIn();
});
});
</script>
Button
<td>
<asp:Button ID="btDelete" runat="server" CssClass="gradientbutton" OnClick="btDelete_Click"
OnClientClick="this.disabled=true;this.value='Please Wait...';" Text="Delete" Width="200px" />
</td>
Css for Dialog Box
#divConfMessage
{
position: absolute;
width: 500px;
height: 200px;
top: 50%;
left: 30%;
margin-left: -150px; /* Negative half of width. */
margin-top: -100px; /* Negative half of height. */
border: 2px solid #000;
DISPLAY:none;
background-color:White;
line-height:20px;
text-align:center;
}
Note
All of the code is in ASP content place holder for the page except CSS, I have 2 another Contents with different controls + a Master Page defining all these Content Place holders.
<asp:Content ID="Content4" ContentPlaceHolderID="cphSubmit" runat="server">
<%# Page Language="C#" MasterPageFile="~/my.Master" AutoEventWireup="true" CodeBehind="c.aspx.cs" Inherits="a.b.c" Title="e" meta:resourcekey="PageResource1" %>

set Modal=true; for dilogbox there is modal property, you can set it as True.
try using Jquery dialogue box ( it comes with JqueryUI plugin).
$( "#YourDivorContainerToShowAsDialog" ).dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
EDIt: if you don't want to use buttons, then use like this
$( "#YourDivorContainerToShowAsDialog" ).dialog({
modal: true
});
or if you want to use CSS then you can try
#YourDivorContainerToShowAsDialog
{
position: absolute;
Z-index: withMaxValue
}

Give a higher Z-index for #divConfMessage and then the modal dalog will be on top everything.
When you add a dialog append it to body as this way:
add_block_page();
add_modal_box();
function add_block_page(){
var block_page = $('<div class="page"></div>');
$(block_page).appendTo('body');
}
function add_modal_box(){
var pop_up = $('<div id="divConfMessage"></div>');
$(pop_up).appendTo('.page');
}

Use one transperant image to fadeout the page.
Add one outerDiv and apply the image to the div.
<div id="outerDiv" style="display:none;">
<div id="divConfMessage">
<div align="center">
<br /><asp:Label ID="Label1" runat="server" Text="Deleting this eDecision will remove all site content and uploaded documents. Are you sure you wish to continue?" CssClass="headertext"></asp:Label><br /><br /><br /><br /><br />
<asp:Button ID="btnConfOK" Width="200px" Height="25px" CssClass="gradientbutton" OnClick="btDelete_Click" Runat="server" Text="Yes"></asp:Button>
<asp:Button ID="btnConfCancel" Width="200px" Height="25px" CssClass="gradientbutton" Runat="server" Text="No"></asp:Button><br /><br /><br />
</div>
</div>
</div>
CSS for outerDiv
# outerDiv
{
top:0%;
left:0%;
position:absolute;
background-image:url('../img/FloatingPanel.png');//transperant image
color:White;
z-index: 1102;
Height:100%;
width:100%;
}
Give a higher Z-index for #divConfMessage than the Z-index of outerDiv(ie:1103).
Show the outerDiv onclick of btDelete