CODEWITHSUNDEEP
jqueryjquery-tokeninput
user2119324
user2119324

Reputation: 597

Prepopulate jquery token input textbox

on the page load i have a token input ie,

  $('.txtWard').tokenInput(ward, {
                                        theme: 'facebook',
                                        allowCustomEntry: true,
                                        preventDuplicates: true,
                                        tokenDelimiter: '*',
                                        searchingText: 'Searching...'
                                    });

but the problem is when i click on another button i want to pre-populate items to this token input textbox.when i using the below code the textbox duplicating as another textbox.

  $(document).ready(function () {
            $('.txtWard').tokenInput(ward, {
                theme: 'facebook',
                allowCustomEntry: true,
                preventDuplicates: true,
                tokenDelimiter: '*',
                searchingText: 'Searching...'
            });
            $('#btnGet').click(function () {
                var prepopulateWards = new Array();
                $.ajax({
                    type: "POST",
                    url: "FetchWard",
                    data: JSON.stringify({ patientNo: $('#txtPatientNo').val(), locale: 'en-US' }),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (result) {
                        for (var j = 0; j < result.wards.length; j++) {
                            prepopulateWards.push({ id: result.wards[j].Code, name: result.wards[j].ward });
                        }
                    }
                });
                $('.txtWard').tokenInput(ward, {
                    theme: 'facebook',
                    allowCustomEntry: true,
                    preventDuplicates: true,
                    tokenDelimiter: '*',
                    searchingText: 'Searching...',
                    prePopulateFromValue: true,
                    prePopulate: prepopulateWards
                });
            });

        });

Upvotes: 3

Views: 8863

Answers (3)

Alex Mathew
Alex Mathew

Reputation: 350

If we are getting data from db with comma separated then
var prepopulateWards = new Array();

   var mail = response.d.Data.split(',');
   $(mail).each(function (index, item) {
       prepopulateWards.push({ name: item });
   });



$('#txt_Recipients').tokenInput(
   {
     //theme: "facebook",
     preventDuplicates: true,
     prePopulateFromValue: true,
     prePopulate: prepopulateWards
            });


});

Upvotes: 0

Arun Prasad E S
Arun Prasad E S

Reputation: 10115

$(document).ready(function() {
            $("#demo-input-pre-populated").tokenInput("http://shell.loopj.com/tokeninput/tvshows.php", {
                prePopulate: [
                    {id: 123, name: "Slurms MacKenzie"},
                    {id: 555, name: "Bob Hoskins"},
                    {id: 9000, name: "Kriss Akabusi"}
                ]
            });
        });

http://loopj.com/jquery-tokeninput/demo.html#pre-populated

Upvotes: 3

Lee
Lee

Reputation: 10603

You really should read the documentation. I've never seen this plugin before but managed to work out how to add tokens to the input within seconds.

Instead of trying to instantiate the plugin twice on the same textbox, use the method provided to add token's to the input box.

http://loopj.com/jquery-tokeninput/

Methods

selector.tokenInput("add", {id: x, name: y});
Add a new token to the tokeninput with id x and name y.

So the click handler of your button (or submit if its a form submit button), should be something like:

$('.txtWard').tokenInput('add',ward);

Assuming ward is a valid object in the format required, and i'm ofcourse making assumptions on what your code does. But thats roughly what you need to do.

Upvotes: 4

Related Questions