2010-03-26 282 views
3

我正在使用jquery的標記化自動完成插件(http://loopj.com/2009/04/25/jquery-plugin-tokenizing-autocomplete-text-entry)。雖然我主要使用Ruby,但我對JavaScript並不熟悉。jquery:預填充自動填充字段

我的基本設置是這樣的,對於一個新的空白表單工作正常:

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

問題是當我嘗試預填充它,像編輯頁面。我試圖做這樣的事情(當頁面加載時,「#tag_ids_field」文本框包含JSON) - 這種方式在應用程序方面只是更清晰)。

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

但是,當頁面加載時,我看到它只是填充了數百個條目,讀取'undefined'。我得到這個就算我拿JSON輸出Rails提供並嘗試堅持正確的.js文件:

$(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\"}]" 
    }); 
}); 

這顯然不是一個解決方案,我只是想這是出於無奈,我也得到相同的行爲。

我的兩個問題:

一,爲什麼我的文本框充滿「不確定」的標籤,當我嘗試預填充,我怎麼可以讓他們成功地預填充?

二,我打算在同一頁面上有這樣的許多自動填充字段(當幾個記錄一次編輯 - 他們都查詢相同的地方)。我怎樣才能讓每個自動填充字段從它自己的文本框中預先填充它的值?喜歡的東西(應用這些設置應用於所有輸入框具有一定的階級,而不是某一特定ID的一個):

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

Flash84x:我不知道你在說什麼。 tag_ids_field不是數據庫字段 - 它是我在模型上定義的虛擬屬性。 setter(接受逗號分隔的id列表)定義記錄與數據庫中這些標記的關係。吸氣劑(其填充在文本區域在頁面加載時)可以返回它無論我想 - 現在我有它設置爲只返回JSON當前標籤數據,因爲一切都是整齊的方式。

我可以更詳細地解釋它,如果你願意,但事物的紅寶石方面效果很好,我很舒服。我根本不瞭解JavaScript,所以在獲取客戶端數據後,我需要幫助操縱數據。

+0

沒人能回答這個問題?我認爲這對於知道JavaScript的人來說很容易。 – 2010-03-26 15:31:24

回答

1

我認爲它會更有意義爲控制器提供的數據到編輯視圖,通過設置在輸入單元的值屬性填充經由紅寶石的字段。即使您在編輯表單中使用AJAX,您也可以讓控制器將數據傳遞給視圖。除非你正在做的事情,其中​​的數據沒有被保存到數據庫中...

也許有必要對爲什麼你正在嘗試做的是這樣一些更深入的瞭解。

+0

更新了問題以進一步解釋。 – 2010-03-26 06:10:53

+0

@克里斯可能的洞見:對於tokenInput工作,它需要一個名字以顯示用戶和ID發送回來的形式。所以控制器需要給它一個像'[{「id」:123,「name」:「例外」},{「id」:147,「name」:「令人驚歎的」}]''的json對象,但是該表單需要給予類似「123,147」的內容。通過這種方式,用戶可以使用名稱和inputToken來完成所有花哨的UI東西,並將其透明地轉換爲ID的CSV。 – Shawn 2011-11-17 23:26:15

3

沒關係,我的工作了:

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

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

這是否也解決了你得到的'undefined'? – Shawn 2011-11-17 23:27:20