Databases
StackOverflow2013
Postsdbo
POJS knockout for each loop generate new id's
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJS knockout for each loop generate new id's
    text
    copied!<p>I've got a Knockout js foreach loop arount a table which returns multiple users and a search button for each returned user to search on that record. The button and data is drawn as it should but when I click any of the search buttons it only returns the first user. I believe this is because the id for the search button is always the same to need to interact with the DOM to add an each function around? Would this be correct and if so how is this done?</p> <p> </p> <pre><code> &lt;!-- ko foreach: $data --&gt; &lt;table class="table table-striped, table-bordered" id="customer-results-policy"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt; Title &lt;/th&gt; &lt;th&gt; First Name &lt;/th&gt; &lt;th&gt; Surname &lt;/th&gt; &lt;th&gt; Date of birth &lt;/th&gt; &lt;th&gt; Email &lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt; &lt;span data-bind="text: Customer.Title"&gt;&lt;/span&gt; &lt;/td&gt; &lt;td&gt; &lt;span data-bind="text: Customer.Forename"&gt;&lt;/span&gt; &lt;/td&gt; &lt;td&gt; &lt;span data-bind="text: Customer.Surname"&gt;&lt;/span&gt; &lt;/td&gt; &lt;td&gt; &lt;span data-bind="dateString: Customer.DateOfBirth"&gt;&lt;/span&gt; &lt;/td&gt; &lt;td&gt; &lt;div&gt;&lt;input type="text" id="email-search-box-customer" class="span3 search-query" readonly="readonly" data-bind="value: Customer.Email" /&gt; &lt;br/&gt; &lt;button type="submit" data-bind="click: $parent." class="btn btn-primary submit-email-search-customer"&gt;Search for this customer&lt;/button&gt; &lt;/div&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;!-- /ko --&gt; </code></pre> <p>JS</p> <p>$('#page-parent').on('click', '.submit-email-search-customer', function () {</p> <pre><code> $('.submit-email-search-customer').each(function() { }); var email = $('#email-search-box-customer').val(); var dataExists; { dataExists = viewModel.refreshViewByEmail(email); } if (!dataExists) { $('#error-message').html("&lt;strong&gt;The email address wasn't recognised -- please check and try again&lt;/strong&gt;"); $('#error-display').show('slow'); return false; } else { $('#search-results-many').hide(); $('#customer-results-email').show(); $("#search-results").show('slow'); $("#modify-button").show('slow'); $("#customer-modify").show(); $("#account-results").show(); $("#address-results").show(); } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload