htmlとjavascript間の配列データ受渡について

Question

データ構造（$test_list）

array(2) {
	[0]=>
	array(3) {
	  ["test_name"]=>
	  string(15) "テスト太郎"
	  ["test_d_name"]=>
	  string(6) "太郎"
	  ["test_address"]=>
	  string(6) "東京"
	}
	[1]=>
	array(3) {
	  ["test_name"]=>
	  string(15) "テスト花子"
	  ["test_d_name"]=>
	  string(6) "花子"
	  ["test_address"]=>
	  string(6) "大阪"
	}
}

■実現したい事
(1)「名前を追加」ボタンにて、ラベルを追加して、同じように「選択してください」ラベルから選んだ「$test_list[idx].test_name」から
同じ配列インデックスの「test_d_name」と「test_address」の値をテキストボックスに表示させたいです。

idの重複はjavascriptではNGなので「test.tpl」の「id="select_test_info"」を「id="select_test_info1"」として、
「名前を追加」ボタンを押して、ラベル追加した際２番目のidが「id="select_test_info2"」3番目のidが「id="select_test_info3"」
となっていくのでtplの下記部分をそれに対応したように、「document.getElementById('select_test_info2').addEventListener」
「document.getElementById('select_test_info3').addEventListener」となるようにしたいのですが、どのように
したら良いかわからなく悩んでいます。

(2)ラベルを「選択してください」に戻すと、テキストボックス欄が「undefined」となってしまいます。
tplの下記部分に、

if ( option.indexOf("選択してください") != -1) {
			document.querySelector('input[name^="test_d_name"]').value = option.dataset.disp;
		}

と記載して、「選択してください」ラベルがない場合のみ表示させようとしているのですが、うまく
いかなく悩んでいます。

以上の２点をどのようにしたら良いかご教授いただきたくお願い致します。
●test.tpl

<script language="JavaScript" src="test.js?t={$smarty.now}"></script>

・
・
・

<h3 class="Test_header">テスト</h3>
<table data-role="table" id="test_tab" data-mode="reflow" class="ui-responsive table-stroke">
<thead>
	<tr>
		<th width="5%">メイン</th>
		<th width="30%">名前</th>
		<th width="30%">名</th>
		<th width="30%">住所</th>
		<th width="5%">削除</th>
	</tr>
</thead>
<tbody id="test_tbody">
{assign var='i' value=0}

<tr>
	<td><input type="radio" id="in_test_radio{$i}" name="test_radio[{$i}]"/></td>
	<td>
		<select name="test_info" id="select_test_info1" data-native-menu="true">
			<option value="">選択してください</option>
		{section name=idx loop=$test_list}
			<option value="{$test_list[idx].test_name|escape:"html"}"{if $test_list[idx].test_name == $test_list} selected{/if} data-disp="{$test_list[idx].test_d_name}" data-address="{$test_list[idx].test_address}">{$test_list[idx].test_name}</option>
		{/section}
		</select>
	</td>
	<td><input type="text" name="test_d_name[{$i}]" value="{$test_list[idx1].test_d_name|escape:"html"}" placeholder="名" /></td>
	<td><input type="text" name="test_address[{$i}]" value="{$test_list[idx1].test_address|escape:"html"}" placeholder="住所" /></td>
	<td><button type="button" id="btn_del_test{$i}" class="deleteTest ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-delete">削除</button>
</tr>
</tbody>
</table>

<div class="ui-field-contain">
	<button type="button" id="btn_addName" class="addName ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-plus">名前を追加</button>
</div>
・
・
・
</div>
	<script type="text/javascript">
		var next_idx = $('#test_tbody').children().length;
//		console.log(next_idx);
		document.getElementById('select_test_info').addEventListener('change', function(event) {
		var option = this.options[this.selectedIndex];
//		console.log(option);
//		if ( option.indexOf("選択してください") != -1) {
			document.querySelector('input[name^="test_d_name"]').value = option.dataset.disp;
//		}
		document.querySelector('input[name^="test_address"]').value = option.dataset.address;
		}, false);
	</script>
</body>
</html>

●test.js(「名前を追加」ボタンを押した際)

