jquery tokeninput with PHP

Question

I am using Jquery Tokeninput in my project to display some numbers in a textarea. I have a hidden input field in which I save the JSON string containing the numbers. The JSON looks like

patents = [{"id":"AT02708872"},{"id":"DE60232348"},{"id":"EP02708872"},{"id":"SE0101087"},{"id":"SE0200504"}]

in my view the hidden input is

  <input id="appln_nrs" type="hidden" value="{{ patents }}" />

In the same view I pass the value of this input to my JQuery Tokeninput as

<script type="text/javascript">
    $(document).ready(function() {
        var patents = $("#appln_nrs").val();
        //var patents = [{id:"ABC"},{id:"DEF"}];
        $("#patents").tokenInput("", {
            theme:"facebook",
            prePopulate: patents
        });
    });
</script>

The problem is the JSON contains only 5 entries with id and its value, but when I am on the view it display something like this in the textarea

But when I pass some hard coded JSON to patents variable it is displayed properly.

Any help will be highly appreciated.

Thanks

Edit

When I use in my javascript like

 var patents = {{ patents }};

it gives me the following syntax error

  SyntaxError: invalid property id
  [Break On This Error]     

  var patents = [{&quot;id&quot;:&quot;AT.02708872.T&quot;},{&quot;id&quot;:&quot;...

Why are you using a hidden field? Can you post the html of the generated hidden field? — Carlos Granados, Sep 20 '12 at 19:17
i am using hidden input field to pass the patents from php to my Jquery — Wearybands, Sep 20 '12 at 19:23
You have to ask twig not to escape your variable using |raw. Edited my answer — Carlos Granados, Sep 20 '12 at 20:27

Carlos Granados · Accepted Answer · 2012-09-20T20:27:07.387

1

Don´t use a hidden field. Just do:

<script type="text/javascript">
    $(document).ready(function() {
        var patents = {{patents|raw}};
        //var patents = [{id:"ABC"},{id:"DEF"}];
        $("#patents").tokenInput("", {
            theme:"facebook",
            prePopulate: patents
        });
    });
</script>

edited Sep 20 '12 at 20:27

answered Sep 20 '12 at 19:25

Carlos Granados

11,273
1
38
44

Now it displays nothing in the textarea – Wearybands Sep 20 '12 at 19:36
Sorry, I forgot a semicolon after '{{patents}}'. Now fixed – Carlos Granados Sep 20 '12 at 19:38
when I use var patents = {{patents}}; and alert(patents).. its says function Array() { [native code] } – Wearybands Sep 20 '12 at 20:01
Can you post the code of the generated html for this script? Also notice that in the code that works (var patents = [{id:"ABC"},{id:"DEF"}];) id is not quoted. Maybe you have to change that when generating the json – Carlos Granados Sep 20 '12 at 20:06
actually I am getting Array in patents variable in my view – Wearybands Sep 20 '12 at 20:09
Sorry. When I echo patents in add view it shows the correct JSON, but when i display it in JS like var patents = {{ patents }} it shows nothing. I will edit my question – Wearybands Sep 20 '12 at 20:22

jquery tokeninput with PHP

1 Answers1