iT邦幫忙

0

CI + Ajax 第二級連動選單無法自動帶入正確資料

之前沒有使用ajax方式直接在頁面上修改資料的時候,編輯資料都是直接跳轉其他頁面,從後端撈資料拋到前端,再用PHP處理連動選單
但是,改用ajax之後,在編輯資料時,因為從後端拋到前端的資料,被ajax接了,無法將一二級單位定義成php變數,再用foreach去比對,只能直接用ajax去賦值,但是一級單位可以正常顯示,二級單位卻抓不到值

像下圖,一二級單位的資料都存在,但是卻抓不到資料
http://ithelp.ithome.com.tw/upload/images/20160503/20096245rEdbFj4S4w.jpg

程式的邏輯是這樣的
1.從view點了編輯按鈕

<a class="btn btn-sm btn-primary" href="javascript:void()" title="Edit" onclick="edit_data('."'".$account->id."'".')"><i class="glyphicon glyphicon-pencil"></i> 編輯</a>

2.onclick會去呼叫同一頁的js function (edit_data)

function edit_data(id)
{
	save_method = 'update';
	$('#form')[0].reset(); // reset form on modals
	$('.form-group').removeClass('has-error'); // clear error class
	$('.help-block').empty(); // clear error string
	$('#account').attr('readonly', true);  //設定欄位為唯讀
	$('#name').attr('readonly', true);  //設定欄位為唯讀

	//Ajax Load data from ajax
	$.ajax({
		url : "<?php echo site_url('Manage_account/ajax_edit/')?>/" + id,
		type: "GET",
		dataType: "JSON",
		success: function(data)
		{
			$('[name="id"]').val(data.id);
			$('[name="unit_1"]').val(data.unit_1);
			$('#unit2Sel').attr("class",data.unit_1); //將class指定為unit_1
			$('[name="unit2Op"]').val(data.unit_2);
			$('[name="name"]').val(data.name);
			$('[name="nickName"]').val(data.nickName);
			$('[name="account"]').val(data.account);
			$('[name="pwd"]').val(data.pwd);
			$('[name="acStatus"]').val(data.acStatus);
			$('[name="memo"]').val(data.memo);
			$('#modal_form').modal('show'); // show bootstrap modal when complete loaded
			$('.modal-title').text('編輯設定資料'); // Set title to Bootstrap modal title
		},
		error: function (jqXHR, textStatus, errorThrown)
		{
			alert('Error get data from ajax');
		}
	});
}

