how to set value for asp Textbox inside jquery modal by row in gridview
Question
I have a problem regarding textbox(tb) inside jquery modal, inside the gridview. Basically, the problem is that the value of the tb same as I click the modal from other row in gridview even I put "tr" to set the row. The key are 'id_rN' and 'rN'. The situation is:
- Click modal link for row 1 in gridview
- Insert data in tb in modal (eg: hello)
- Close modal
- Click modal link for row 2 in gridview and the value is same as row 1
I will show the picture of it:
Click "Add/Edit" at 'Remarks' column to show modal pop
Modal Textbox row1 show 'hello'
You can see that modal tb get same value both row1 and row2.
This is the script:
$('a[data-toggle=modal]').click(function () {
var data_pN = String($(".pN", $(this).closest("tr")).html());
var data_cN = String($(".cN", $(this).closest("tr")).html());
var data_aN = String($(".aN", $(this).closest("tr")).html());
var data_rN = $('#<%=GridView1.ClientID %>').find('[id*="id_rN"]', $(this).closest("tr")).val(); //variable for textbox in modal
$('input[id*="id_pN"]').val(data_pN);
$('input[id*="id_cN"]').val(data_cN);
$('input[id*="id_aN"]').val(data_aN);
$('[id*="rN"]', $(this).closest("tr")).val(data_rN); //get value from texbox modal to textbox for column 'Remarktest'
});
This is the gridview html:
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnRowDeleting="GridView1_RowDeleting"
CssClass="table table-hover table-striped" GridLines="None" RowStyle-BackColor="#5AC3DE"
AlternatingRowStyle-BackColor="#1ac6ff" Font-Size="Smaller">
<Columns>
<asp:BoundField DataField="Project No." HeaderText="Project No." ItemStyle-CssClass="pN" />
<asp:BoundField DataField="Ctr No." HeaderText="Ctr No." ItemStyle-CssClass="cN" />
<asp:BoundField DataField="Activity" HeaderText="Activity" ItemStyle-CssClass="aN" />
<asp:TemplateField HeaderText="ad" >
<ItemTemplate>
<asp:TextBox ID="rN" runat="server"></asp:TextBox></ItemTemplate>
</asp:TemplateField>
<%--<asp:BoundField DataField="Remark" HeaderText="Remark" ItemStyle-CssClass="rN" Visible="false"/>--%>
<asp:TemplateField HeaderText="Remarks">
<ItemTemplate>
<!-- Link trigger modal -->
<a data-toggle="modal" href="#myModal" id="modalLink">Add/Edit</a>
<%--<asp:TextBox ID="rN" runat="server"></asp:TextBox>--%>
<!-- Modal tabindex="-1" role="dialog" div class="modal-dialog modal-lg" role="document"-->
<div class="modal container fade" id="myModal" aria-labelledby="myModalLabel" style="width: 60%;
margin-bottom: 20%">
<%--<div class="modal-dialog modal-lg">--%>
<%--<div class="modal-content">--%>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h3 class="modal-title" id="myModalLabel">
Details</h3>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-2">
<div class="form-group">
<h4>
Project No.</h4>
<asp:TextBox ID="id_pN" runat="server" CssClass="form-control" ReadOnly="true" Font-Size="Smaller"></asp:TextBox>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<h4>
Ctr No.</h4>
<asp:TextBox ID="id_cN" runat="server" CssClass=" form-control" ReadOnly="true" Font-Size="Smaller"></asp:TextBox>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<h4>
Activity</h4>
<asp:TextBox ID="id_aN" runat="server" CssClass=" form-control" ReadOnly="true" Font-Size="Smaller"></asp:TextBox>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<h4>
Remark</h4>
<asp:TextBox ID="id_rN" runat="server" CssClass="form-control" TextMode="MultiLine" Rows="4"
Font-Size="Small"></asp:TextBox>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-sm btn-default" data-dismiss="modal" >
Close</button>
</div>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Actual" HeaderText="Actual To End of Week" />
<asp:TemplateField HeaderText="Sat st">
<ItemTemplate>
<asp:TextBox ID="tb_nt_sat" runat="server" CssClass="tb_day"></asp:TextBox></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Sat ot">
<ItemTemplate>
<asp:TextBox ID="tb_ot_sat" runat="server" CssClass="tb_day" ReadOnly="true"></asp:TextBox></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Sun st">
<ItemTemplate>
<asp:TextBox ID="tb_nt_sun" runat="server" CssClass="tb_day" ReadOnly="true"></asp:TextBox></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Sun ot">
<ItemTemplate>
<asp:TextBox ID="tb_ot_sun" runat="server" CssClass="tb_day" ReadOnly="true"></asp:TextBox></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Mon st">
<ItemTemplate>
<asp:TextBox ID="tb_nt_mon" runat="server" CssClass="tb_day"></asp:TextBox></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Mon ot">
<ItemTemplate>
<asp:TextBox ID="tb_ot_mon" runat="server" CssClass="tb_day" ReadOnly="true"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Tue st">
<ItemTemplate>
<asp:TextBox ID="tb_nt_tue" runat="server" CssClass="tb_day"></asp:TextBox></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Tue ot">
<ItemTemplate>
<asp:TextBox ID="tb_ot_tue" runat="server" CssClass="tb_day" ReadOnly="true"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Wed st">
<ItemTemplate>
<asp:TextBox ID="tb_nt_wed" runat="server" CssClass="tb_day"></asp:TextBox></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Wed ot">
<ItemTemplate>
<asp:TextBox ID="tb_ot_wed" runat="server" CssClass="tb_day" ReadOnly="true"></asp:TextBox></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Thu st">
<ItemTemplate>
<asp:TextBox ID="tb_nt_thu" runat="server" CssClass="tb_day"></asp:TextBox></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Thu ot">
<ItemTemplate>
<asp:TextBox ID="tb_ot_thu" runat="server" CssClass="tb_day" ReadOnly="true"></asp:TextBox></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Fri st">
<ItemTemplate>
<asp:TextBox ID="tb_nt_fri" runat="server" CssClass="tb_day"></asp:TextBox></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Fri ot">
<ItemTemplate>
<asp:TextBox ID="tb_ot_fri" runat="server" CssClass="tb_day" ReadOnly="true"></asp:TextBox></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="hourtest">
<ItemTemplate>
<asp:TextBox ID="hTest" runat="server" CssClass="tb_day" ReadOnly="true"></asp:TextBox></ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Week" HeaderText="Weekly Total" />
<asp:BoundField DataField="Remain" HeaderText="Remaining hour" />
<asp:CommandField ShowEditButton="True" ButtonType="Button" />
<asp:CommandField ShowDeleteButton="True" ButtonType="Button" />
</Columns>
</asp:GridView>
Glad anyone can help me. :)
1 answers
solution1
0 2015-12-15 10:08:03
Try something like this
HTML MARKUP: Add a class toyour textbox:
<asp:TextBox ID="id_pN" runat="server" CssClass="cls_pN form-control" ReadOnly="true" Font-Size="Smaller"></asp:TextBox>
<asp:TextBox ID="id_cN" runat="server" CssClass="cls_cN form-control" ReadOnly="true" Font-Size="Smaller"></asp:TextBox>
JQUERY:
$('a[data-toggle=modal]').click(function () {
var self=$(this);
var selfTR=self.closest('tr');
// get current row textbox value
var txt_p=selfTR.find(".cls_pN").val();
var txt_c=selfTR.find(".cls_cN").val();
alert(txt_p);
alert(txt_c);
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Set Value Textbox Inside GridView Using Javascript
Get Textbox value inside Gridview using JQuery
How to get value of textbox inside of gridview
Jquery each function not execute inside gridview textbox in asp.net
How to get the particular cell value from a gridview and to display it in a textbox using jquery in asp.net?
Getting textbox value inside gridview using JQuery, val() not working
How to set textbox value in jQuery?
Asp.Net Pass value to Modal TextBox from GridView on button click
How to get the Textbox's ID inside a Gridview using JQuery?
How to get asp.net gridview entire cell values inside html textbox onchange=“return Calculations(this);” jQuery function
Related Tags