I have a html template that contains a table and rows which looks like this below
02 | <label class="pull-left" data-link="productname<%= elId %>"><%= ProductName %></label> |
03 | <input class="hidden-phone input-large" id="productname<%= elId %>" type-id="Id" type="hidden" /> |
04 | <a id="mobileRef" href="#mobileModal" role="button" class="visible-phone pull-right" data-toggle="modal">Edit...</a> |
06 | <td class="hidden-phone"> |
07 | <label data-link="Rate<%= elId %>"><%= Rate %></label> |
08 | <input id="Rate<%= elId %>" type-id="Rate" class="input-small" value="<%= Rate %>" /> |
10 | <td class="hidden-phone"> |
11 | <label data-link="RateUnit<%= elId %>"><%= RateUnit %></label> |
12 | <select id="unitsSelector<%= elId %>" type-id="RateUnit" class="input-mini" style="width: auto; min-width: 80px;" > |
13 | <option value="<%= RateUnit %>"><%= UnitAbbr %></option> |
16 | <td class="hidden-phone"> |
17 | <label data-link="Cost<%= elId %>"><%= Cost %></label> |
18 | <input id="Cost<%= elId %>" type-id="Cost" class="input-mini" value="<%= Cost %>" /> |
20 | <td class="hidden-phone"> |
21 | <label data-link="TotalProduct<%= elId %>"></label> |
22 | <div id="TotalProduct<%= elId %>" type-id="TotalProduct" class="input-mini">0</div> |
24 | <td class="hidden-phone"> |
25 | <label data-link="TotalCost<%= elId %>"></label> |
26 | <div id="TotalCost<%= elId %>" type-id="TotalCost" class="input-mini">0</div> |
The problem was that when I set focus using Jquery’s focus() like so:
selectAll: function(id)
{
//this works but gets overridden by something else
$(id.currentTarget).focus();
}
So what I had to do was use the focusin() method outlined here: http://api.jquery.com/focusin/
This seems to set the focus to only the input field and ignores any other focusing that is going on, I hope this helps someone.