//名前の行を追加する
$(document).on("click", ".addName", function()
{
	var content = '';
	var next_idx = $('#test_tbody').children().length;
	next_idx++;
	content += '<tr>';
	content += '<td><input type="radio" id="in_test_radio{$i}" name="test_radio['+next_idx+']" value="'+next_idx+'" /></td>';
	content += '<td><select name="test_info" id="select_test_info'+next_idx+'" data-native-menu="true">';
	content += '</select></td>';
	
	content += '<td><input type="text" name="test_d_name['+next_idx+']" value="" placeholder="名" /></td>';
	content += '<td><input type="text" name="test_address['+next_idx+']" value="" placeholder="住所" /></td>';
	content += '<td><button type="button" id="btn_del_test'+next_idx+'" class="deleteTest ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-delete">削除</button></td>';
	content += '</tr>';
	$('#test_tbody').append(content);
	// selectの中身を足す
	$('#select_test_info'+next_idx).append($('#select_test_info').children().clone(true));
	//Table Tag 再構築
	$('#test_tbody').trigger('create');

	return false;
});

となっております。
ご教授いただきたくお願い申し上げます。
宜しくお願いします。

Answer 1

そもそもPHPとSmartyとJavaScriptとブラウザの関係がちゃんと理解出来てなさそうなので、
ざっと解説します。
まずは下記のような流れになります。

1. ブラウザにURLを打ち込んだりリンクで訪問
2. ブラウザ「Webサーバさん、HTMLください」
3. Webサーバ「お、このURLはPHPで解析しないと駄目だな…ちょっとまってて、おいPHPさんお客さんだよ！」
4. PHP「おっ、HTMLの要望かよしよし加工したろ。これはSmartyで変換しないとだめだな、ちょっと値やるからHTMLちょうだい」
5. Smarty「承知、HTMLできました」
6. PHP「Smartyさんありがと、WebサーバさんHTMLだよ」
7. Webサーバ「PHPさんありがと、ブラウザさんおまたせしましたHTMLです」
8. ブラウザ「ありがと、<script language="JavaScript" src="test.js?t={$smarty.now}"></script>っていう記述あるからもう一回お願いしなきゃ駄目だな」
9. ブラウザ「Webサーバさん、test.jsください」
10. Webサーバ「承知しました。Linuxマシンのディレクトリにtest.jsがありましたのでお返しします。」
11. ブラウザ「Webサーバさんありがとう、よし解析するか…」
12. ブラウザ「ん？この{}で書かれた変な書式はなんだ？まぁ文字列だからいいか」

この時重要なのは、隣同士の概念しかお互いに知らない事。
ブラウザはHTMLやJavaScriptファイルを受け取って解釈することであり、
裏でPHPだろうがNode.jsだろうが何で動いていようがHTMLを受け取ればそれに従って動作するだけと割り切っていることです。

関係を表すとこうです。
お互いは隣同士の存在しか認知していません。
ブラウザ -> Webサーバ -> PHP -> Smarty

sousukeさんの仰っているのはまさにそこで、
ブラウザもWebサーバもSmartyの事なんて知ったことではないので、
test.jsにSmarty流の書式を持ち込む事は出来ません。

---

どのようにしたらできますでしょうか？

まず、Smarty変数はHTMLが完成してPHPに戻ってきた瞬間に全てなくなっていますので、
ブラウザが再利用する手段はありません。
これに関しては、予めHTML側にテンプレート的な存在のDOMを作っておく解決方法があります。

<div id="templates" style="display: none;">
  <div class="select">
    <select name="test_info" id="select_test_info" data-native-menu="true">
      <option value="">選択してください</option>
      {section name=idx loop=$test_list}
        <option value="{$test_list[idx].test_name|escape:"html"}"{if $test_list[idx].test_name == $test_list} selected{/if} data-disp="{$test_list[idx].test_d_name}" data-address="{$test_list[idx].test_address}">{$test_list[idx].test_name}</option>
      {/section}
    </select>
  </div>
</div>

まぁ、idは同じHTML内で重複してはならないのでid="select_test_info"は一発アウトです。
同様に id="btn_del_test{$i}"というふうな記述が散見されますが、
select name="test_info"とあるようにどうしても重複を避けるべき理由はなさそうですね。

どうしてもSmarty変数を再利用したい

Smartyを抜けた瞬間にSmarty変数は全てなくなりますが、
JavaScriptの変数はブラウザがHTMLを読み始めて初めて単なる文字列からJavaScriptのコードになります。
つまり、SmartyでJavaScriptの構文を出力して残しておけば、ブラウザにSmarty変数の中身を渡す事が可能です。

しかしJavaScriptの構文である{}とSmartyの{}がもろに衝突するので、このままでは使えません。
一般的にはSmartyの展開用の構文を{{}}等に変更して対処することが多いです。

<script>
var test_list = [];
{{section name=idx loop=$test_list}}
  test_list.push({
    id: {{idx}},
    name: {{$test_list[idx].test_name}},
    value: {{$test_list[idx].test_name|escape:"html"}},
    is_selected: {{if $test_list[idx].test_name == $test_list}}true{{else}}false{{/if}},
    display_name: {{$test_list[idx].test_d_name}},
    address: {{$test_list[idx].test_address}}
  });
{{/section}}

