Assign Jquery tokeninput for a dynamically created table row

Question

Edited

Table Template

<table id="Newdiagnosis" style="display:none">
<tr>
 <td><input class="diag" style="width:200px" type="text" name="provider_diagnosis_dtls[#].diagnosis_code" value /></td>
<td><input style="width:500px" type="text" name="provider_diagnosis_dtls[#].diagnosis_desc" value /></td>
<td>
<input type="text" name="provider_diagnosis_dtls[#].diagnosis_level)" readonly value />
<input type="hidden" name="diagnosis.Index" value="%" />
</td>
</tr>
 </table>

Jquery for adding row dynamically

    $(document).ready(function () {
     $("#N").click(function () {
     var index = (new Date()).getTime();
     var clone = $('#Newdiagnosis').clone();
     clone.html($(clone).html().replace(/\[#\]/g, '[' + index + ']'));
    clone.html($(clone).html().replace(/"%"/g, '"' + index + '"'));
     $("#diagnosis").append(clone.html());
     });
 });

I need to attach Jquery tokeniput for each textbox created dynamically. Is it possible?

I tried the below code in Jquery

$("#N").click(function () {
    var index = (new Date()).getTime();
    var clone = $('#Newdiagnosis').clone();
    clone.html($(clone).html().replace(/\[#\]/g, '[' + index + ']'));
    clone.html($(clone).html().replace(/"%"/g, '"' + index + '"'));
    clone.find(".diag").tokenInput("@Url.Action("SearchDiagnosis", "Preapproval")", {
         theme: 'facebook',
         preventDuplicates: true,
         searchingText: 'Searching...',
         tokenLimit: 1
    });
    $("#diagnosis").append(clone.html());
});

This is not searching the data from the action given in url, but the same is working for non-dynamic textbox

You need to attach the plugins to the new elements. What is the purpose of adding the `id` attributes? And how would this post back (you have duplicate name elements)? — , Apr 19 '15 at 07:50
Hi Stephen,thanks for the reply. I won't have a duplicate name element because a unique id is assigning at the end of the element. Post back i need to look into it. Any other easy way which this can be achieved. I am new to MVC — Sachu, Apr 19 '15 at 08:07
You **DO** have duplicate name elements! There is no way this will post back correctly. The `id` attribute is irrelevant and you should be using `new { id = "" }` so you remove the id attribute to avoid invalid html. I suggest you look at the answers [here](http://stackoverflow.com/questions/29161481/post-a-form-array-without-successful/29161796#29161796) and [here](http://stackoverflow.com/questions/28019793/submit-same-partial-view-called-multiple-times-data-to-controller/28081308#28081308) to understand how to dynamically generate collection items — , Apr 19 '15 at 08:10
attaching jquery inputtoken for dynamically created texboxes is possible? — Sachu, Apr 20 '15 at 08:38
Sure, just give the element a class name, then in the `$("#N").click(function ()` - `clone.find('.theClassName').tokenInput(....);` — , Apr 20 '15 at 09:54
Dear Stephen, I tried this in dynamic created rows but autosearch is not working, the same is working for non dynamic text boxed. — Sachu, Apr 20 '15 at 10:31
Also i had written a Onchange event for the class '.diag' it was working for static textbox but the same is failing for the dynamic one created through button. Any idea — Sachu, Apr 20 '15 at 10:35
For the `.change()` event, you need event delegation - so assuming you want to handle the change event of elements with `class="diag"` then `$("#diagnosis").on('change', '.diag', function() { // do something });` — , Apr 20 '15 at 10:41
Dear Stephen, thanks for the valuable comment. i will try and post the result but the jquery inputtoken is not working as the way i posted in the edited code. anything I am missing in that? — Sachu, Apr 20 '15 at 10:47
Sorry should have explained better - you need to add the element to the DOM first - `$("#diagnosis").append(clone.html());`, then `clone.find(".diag").tokenInput(...);` — , Apr 20 '15 at 10:50
Sorry if we are adding the token input after append the theme itself is not applying to the class but we are applying token input (like you mentioned first) as in the edited code the theme is getting applied but searching is not happening. — Sachu, Apr 20 '15 at 10:58
I take that back - since your appending `clone.html()` you would probably need something like `var html = clone.html(); $("#diagnosis").append(html); html.find(".diag").tokenInput(...);` — , Apr 20 '15 at 11:02
Dear Stephen, I am really sorry to disturb you this much time. assigning to var variable and find is also not working in my case :( — Sachu, Apr 20 '15 at 11:22
Hi Stephen the below code worked var html = clone.html(); $("#diagnosis").append(html); $("#diagnosis").find(".diag").tokenInput("@Url.Action("SearchDiagnosis","Preapproval")", { theme: 'facebook', preventDuplicates: true, searchingText: 'Searching...', tokenLimit: 1 }); — Sachu, Apr 20 '15 at 11:32
You probably want `$("#diagnosis").find(".diag").last().tokenInput(..)` so you don't keep reattaching the pluging to existing elements — , Apr 20 '15 at 11:35
Dear Stephen..you said it..what a fast reply..really helped me..thanks. a lot.. let me work on the OnChange event.. — Sachu, Apr 20 '15 at 11:45
I'll add an answer shortly and add some code on the `.change()` event — , Apr 20 '15 at 11:47
Hi Stephen, .Change event working like a charm...with $("#diagnosis").on('change', '.diag', function() { // do something }); — Sachu, Apr 20 '15 at 11:50
Next challenge for me is to post this to table..i may disturb you :) — Sachu, Apr 20 '15 at 11:51
This thread is getting too long. Time to ask a new question :) — , Apr 20 '15 at 11:55

score 1 · Accepted Answer · answered Apr 20 '15 at 11:54

You need to attach the plugin to the element after the element has been added to the DOM

var diagnosis = $("#diagnosis"); // cache it
$("#N").click(function () {
  var index = (new Date()).getTime();
  var clone = $('#Newdiagnosis').clone();
  clone.html($(clone).html().replace(/\[#\]/g, '[' + index + ']'));
  clone.html($(clone).html().replace(/"%"/g, '"' + index + '"'));
  diagnosis .append(clone.html());
  // Attach the plugin to the new element
  diagnosis.find('.diag').last().tokenInput('@Url.Action("SearchDiagnosis", "Preapproval")', {
    theme: 'facebook',
    preventDuplicates: true,
    searchingText: 'Searching...',
    tokenLimit: 1
  });
});

Side note: from your comments you indicated some elements have onchange="..". You should remove remove behavior from your markup and use event delegation to handle dynamically added elements

$("#diagnosis").on('change', '.diag', function() {
  // do something
});

Assign Jquery tokeninput for a dynamically created table row

1 Answers1