74864

ASP + Jquery focus next textbox from Gridview

Question:

I have a gridview with a table. Inside this table we have a few labels and textboxes.

I am currently trying to switch from textbox to the next one when the user presses enter. For this, I am using Jquery.

$(function () { var inputs = $(".mGrid").find('input:text'); inputs.each(function (index, element) { $(element).on('keyup', function (e) { e.preventDefault(); if (e.which === 13) { // alert("enter pressed"); if (index < inputs.length - 1) { var currentInput = inputs[index]; //currentInput.blur(); $(':text').blur(); var nextInput = inputs[index + 1]; alert($(nextInput)); $(nextInput).focus(); } else { $(inputs[0]).focus(); } } }); }); });

What happens now, is that it doesn't focus the textbox with text inside. also, when textboxes are empty, you need to spam click twice on enter before it does actually swap from textbox.

ASP.net WebForms markup:

<asp:Panel runat="server" ID="pnlProdBOM" align="left" visible="false" onload="pnlProdBOM_Load"> <div id="pnlProdBOMMain"> <div id="pnlProdBOMGrid" style="margin-top:30px;border: 2px solid rgb(200,200,200);border-radius:10px;padding:10px;background-color:rgb(245,245,245);"> <div id="div2" style="float:left;"> <asp:GridView ID="vwProdBOM" runat="server" CaptionAlign="Top" CssClass="mGrid" onrowcreated="vwProdBOM_RowCreated" onrowdatabound="vwProdBOM_RowDataBound" AutoGenerateColumns="False" AllowPaging="True" onpageindexchanging="vwProdBOM_PageIndexChanging"> <Columns> <asp:TemplateField HeaderText="Lotnummers"> <ItemTemplate><asp:CheckBox ID="Lotnummers" runat="server" Enabled=False Checked='<%# Eval("Lotnummers") %>'></asp:CheckBox></ItemTemplate> </asp:TemplateField> <!-- more thingies. remove for SO--> </asp:TemplateField> <asp:TemplateField HeaderText="ScanLotNr"> <ItemTemplate> <asp:TextBox ID="txtScanLotNr" runat="server" BackColor="#D8D8D8" BorderStyle="None"></asp:TextBox> </ItemTemplate> <ItemStyle HorizontalAlign="Right" /> </asp:TemplateField> <asp:TemplateField HeaderText="Gewicht"> <ItemTemplate> <asp:TextBox ID="txtScanAantal" runat="server" BackColor="#D8D8D8" BorderStyle="None" AutoPostBack="False"></asp:TextBox> <asp:RangeValidator ID="ValScanAantal" runat="server" ControlToValidate="txtScanAantal" ErrorMessage="*" MaximumValue="100000" MinimumValue="-100000" Type="Double"></asp:RangeValidator> </ItemTemplate> <ItemStyle HorizontalAlign="Right" /> </asp:TemplateField> </Columns> <PagerSettings Mode="NextPreviousFirstLast" FirstPageImageUrl="~/Nav1.png" LastPageImageUrl="~/Nav4.png" NextPageImageUrl="~/Nav3.png" PreviousPageImageUrl="~/Nav2.png" /> <SelectedRowStyle BackColor="Red" /> </asp:GridView> </div> <div id="div1" style="float:left;margin-left:20px;margin-top:30px;"> <div id="div4"> <asp:Panel ID="pnlLotNr_Fill" runat="server" Width="100px"></asp:Panel>

<a href="https://i.stack.imgur.com/BeUVR.png" rel="nofollow"><img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/BeUVR.png" data-original="https://i.stack.imgur.com/BeUVR.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a>

I made a JSFiddle with the same Jquery and it does work there. I guess there must be something with the Textboxes in ASP?

<a href="https://jsfiddle.net/55j6L92k/2/" rel="nofollow">https://jsfiddle.net/55j6L92k/2/</a>

<strong>EDIT:</strong> It does work with <input type="text" id="txtScanLotNr" style="background-color:#D8D8D8; border-style: none; " />

but not with

<asp:TextBox ID="txtScanLotNr" runat="server" BackColor="#D8D8D8" BorderStyle="None"></asp:TextBox>

Unfortunately I need to use

Answer1:

This should work. Basically you have to find the next <td> first and then the TextBox within it.

<script type="text/javascript"> $('.mGrid input[type=text]').keypress(function (e) { if (e.keyCode == 13) { //eerst de td vinden ipv $(this).next anders werkt het niet $(this).closest('td').next('td').find('input[type=text]').focus(); } else { return; } }); </script>

Tested with this GridView

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" CssClass="mGrid"> <Columns> <asp:TemplateField> <ItemTemplate> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> </ItemTemplate> </asp:TemplateField> <asp:TemplateField> <ItemTemplate> <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> </ItemTemplate> </asp:TemplateField> <asp:TemplateField> <ItemTemplate> <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView>

Recommend

  • Function JavaScript : on Menu CSS HTML
  • Copying rows in a database when rows have children
  • Receive list of elements in their visual order
  • Can't compile Arduino CapSense example
  • How can I add div content to a new page in jspdf?
  • Caret disappears when the background of a textbox is gray in wpf
  • Select inner HTML item in CSS
  • Want to understand iframe breakout code
  • Selectively hide background elements when overlayed with transparent div
  • How to add closing tag for canvas in three js rendered Canvas?
  • Enumerating Controls on a Form
  • cell spacing in div table
  • PayPal API Listener Website Payments Standard URI
  • Cut the background to expose the layer below
  • Why isn't obj.style.left = “200px”; working in this code?
  • Floated image with variable width and heading with background image
  • How to add a focus style to an editable ComboBox in WPF
  • Installed module is empty
  • how to display data from 1st point on words on y axis for line chart in d3.js
  • Custom validator control occupying space even though display set to dynamic
  • How do I alternate colors in Flat List (React Native)
  • Listbox within Listbox and scrolling trouble in Windows Phone 7 Silverlight
  • Change multiple background-images with jQuery
  • Algorithm for a smudge tool?
  • FileReader+canvas image loading problem
  • Repeat a vertical line on every page in Report Builder / SSRS
  • Change JButton Shape while respecting Look And Feel
  • Insert into database using onclick function
  • Deselecting radio buttons while keeping the View Model in synch
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • Can Jackson SerializationFeature be overridden per field or class?
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • Change an a tag attribute in JavaScript based on screen width
  • jquery mobile loadPage not working
  • Unanticipated behavior
  • How to delete a row from a dynamic generate table using jquery?
  • Android Studio and gradle
  • json Serialization in asp
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • How to stop GridView from loading again when I press back button?