console.log(test_list);
</script>

このような形式で用意しておけば、JavaScriptでfor文なりなんなりを使ってDOMツリーを生成する手段が使えます。

Comments

[kumakumatan]

ありがとうございます。
質問の説明文を変更して疑問点をまとめましたので、引き続き宜しくお願いします。

Answer 2

Smartyはよく存じ上げないのですがクライアント側のjavascriptで
サーバーサイド(tpl)のコードを書いても解釈してもらえないと思います。

#追記
実験はしていませんが…

<select name="test_info" id="select_test_info" data-native-menu="true">

ここの中身をコピーするといいのではと見ました。もともとですがid="select_test_info"などが重複してます…

長いので削除しました。

こんな感じでしょうか…他にも色々サーバー側の記述がありますが都度変更してください。

#再追記
毎回イベントリスナーをaddするのは面倒なのでselectと値を代入するtextは何かしらの
関連性を使って代入するといいと思います。

$(document).on('change','select',function(){
  //changeしたselectが入っているtdから見て1つ右のtdのinputに代入
  $($(this).parents("td").eq(0)).nextAll().eq(0).children("input").eq(0).val("aaa");
  //changeしたselectが入っているtdから見て2つ右のtdのinputに代入
  $($(this).parents("td").eq(0)).nextAll().eq(1).children("input").eq(0).val("bbb");
});

Comments

[kumakumatan]

ありがとうございます。
どのようにしたらできますでしょうか？
宜しくお願いします。

[kumakumatan]

ありがとうございます。
質問の説明文を変更して疑問点をまとめましたので、引き続き宜しくお願いします。

[kumakumatan]

ご回答ありがとうございます。

$(document).on('change','select_test_info',function(){
//changeしたselectが入っているtdから見て1つ右のtdのinputに代入
$($(this).parents("td").eq(0)).nextAll().eq(0).children("input").eq(0).val("test_d_name");
//changeしたselectが入っているtdから見て2つ右のtdのinputに代入
$($(this).parents("td").eq(0)).nextAll().eq(1).children("input").eq(0).val("test_address");
});

とするのでしょうか？
また

{section name=idx loop=$test_list}
<option value="{$test_list[idx].test_name|escape:"html"}"{if $test_list[idx].test_name == $test_list} selected{/if} data-disp="{$test_list[idx].test_d_name}" data-address="{$test_list[idx].test_address}">{$test_list[idx].test_name}</option>
{/section}

はどのように変更するのでしょうか？
data-disp="{$test_list[idx].test_d_name}" data-address="{$test_list[idx].test_address}"
がいらなくなるのでしょうか？

宜しくお願いします。

[sousuke]

.val("test_d_name")はやってみたのでしょうか？言われたとおりに書いてもダメですよ。
最初の質問とかなり違っているのでやりたいことを整理した方がいいと思います。
{section name=idx loop=$test_list}~~{/section}
↑ここはなんども言われているようにサーバー側のスクリプトでjavascriptとは一切関係ありません。

[kumakumatan]

ご回答ありがとうございます。

試してみたのですが、値がセットされませんでしたので、どのようにしたら値が反映
されるかを知りたくお聞きしました。

<select name="test_info" id="select_test_info" data-native-menu="true">
・
・
・
</select>
・
・
・
<div class="ui-field-contain">
<button type="button" id="btn_addTest" class="addTest ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-plus">名前を追加</button>
</div>

<script type="text/javascript">

document.getElementById('select_test_info').addEventListener('change', function(event) {
var option = this.options[this.selectedIndex];
document.querySelector('input[name^="test_d_name"]').value = option.dataset.name;
document.querySelector('input[name^="test_address"]').value = option.dataset.address;
}, false);

</script>

この状態では、「名前を追加」ボタンにて「test.js」側にて
// selectの中身を足す
$('#select_test_info'+next_idx).append($('#select_test_info').children().clone(true));
と「select_test_info」の値が「select_test_info2」となり
(1)document.getElementById('select_test_info').addEventListener('change', function(event) {
の処理が通らなくなり、こまっています。
また、
(2)ラベルを「選択してください」に戻すと、テキストボックス欄が「undefined」となってしまいます。
tplの下記部分に、
if ( option.indexOf("選択してください") != -1) {
document.querySelector('input[name^="test_d_name"]').value = option.dataset.disp;
}
として、「選択してください」ラベルがない場合のみ表示させようとしているのですが、うまく
いかなく悩んでいます。

どうぞ宜しくお願い致します。