Prince Prince - 25 days ago 19
ASP.NET (C#) Question

Set the value of Textbox in Gridview using Jquery

I have a grid view

grdtest
. I want to update a textbox in the gride using JQuery from a modal dialog that appears on an anchor click. I have added the code but the modal dialog updates all the textboxes in the grid. How can I update only the textbox in the same row as the anchor?

The html code is

<div id="output">
<asp:GridView ID="grdtest" CssClass="grid" Width="20%" AutoGenerateColumns="false" runat="server"
DataKeyNames="ID" OnRowCreated="grdtest_RowCreated" OnRowCommand="grdtest_RowCommand">
<Columns>
<asp:BoundField DataField="ID" Visible="false" />
<asp:BoundField HeaderText="NAME" DataField="NAME" ItemStyle-Width="5%"/>
<asp:TemplateField HeaderText="MONTH" ItemStyle-Width="5%">
<ItemTemplate>
<asp:TextBox ID="txtsubject" runat="server" Wrap="true"></asp:TextBox>
</ItemTemplate></asp:TemplateField>
<asp:TemplateField ItemStyle-Width="2%">
<ItemTemplate><a href="#" >Month</a>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>

<div id="overlay" class="web_dialog_overlay"></div>

<div id="dialog" class="web_dialog">
<table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">
<tr>
<td class="web_dialog_title">Month Chooser</td>
<td class="web_dialog_title align_right">
<a href="#" id="btnClose">Close</a>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="2" style="padding-left: 15px;">
<b>Choose the months from the list </b>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="2" style="padding-left: 15px;">
<div id="months">
<input id="month1" name="month" type="checkbox" value="Jan" />January
<input id="month2" name="month" type="checkbox" value="Feb" />February
<input id="month3" name="month" type="checkbox" value="Mar" />March
<input id="month4" name="month" type="checkbox" value="Apr" />April
<input id="month5" name="month" type="checkbox" value="May" />May
</div>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<input id="btnSubmit" type="button" value="Submit" />
</td>
</tr>
</table>
</div>
</form>
</body>


The js code is

<script type="text/javascript">

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


$('#btnSubmit').click(function(e)
{
var sub = [];
$(':checkbox:checked').each(function(i){
sub[i] = $(this).val();
});
$("#grdtest").find("input[type=text][id*=txtsubject]").val(sub);
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);
}

</script>

Answer

You could add something to your link click method that gives the textbox a specific class that you can later target so you only target one like:

$(".openModalLink").click(function(){
    $(this).parent().parent()
        .find("input[type=text][id*=txtsubject]").addClass("ChangeMe");
    ShowDialog();
}

You should add a class to the <a href="#" class="your class name">Month</a> in your gridview. In my case it would be openModalLink. Then your submit function would look like:

    $('#btnSubmit').click(function(e)
    {
        var sub = [];
        $(':checkbox:checked').each(function(i){
        sub[i] = $(this).val();
        });
        $("#grdtest").find(".ChangeMe").val(sub);
        HideDialog();
        e.preventDefault();
    });

And in your HideDialog remove the specific class from all the textboxes.

function HideDialog()
{
    $("#overlay").hide();
    $("#dialog").fadeOut(300);
    $("#grdtest").find("input[type=text][id*=txtsubject]").removeClass("ChangeMe");
}

Hope this helps and is what you were looking for.

Comments