jquery: prepopulating autocomplete fields

Question

I'm using the tokenizing autocomplete plugin for jquery ( http://loopj.com/2009/04/25/jquery-plugin-tokenizing-autocomplete-text-entry ). I mostly use Ruby, and I'm really unfamiliar with javascript, though.

My basic setup looks like this, and works fine for a new, blank form:

$(document).ready(function () {
  $("#tag_ids_field").tokenInput("/tags", {
    queryParam: "search"
  });
});

The problem comes when I try to prepopulate it, like for an edit page. I'm trying to do something like this (where the "#tag_ids_field" text box contains the JSON when the page is loaded - that way is just cleaner on the application side of things).

$(document).ready(function () {
  var tags = $("#tag_ids_field").html();
  $("#tag_ids_field").tokenInput("/tags", {
    queryParam: "search",
    prePopulate: tags
  });
});

However, when the page loads I see that it's just filled with hundreds of entries that read 'undefined'. I get this even if I take the JSON output that Rails provides and try sticking it right in the .js file:

$(document).ready(function () {
  $("#tag_ids_field").tokenInput("/tags", {
    queryParam: "search",
    prePopulate: "[{\"id\":\"44\",\"name\":\"omnis sit impedit et numquam voluptas enim\"},{\"id\":\"515\",\"name\":\"deserunt odit id doloremque reiciendis aliquid qui vel\"},{\"id\":\"943\",\"name\":\"exercitationem numquam possimus quasi iste nisi illum\"}]"
  });
});

That's obviously not a solution, I just tried it out of frustration and I get the same behavior.

My two questions:

One, why are my text boxes being filled with "undefined" tags when I try to prepopulate, and how can I get them to prepopulate successfully?

Two, I'm planning on having many autocomplete fields like this on the same page (for when several records are edited at once - they all query the same place). How can I make each autocomplete field take it's prepopulated values from it's own textbox? Something like (applying these settings to all input boxes with a certain class, not just the one of a particular id):

$(document).ready(function () {
  $(".tag_ids_field").tokenInput("/tags", {
    queryParam: "search",
    prePopulate: (the contents of that particular ".tag_ids_field" input box)
  });
});

Flash84x: I'm not sure what you're getting at. tag_ids_field is not a db field - it's a virtual attribute I've defined on the model. The setter (which accepts a list of comma-separated ids) defines the record's relationship to those tags in the database. The getter (which fills in the text area when the page loads) can return whatever I want it to - right now I have it set to just return the current tag data in JSON, because everything is neater that way.

I can explain it in more detail if you'd like, but the Ruby side of things works well and I'm comfortable with it. I just don't really know javascript at all, so I need help manipulating the data once it gets client-side.

Answer 1

I would think it would make more sense for the controller to provide the data to the edit view and populate the fields via ruby by setting the value attribute on the input elements. Even if you are ajaxing in the edit forms you can have the controller pass the data to the view. Unless you are doing something where the data isn't being saved to the database...

Maybe some more insight is needed on why you are trying to do it this way.

Answer 2

Never mind, I worked it out:

$(document).ready(function () {
  $(".tag_ids_field").each(function(index) {
    var ids = eval($(this).html());
    $(this).html('');

    $(this).tokenInput("/tags", {
      queryParam: "search",
      prePopulate: ids
    })
  });
});