2012-03-26 50 views
1

我有與jQuery tokeninput輸入的問題產生的多個輸入,這是我在軌道上的代碼紅寶石:jQuery的tokeninput 1個輸入

<% @free_preferences.each do |fp| %> 
<% eventCriteria = EventCriteria.find_by_id(fp.event_criteria_id)%> 
<% if !eventCriteria.is_exclusive? %> 
    <% form_for fp do |f| %> 

     <%= f.label :tag_tokens1, eventCriteria.name %> 
     <%= f.text_field :tag_tokens1, "data-pre" => fp.tags.map(&:attributes).to_json %> 

     <%= f.submit "Save preference", :disable_with => 'Saving preference...' %> 
    <% end %> 
<% else %> 
    <% form_for fp do |f| %> 

     <%= f.label :tag_tokens2, eventCriteria.name %> 
     <%= f.text_field :tag_tokens2, "data-pre" => fp.tags.map(&:attributes).to_json %> 

     <%= f.submit "Save preference", :disable_with => 'Saving preference...' %> 
    <% end %> 
<% end %> 

,這是產生的HTML源代碼:

<form accept-charset="UTF-8" action="/subscription_preferences/128" class="edit_subscription_preference" id="edit_subscription_preference_128" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="_method" type="hidden" value="put" /><input name="authenticity_token" type="hidden" value="bYJedYxgjjA+C+CWUkZpXH3mxNxOf8XPQgwp5/DEUp8=" /></div> 
     <label for="subscription_preference_tag_tokens1">Explicit include</label> 
     <input data-pre="[{&quot;updated_at&quot;:&quot;2012-03-20T08:48:53Z&quot;,&quot;name&quot;:&quot;Windows xp&quot;,&quot;id&quot;:70,&quot;created_at&quot;:&quot;2012-03-20T08:48:53Z&quot;}]" id="subscription_preference_tag_tokens1" name="subscription_preference[tag_tokens1]" size="30" type="text" /> 

<input data-disable-with="Saving preference..." id="subscription_preference_submit" name="commit" type="submit" value="Save preference" /> 

<form accept-charset="UTF-8" action="/subscription_preferences/129" class="edit_subscription_preference" id="edit_subscription_preference_129" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="_method" type="hidden" value="put" /><input name="authenticity_token" type="hidden" value="bYJedYxgjjA+C+CWUkZpXH3mxNxOf8XPQgwp5/DEUp8=" /></div> 
     <label for="subscription_preference_tag_tokens2">Explicit exclude</label> 
     <input data-pre="[]" id="subscription_preference_tag_tokens2" name="subscription_preference[tag_tokens2]" size="30" type="text" /> 

<input data-disable-with="Saving preference..." id="subscription_preference_submit" name="commit" type="submit" value="Save preference" /> 

這似乎不錯,但問題是,每個subscription_preference_tag_tokensX輸入創建了四個jQuery的tokeninputs,如果我螢火蟲這個檢查是代碼:

<form accept-charset="UTF-8" action="/subscription_preferences/128" class="edit_subscription_preference" id="edit_subscription_preference_128" method="post"> 
<div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; display:  inline; "> 

<label for="subscription_preference_tag_tokens1">Explicit include</label> 
<ul class="token-input-list-facebook"> 
<ul class="token-input-list-facebook"> 
<ul class="token-input-list-facebook"> 
<ul class="token-input-list-facebook"> 

<input data-pre="[{"updated_at":"2012-03-20T08:48:53Z","name":"Windows xp","id":70,"created_at":"2012-03-20T08:48:53Z"},{"updated_at":"2012-03-13T10:01:10Z","name":"something","id":59,"created_at":"2012-03-13T10:01:10Z"}]" id="subscription_preference_tag_tokens1" name="subscription_preference[tag_tokens1]" size="30" type="text" style="display: none; "/> 

<input data-disable-with="Saving preference..." id="subscription_preference_submit" name="commit" type="submit" value="Save preference"/> 

</form> 

<form accept-charset="UTF-8" action="/subscription_preferences/129" class="edit_subscription_preference" id="edit_subscription_preference_129" method="post"> 
<div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; display: inline; "> 

<label for="subscription_preference_tag_tokens2">Explicit exclude</label> 
<ul class="token-input-list-facebook"> 
<ul class="token-input-list-facebook"> 
<ul class="token-input-list-facebook"> 
<ul class="token-input-list-facebook"> 

<input data-pre="[]" id="subscription_preference_tag_tokens2" name="subscription_preference[tag_tokens2]" size="30" type="text" style="display: none; "/> 
<input data-disable-with="Saving preference..." id="subscription_preference_submit" name="commit" type="submit" value="Save preference"/> 
</form> 

我不知道爲什麼IR創建四個「令牌的input_list-facebook「爲每個」subscription_preference_tag_tokensX「。這是問題的一個畫面:

enter image description here

編輯1:

這是我的jQuery代碼:

$(function() { 
    $('#subscription_preference_tag_tokens1').tokenInput('/tags.json', { 
    crossDomain: false, 
    preventDuplicates: true, 
    prePopulate: $('#subscription_preference_tag_tokens1').data('pre'), 
    theme: 'facebook', 

    }); 
    $('#subscription_preference_tag_tokens2').tokenInput('/tags.json', { 
    crossDomain: false, 
    preventDuplicates: true, 
    prePopulate: $('#subscription_preference_tag_tokens2').data('pre'), 
    theme: 'facebook', 

    }); 

}); 
+0

你能發佈一些你的javascript代碼嗎? – moritz 2012-03-26 13:35:25

+0

嗨mosch,我編輯了我的問題,你可以在帖子結尾找到javascript代碼。 – TomasMax 2012-03-30 11:58:11

回答

0

我在尋找相同的答案,問題是,所有的字段獲得與答案相同的json文件。因此,您的文件的每個部分都會成爲一個令牌,並使用此部分填充您的字段。

如果你找到解決方案,請讓我知道。但是可能你需要爲每個字段生成不同的jsons,因爲每個字段都會查找文件的特定部分。

+0

我不明白,我需要爲每個輸入相同的json,爲什麼有4個joquery-tokeninputs? – TomasMax 2012-03-30 11:59:41

+0

,因爲你調用函數2次,每次重複你的JSON結果的數量,在這種情況下2,所以2 * 2 = 4. – 2012-04-04 20:32:44

+0

事情是,這個領域不遵守他所屬的ID,它看起來孔json答案。我試圖做同樣的事情,但直到現在還沒有成功,我想答案是生成一個變量,收集屬於這個特定領域的json答案的一部分,並從該變量,而不是從json預先填充。或者設法爲每個字段生成唯一的答案。如果有任何想法來找你,請讓我知道。 [email protected] – 2012-04-04 20:33:19