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>

Call jQuery function from Gridview link button

In my application I have a jQuery function, and I want to call this function from a gridview link button. I tried this code shown here, but the function is not called:
<script type="text/javascript">
$(function () {
var JavascriptBlah = '<%=msUntilFour%>'
var fileName = '<%=msUntilFour%>';
$('input[id$="lnkCustomer"]').click(function () {
$("#dialog").dialog({
modal: true,
title: fileName,
width: 600,
height: 600,
buttons: {
Close: function () {
$(this).dialog('close');
}
},
open: function () {
var object = "<object data=\"{FileName}\" type=\"application/pdf\" width=\"700px\" height=\"700px\">";
object += "If you are unable to view file, you can download from here";
object += "</object>";
object = object.replace(/{FileName}/g, "Doc/Demo.pdf");
$("#dialog").html(object);
}
});
});
});
</script>
Aspx markup:
<asp:GridView ID="gridView1" runat="server" CssClass="mydatagrid"
HeaderStyle-CssClass="header" RowStyle-CssClass="rows"
AutoGenerateColumns="false"
PageSize="10" EmptyDataText="No Records Available">
<HeaderStyle CssClass="header"></HeaderStyle>
<PagerStyle ForeColor="Red" HorizontalAlign="Center"></PagerStyle>
<Columns>
<asp:BoundField DataField="Id" HeaderText="Id" />
<asp:BoundField DataField="Name" HeaderText="Name" />
<asp:TemplateField HeaderText="CustomerID">
<ItemTemplate>
<asp:LinkButton runat="server" ID="lnkCustomer" Text='<%#Eval("Name") %>'>
</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<RowStyle CssClass="rows"></RowStyle>
</asp:GridView>
</div>
<div id="dialog" style="display: none">
How can I call the jQuery function from the gridview link button?
Thanks in advance.

Don't call function by its id as it generate multiple ids for each row.
You can achieve this by javascript simply attach a client side event onclick='myTestFun();' to LinkButton.

First you can declare function in script section and then add in OnClientClick property of LinkButton.
ASPX Code
<asp:LinkButton runat="server" ID="lnkCustomer" Text='<%#Eval("Name") %>'
OnClientClick="OpenModel();" > </asp:LinkButton>
JS Code
$(document).ready(function(){
OpenModel();
});
function OpenModel() {
$("#dialog").dialog({
modal: true,
title: fileName,
width: 600,
height: 600,
buttons: {
Close: function () {
$(this).dialog('close');
}
},
open: function () {
var object = "<object data=\"{FileName}\" type=\"application/pdf\" width=\"700px\" height=\"700px\">";
object += "If you are unable to view file, you can download from here";
object += "</object>";
object = object.replace(/{FileName}/g, "Doc/Demo.pdf");
$("#dialog").html(object);
}
});
});

ASP.NET textbox doesn't lose focus

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

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

Can't get modified value from textbox in gridview

I'm trying to get gridview data using jquery. I have modified existing data on textbox and try to get that value using jquery. but it gave old value in textbox. not modified value in textbox.
ASPX Code
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
/*javascripts and stylesheets are here*/
<script type="text/javascript">
function Navigate() {
$('#dialogDiv').dialog('open');
}
$(document).ready(function () {
var list = "";
$('#dialogDiv').dialog({
autoOpen: false,
resizable: true,
width: 300,
height: 'auto',
buttons: {
"Save": function () {
$("#<%=Type_GV.ClientID %> tr").each(function () {
//Skip first(header) row
if (!this.rowIndex) return;
var type = $(this).find("td:last").html();
list += type + "</br>";
});
alert(list)
}
}
});
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>
<div id="dialogDiv" title="Type" style="overflow: hidden">
<div id="TypeDiv" class="divTable">
<div class="divRow">
<div class="divColumn">
<div>
<asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="open" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:GridView ID="Type_GV" runat="server" ShowFooter="True" AutoGenerateColumns="False">
<Columns>
<asp:TemplateField HeaderText="Type">
<ItemTemplate>
<asp:TextBox ID="txtType" runat="server" Text='<%# Bind("Type") %>'></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</div>
</div>
</div>
<asp:Button ID="open" runat="server" Text="Open dialog" OnClientClick="Navigate()"
OnClick="open_Clicked" />
<br />
<p>
<asp:Button ID="btnSaveType" runat="server" OnClick="btnSaveType_Clicked" Style="visibility: hidden;
display: none;" />
</p>
</asp:Content>
Code behind
protected void Page_Load(object sender, EventArgs e)
{
}
protected void open_Clicked(object sender, EventArgs e)
{
VehicleType vTypeObject = new VehicleType();
Type_GV.DataSource = vTypeObject.GetTypeList();
Type_GV.DataBind();
}
protected void btnSaveType_Clicked(object sender, EventArgs e)
{
foreach (GridViewRow gvr in Type_GV.Rows)
{
TextBox type = (TextBox)gvr.FindControl("txtType");
Debug.WriteLine("type : " + type.Text);
}
}
public class VehicleType
{
public string Type { get; set; }
public List<VehicleType> GetTypeList()
{
List<VehicleType> list = new List<VehicleType>()
{
new VehicleType{Type="Type1"},
new VehicleType{Type="Type2"}
};
return list;
}
}
How can i solve this ?

You may use this:
As you are using the update panels, this.remove_endRequest() is raised after an asynchronous postback is finished and control has been returned to the browser.
Not sure but i think this the issue, i faced these kind of issues many times. Might be helpful to you.
See Documentation
Sys.WebForms.PageRequestManager.getInstance().remove_endRequest($(function(){
var list = "";
$('#dialogDiv').dialog({
autoOpen: false,
resizable: true,
width: 300,
height: 'auto',
buttons: {
"Save": function () {
$("#<%=Type_GV.ClientID %> tr").each(function () {
//Skip first(header) row
if (!this.rowIndex) return;
var type = $(this).find("td:last").html();
list += type + "</br>";
});
alert(list)
}
}
});
});)
Note: Don't remove $(document).ready(function{})) keep it as it is, and include this one.