3.撈完資料,回拋到前端function (edit_data)

	public function ajax_edit($id){
		$data = $this->account->get_by_id($id);
		echo json_encode($data);
	}
	```
	
4.將值塞入bootstrap 的 modal裡面
(參考第二步驟的程式碼)

-----

之前一直想要將ajax裡面的值轉成php,但是一直轉不了
JS又不熟,研究好幾天,試了不少方法還是不行.....![/images/emoticon/emoticon02.gif](/images/emoticon/emoticon02.gif)

以上僅列出相關程式碼
完整的程式碼檔案可以參考  →  [完整程式碼](https://gist.github.com/ivan1999/45d25228a9bb60370b713f466ab4de90)
看更多先前的討論...收起先前的討論...
外獅佬 iT邦大師 1 級 ‧ 2016-05-03 23:04:32 檢舉
問問題這樣問,恐怕得不到答案
可以的話,success那裏,把資料alert出來看看,到底正不正確,這樣驗證最直接、最快
外獅佬 iT邦大師 1 級 ‧ 2016-05-03 23:09:00 檢舉
理由是:jquery ajax都已經執行了succcess的call back,而且第一級的資料也正確,表示資料已經正確透過ajax回傳,現在問題就出在到底對不對的狀況下,所以,檢查回傳資料比較實在...跟ajax到底有沒有發生錯誤,或者什麼php,根本一點關係都沒有
ivan1999 iT邦新手 4 級 ‧ 2016-05-04 10:24:37 檢舉
我有嘗試把資料alert出來,一二級單位的資料都是正確的,如果我不做連動,直接將所有二級單位都列出來,這時候就可以抓到正確的值
外獅佬 iT邦大師 1 級 ‧ 2016-05-14 02:34:47 檢舉
早知道不回應了....又是個無頭公案...
ivan1999 iT邦新手 4 級 ‧ 2017-03-13 11:06:05 檢舉
前面沒回其實是因為一直沒有解決這個問題啊~~~
今天終於解決了,異常原因是使用的插件chained不支援
http://www.appelsiini.net/projects/chained

這個只支援手動選擇,也就是在欄位沒帶資料的情況下,手動去選擇一級單位,然後會自動帶入二級單位
如果像編輯資料,欄位有帶資料的,一級單位抓得到,但是二級單位就抓不到了

必須手動先選取一級單位,才會帶入二級單位資料

解決方法就是不用這個插件了,直接寫jQuery

原本的程式碼可以參考上面的
新的程式碼可以參考這個
https://gist.github.com/ivan1999/16459462cfbdd51589e8dc11c7c5f7d2#file-view_user-php

Line 8-20,28-31這兩段
ivan1999 iT邦新手 4 級 ‧ 2017-03-13 11:09:34 檢舉
補充一下,還有Line 131這一段,編輯資料時如果沒加這段,會出現所有二級單位清單

2 個回答

2
fillano
iT邦超人 1 級 ‧ 2016-05-04 09:14:59
$('[name="unit2Op"]').val(data.unit_2);

好像沒有name是unit2Op的select元素?

看更多先前的回應...收起先前的回應...
ivan1999 iT邦新手 4 級 ‧ 2016-05-04 10:18:09 檢舉

不好意思,name = unit2Sel,原本是unit2Op,後來調整的時候忘了把他一起改掉了,現在已經改為一致,但還是一樣的情況

外獅佬 iT邦大師 1 級 ‧ 2016-05-04 10:43:22 檢舉

發問者把元素搞錯了...
應該設定select的value,不是option...

fillano iT邦超人 1 級 ‧ 2016-05-04 11:20:19 檢舉

外獅佬說的是正解。我比較好奇的是,你怎麼不模仿第一級選單的作法?明明是對的。

ivan1999 iT邦新手 4 級 ‧ 2016-05-04 15:16:14 檢舉

應該這麼說,一開始我是用和一級單位的作法一樣,直接抓select 的name,然後指定value,做法和一級單位的賦值是一樣的,但是因為發現二級單位一直抓不到值,所以就開始嘗試其他方法,這邊看到的是我已經改得有點混亂,然後因為都一樣不行,所以就沒有再改回去取select name再賦值的做法
所以,就算和一級單位的作法一樣也是不行的~~~

2
外獅佬
iT邦大師 1 級 ‧ 2016-05-04 10:41:54

原因應該是這樣吧
發問者的code:

...

所以...
$('[name="unit2Op"]').val(data.unit_2);
應該改成:$('[name="unit_2"]').val(data.unit_2);
或者直接用它的id:$('#unit_2').val(data.unit_2);

看更多先前的回應...收起先前的回應...
ivan1999 iT邦新手 4 級 ‧ 2016-05-04 15:31:28 檢舉

這是我一開始的做法,但也是一樣不行,為什麼我會覺得是JS的問題?因為我只要把連動的function拿掉
------------------------------------------------
$(function(){
//$("#unit_2").chained("#unit_1");
});
------------------------------------------------
讓二級單位全部顯示,就會抓到正確的值,我也用alert確認過在ajax裡面的一級單位.二級單位的值都有抓到也正確,就是不知道為什麼在印option的時候就會出錯

我自己猜測出錯的原因,可能是因為在抓值的時候,一級單位的值沒有寫入option的class,而class是分組連動的條件,class相同的被視為同一組,但我試過使用attr強制修改class,也是沒效.......

外獅佬 iT邦大師 1 級 ‧ 2016-05-04 16:03:42 檢舉

有幾個問題,可能要樓主自己去釐清了...因為,看了幾次,霧煞煞...

  1. 在上加CSS class的用意是什麼?
  2. 下拉選單賦值(選取某個選項),應該針對select元素,不是針對option元素,跟option上的CSS class應該更沒關係才是
  3. 你的unit_2下的option,每個option的id都相同...這...
fillano iT邦超人 1 級 ‧ 2016-05-04 22:57:56 檢舉

...怎麼沒折行XD

外獅佬 iT邦大師 1 級 ‧ 2016-05-05 09:40:03 檢舉

報告費公...

因為



兩次Enter

兩次Enter

兩次Enter

fillano iT邦超人 1 級 ‧ 2016-05-05 13:30:13 檢舉

XD

ivan1999 iT邦新手 4 級 ‧ 2016-05-11 15:20:50 檢舉

不好意思,因為最近看到上面的鈴鐺提示是0就沒有特地點進來看回應....
這麼晚才回復...謝謝兩位大大的熱心幫忙 (痛哭

1.二級選單的部分增加class name,這是把class name相同的視為同一群組,所以原則上class name都是一級選單的選項內容
(這部分是套件應用,可以參考bootstrap 套件)
例如:一級選單選項內容有 [台北市].[新北市]
二級選單的內容有[松山區].[大安區].[中正區].[泰山區].[板橋區].[中和區]等等
松山區.大安區.中正區的class name = 台北市
泰山區.板橋區.中和區的class name = 新北市

2.一開始的程式是這樣的
JS部分

	save_method = 'update';
	$('#form')[0].reset(); // reset form on modals
	$('.form-group').removeClass('has-error'); // clear error class
	$('.help-block').empty(); // clear error string
	$('#account').attr('readonly', true);  //設定欄位為唯讀
	$('#name').attr('readonly', true);  //設定欄位為唯讀
	
	//Ajax Load data from ajax
	$.ajax({
		url : "<?php echo site_url('Manage_account/ajax_edit/')?>/" + id,
		type: "GET",
		dataType: "JSON",
		success: function(data)
		{
			$('[name="id"]').val(data.id);
			$('[name="unit_1"]').val(data.unit_1);
			$('[name="unit_2"]').val(data.unit_2);
			$('[name="name"]').val(data.name);
			$('[name="nickName"]').val(data.nickName);
			$('[name="account"]').val(data.account);
			$('[name="pwd"]').val(data.pwd);
			$('[name="acStatus"]').val(data.acStatus);
			$('[name="memo"]').val(data.memo);
			$('#modal_form').modal('show'); // show bootstrap modal when complete loaded
			$('.modal-title').text('編輯設定資料'); // Set title to Bootstrap modal title
		},
		error: function (jqXHR, textStatus, errorThrown)
		{
			alert('Error get data from ajax');
		}
	});

選項部分

<div class="form-group">
	<label class="control-label col-md-3">一級單位</label>
	<div class="col-md-9">
		<select id="unit_1" name="unit_1" data-rel="chosen" class="form-control" >
			<?php
				echo '<option selected="selected" value="">請選擇一級單位</option>';
				foreach ($resultsUnit1 as $unit1){
					echo '<option value="'.$unit1->unit_1.'">'.$unit1->unit_1.'</option>';
				}
			?>
		</select>
		<span class="help-block"></span>
	</div>
</div>

<div class="form-group">
	<label class="control-label col-md-3">二級單位</label>
	<div class="col-md-9">
		<select id="unit_2" name="unit_2" data-rel="chosen" class="form-control" >
			<?php
			echo '<option value="">請選擇二級單位</option>';
			foreach ($resultsUnit2 as $unit2){
				echo '<option value="'.$unit2->unit_2.'" class="'.$unit2->unit_1.'">'.$unit2->unit_2.'</option>';
			}
			?>
		</select>
		<span class="help-block"></span>
	</div>
</div>

我要發表回答

立即登入回答