当方、開発初心者なので、説明が未熟かもしれません。。。
PHPでWeb上で申請データを入力して承認依頼を出すシステムを作っています。
MVCモデルでjavascriptも併用しています。
フレームワークにはCodeIgniterを使っています。
あるコンボボックス(hoge)の値を他のコンボボックス(piyo)の値によって動的に変更させたいのですが、なかなかうまくいきません。
データはOracleから取得していますがModelは問題なく動きデータの取得を確認しています。
発生している問題・エラーメッセージ
コンボボックスpiyoの値が変更されてもコンボボックスhogeの値が変更されない。
該当のソースコード
view
piyoコンボボックス
PHP
1<dt class="l-np-form-cell-label-nowidth np-width-10per"> 2<label class="np-is-label-require" for="piyo">piyo</label> 3</dt> 4<dd class="l-np-form-cell-item np-width-15per"> 5<?php 6if (isset($msg['piyo'])) { 7echo form_dropdown('piyo', $piyoOptions, $piyo, 'class="np-select np-width-80per np-err-input-item" id="piyo" onchange="changepiyo();" tabindex="21"'); 8} else { 9echo form_dropdown('piyo', $piyoOptions, $piyo, 'class="np-select np-width-80per" id="piyo" onchange="changepiyo();" tabindex="21"'); 10} 11?> 12<?php if (isset($msg['piyo'])): ?> 13<span class="l-np-form-cell-item np-err-input-icon" style="display:inline;" onclick="showErrToolTip_INS('piyo','<?= $msg['piyo'] ?>')" ></span> 14<?php endif; ?> 15</dd>
hogeコンボボックス
PHP
1<dt class="l-np-form-cell-label-nowidth np-width-10per"> 2<label class="np-is-label-require" for="hoge">hoge</label> 3</dt> 4<dd class="l-np-form-cell-item np-width-20per"> 5<?php 6if (isset($msg['hoge'])) { 7echo form_dropdown('hoge', $hogeOptions, $hoge, 'class="np-select np-width-80per np-err-input-item" id="hoge" tabindex="20"'); 8} else { 9echo form_dropdown('hoge', $hogeOptions, $hoge, 'class="np-select np-width-80per" id="hoge" tabindex="20"'); 10} 11?> 12<?php if (isset($msg['hoge'])): ?> 13<span class="l-np-form-cell-item np-err-input-icon" style="display:inline;" onclick="showErrToolTip_INS('hoge','<?= $msg['hoge'] ?>')" ></span> 14<?php endif; ?> 15</dd> 16<dd class="l-np-form-cell-item"> 17</dd>
隠し項目
PHP
1<input type="hidden" id="URL_Piyo" name="URL_Piyo" value="/changepiyo">
javascript
1public function changepiyo{ 2 // URLの取得 3 var url = document.getElementById('URL_Piyo').value; 4 5 // リクエストデータの取得 6 var piyoKbn = document.getElementById('piyo'); 7 var piyo = piyoKbn.options[piyoKbn.selectedIndex].value; 8 9 // 連想配列にデータ格納→JSON形式に編集 10 var arry = {}; 11 arry.piyo = piyo; 12 var json = JSON.stringify(arry); 13 14 $.ajax({ 15 type: 'post', 16 url: url, 17 contentType: "Content-Type: application/json; charset=UTF-8", 18 data: json, 19 dataType: 'json', 20 async: false, 21 }) 22 23 .done( function( data, textStatus, jqXHR ) { 24 25 // 結果値取得 26 var cmb = data.cmb; 27 28 var elmCmb = document.getElementById('hoge'); 29 while (0 < elmCmb.childNodes.length) { 30 // コンボ設定値全件を削除 31 elmCmb.removeChild(elmCmb.childNodes[0]); 32 } 33 34 for (var i = 0; i < cmb.length; i++) { 35 // オプション要素を生成 36 var elmOpt = document.createElement('option'); 37 var key = cmb[i][0]; 38 var elmTxt = cmb[i][1]; 39 elmOpt.setAttribute('value', key); 40 elmOpt.innerHTML = elmTxt; 41 42 // オプション要素をコンボに設定 43 elmCmb.appendChild(elmOpt); 44 } 45 46 // コンボ選択値を初期位置に変更 47 elmCmb.selectedIndex = 0; 48 }) 49 .fail( function( jqXHR, textStatus, errorThrown ) { 50 if (document.getElementById('ENV_MODE').value == 'production') { 51 alert('再度操作をしてください。\nこのメッセージの表示が続く場合はログインし直してください。'); 52 } else { 53 alert('非同期通信に失敗しました。status=[' + textStatus + '|' + jqXHR.status + '], error=[' + errorThrown + ']'); 54 } 55 }) 56 ; 57 return false;
javascript
134行目 for (var i = 0; i < cmb.length; i++) { 2においてSCRIPT5007: 未定義または NULL 参照のプロパティ 'length' は取得できませんのエラー 3 4console.log(data);結果 5[object Object]{1: "グロス"}
controller
PHP
1 public function changepiyo() 2 { 3 // モデルロード 4 $this->load->model('Model'); 5 6 // リクエストデータの受信 7 $request = $this->recieveAjax(); 8 9 //hogeの値を取得 10 $response['cmb'] = $this->Model->getHoge($request['piyo']); 11 12 // レスポンスデータの送信 13 $this->sendAjax($response); 14 }
試したこと
データの流れは
onchangeによりjsのchangepiyo呼び出し、urlをAjaxで呼び出してcontrollerのchangepiyo呼び出し
という認識であっているでしょうか?
ここで約1週間ぐらいつまづいており、ほとんど手は出し尽くした感じです。
解答よろしくお願い致します。```ここに言語を入力
コード
回答1件
あなたの回答
tips
プレビュー