We Keep Coding

How to find label text within clicked row of a Gridview using jquery

I'm trying to find the text of a label within row of an asp.net grid view when anywhere on the row is clicked. I have the gridview shown below with the jquery I'm using underneath. I'm getting a javascript alert box when I click on the row, just no text. What am I doing wrong?
<asp:GridView runat="server" ID="grvAgents" AutoGenerateColumns="False" OnRowDataBound="grvAgents_OnRowDataBound"
CssClass="table table-bordered table-striped" AlternatingRowStyle-CssClass="even"
ClientIDMode="Static">
<AlternatingRowStyle CssClass="even" />
<Columns>
<asp:TemplateField HeaderText="Site" Visible="false">
<ItemTemplate>
<asp:Label ID="lblSite" CssClass="siteLbl" runat="server" Text='<%#Eval("Site") %>' ClientIDMode="Static"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<script type="text/javascript">
function BindEvents() {
$(document).ready(function (e) {
$('#grvAgents tr').click(function () {
var tr = $(this).closest('tr');
var lbl = tr.find('.siteLbl').text();
alert(lbl);
//
});
});
}
</script>

I don't see a reason why your code should not work. However you can try the alternative by referencing the label with the id instead of the class name.
$(function ()
{
$('#grvAgents tr').click(function () {
var lbl = $(this).closest('tr').find('span[id*="lblSite"]').text();
alert(lbl);
});
});

Try This
$(function ()
{
$('#grvAgents tr').click(function () {
alert($(this).find('.siteLbl').text());
});
});

Because you set the TemplateField Visible="false",so it cannot be find in the output html.
You can hide the control by css：
STYLE
<style type="text/css">
.hid
{
display:none;
}
</style>
TemplateField
<asp:TemplateField HeaderText="Site" HeaderStyle-CssClass="hid" ItemStyle-CssClass="hid">
Try it again.

Call jquery modal popup from asp.net dropdownlist change

I have a requirement to do some logic execution upon change of dropdownlist value. Before executing the logic i need to take user confirmation and then call service side method to complete the process. Not sure How to call server side method based on modal popup confirmation response from user. So if user confirms with Yes button on the modal popup server side code should be called otherwise do nothing.
Here is the code i have . Server side does not get called upon modal popup confirmation.
function PopupDialog(title, text) {
var div = $('<div>').html('<br>'+text).dialog({
title: title,
modal: true,
height: 190,
width: 320,
buttons: {
"Yes": function () {
$(this).dialog('close');
},
"No": function () {
$(this).dialog('close');
}
}
});
return true;
};
<asp:GridView runat="server" ID="grdTransactions" SkinID="gridviewskin"
AllowSorting="true" AllowPaging="true" PageSize="30" Width="100%"
OnRowDataBound="grdTransactions_RowDataBound"
OnDataBound="grdTransactions_DataBound"
OnSelectedIndexChanged="grdTransactions_SelectedIndexChanged">
.............
<asp:TemplateField Visible="true" HeaderText="Status" >
<ItemTemplate>
<asp:Label runat="server" ID="lblStatus" Visible="False" Text='<%# ShowStatus( Container.DataItem ) %>' />
<asp:DropDownList ID="ddlTransactionList" AutoPostBack="True" OnSelectedIndexChanged="ddlTransactionList_SelectedIndexChanged" onchange="return PopupDialog('Remittance Confirmation','Are you sure you want to update the status?.');" runat="server"></asp:DropDownList>
<br/>
</ItemTemplate>
</asp:TemplateField>
**Server Side Code --**
protected void ddlTransactionList_SelectedIndexChanged(object sender,
EventArgs e)
{
//Your Code
if (OnDataChanged != null)
OnDataChanged(sender, e);
}
Thank you

I think there is a conflict between the javascript created by ASP.NET and the onchange event you are adding to the dropdown (onchange="return .... ") so it is ignoring the the call that posts back.
I would start by trying something like this on the front end:
// remove the autopostback & onchange from the ddl definition
<asp:DropDownList ID="ddlTransactionList" runat="server"></asp:DropDownList>
function PopupDialog(title, text) {
var div = $('<div>').html('<br>'+text).dialog({
title: title,
modal: true,
height: 190,
width: 320,
buttons: {
"Yes": function () {
$(this).dialog('close');
return true;
},
"No": function () {
$(this).dialog('close');
}
}
});
};
$(document).ready(function(){
$("<% ddlTransactionList.CLientID %>").change(function(){
if(PopupDialog('Remittance Confirmation','Are you sure you want to update the status?.')){
__doPostBack('ddlTransactionList')
}
});
});
In the code-behind:
public void Page_Load(object sender, EventArgs e)
{
string parameter = Request["__EVENTARGUMENT"]; // parameter
// Request["__EVENTTARGET"]; // ddlTransactionList
// make your call to ddlTransactionList_SelectedIndexChanged() here
}
Let us know if this helps.

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

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

When checkbox checked get datagrid value using jquery

I have a checkbox template field within a gridview in c#, this field also has a hidden field with the id behind it. I want to use jQuery to raise an event on click of the checkbox to grab a datakey value so I can run a query through jQuery and add the checked item to the database. I have seen examples that get datakeys when an overall button is clicked but I want this to happen on each checkbox clicked within the gridview. I currently get "undefined" when trying to access the id.
C# within the gridview
<ItemTemplate>
<asp:CheckBox ID="CheckBox" CssClass="checkbox" runat="server" />
<asp:HiddenField ID="idnum" runat="server" Value='<%# Eval("id") %>' />
</ItemTemplate>
jQuery
$(document).ready(function () {
var gridResults = document.getElementById('<%= grdResults.ClientID %>');
$("form input:checkbox").click(function (e) {
var id = $(this).next('#idnum').val();
alert(id);
return false;
});
});

If there are multiple fields with ID="idnum" you should probably change that to class="idnum". After adding the class you could get the value using:
var gridResults = $(e.target).next('.idnum').val();
If idnum is just an example which is different for each field, you can just use var id = $('#idnum').val();
EDIT: changed e.target.next('.idnum').val(); to $(e.target).next('.idnum').val(); to convert the element to jQuery object

//This is the script to get datakeyname value on check box check event inside GridView
<script type="text/jscript">
$(document).ready(function () {
var gridResults = document.getElementById('<%= grdCateogry.ClientID %>');
$("form input:checkbox").click(function (e) {
var id = $(this).next($('#IDVal')).val();
alert(id);
return false;
});
});
</script>
//This is the GridView
<asp:GridView ID="grdCateogry" DataKeyNames="CategoryId" runat="server">
<Columns>
<asp:TemplateField HeaderText ="Try" ItemStyle-Width="20px">
<ItemTemplate>
<asp:CheckBox ID="chkSelect" runat="server" />
<asp:HiddenField ID="IDVal" runat="server" Value='<%# Eval("CategoryId") %>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>