2016-12-21 3 views
0

私は動的に次のコードでdiv要素内の選択ボックスを追加してい:1行にGSPタグを生成するには?

$('#worker').html('<g:select class = "dropdown" name="worker" from="${workers}" optionKey="id" optionValue="name" />'); 

このコードの問題はg:selectタグが膨張すると、以下のように、それはコードを生成するということです。

$('#worker').html('<select onchange="handleWorkerChange(this)" class="dropdown" name="worker" id="worker" > 
<option value="2" >Worker1</option> 
<option value="4" >Worker1</option> 
<option value="18" >Worker1</option> 
<option value="19" >Worker1</option> 
</select>'); 

上記のように、展開するとオプションタグは改行になり、JavaScriptで構文エラーが発生します。 select gspタグを1行の文字列に展開して、選択ボックスをdivに動的に組み込む方法はありますか?

+1

私はクライアント側でg:selectタグをどのように展開するのかを理解しようとしています。動的にg:selectタグを使用してjsを使用して展開すると、g:selectはサーバー側でのみ展開できるため、展開しません。 –

答えて

1

g:selectがちょうどmethod within the GSPとしても利用可能である私のコードを共有する:この方法の利点、その後、我々だけを扱っているという事実を取る

${select(from:aList,value:aValue)} 

テキスト(org.codehaus.groovy.grails.web.util.StreamCharBuffer)、新しい行の文字を削除することができます:

$('#worker').html('${ select(
    class: 'dropdown', 
    from: workers, 
    optionKey='id', 
    optionValue: 'name', 
    name: 'worker' 
).replace(System.getProperty("line.separator"), '') }'); 

これにより、select全体が1行に配置されるはずです。


は当初、私はselectが複数の行の上に配置されている原因となった自分が正確にわからなかったので、私はストレートのソースに行きました:FormTagLib

FormTagLibからの抜粋:改行文字列を書き込むことで、現在の行を終了し

writer << "<select " 
// process remaining attributes 
outputAttributes(attrs, writer, true) 

writer << '>' 
writer.println() 

あなたが見ることができるように、それは単純なprintlnメソッド呼び出しです。行区切り文字列はシステムプロパティline.separatorによって定義され、必ずしも単一の改行文字( '\ n')である必要はありません。

これは、System.getProperty("line.separator")を使用することが重要な理由です。

+0

ソリューションをありがとう! – kofhearts

0

appendまたはhtmlグレイズコードのようにすることはできません。

あなたはhtmlコードを使用します。

var youComboboxCode = "<select><option>aaaa</option><option>bbb</option></select>"; 

$('#worker').html(youComboboxCode); 

私は

var htmlcodeA = ''; 

if(data) 
{ 
    for (var i = 0; i < data.length; i++) { 
    htmlcodeA = htmlcodeA + "<option value="+data[i].id+">"+data[i].purchaseNo+"</option>"; 
    } 
} 

$('#home').find('option').remove(); 
$('#home').html(htmlcodeA).change(); 
関連する問題