좋아, 그게 주제 넘은 제목이야 - 나에 복잡하다.복잡한 jqueryui 대화 상자
개요 : (스크린 샷과 하단 업데이트 참조)
a. $(document).ready에서 jQuery/AJAX는 행당 하나의 연락처가있는 테이블을 만듭니다.
b. 각 테이블의 행은, 제 3 셀은이다 <a id="edit_83">edit</a> 태그 - "83"은 예이고, DB로부터 contact_id를 나타내고, 각각의 태그가 단계 (d)에서 사용되는 고유 한 ID 번호
C있을 것이다. AJAX 콜백
d에있는 각 연락처에 대해 jqueryui 대화 상자 (autoOpen = false)를 생성하십시오. 편집 닻이 클릭되면 jquery가 contact_id를 분리하고이를 사용하여 적절한 jQueryUI 대화 상자를 표시합니다.
목적 : 모든 테이블 행의 클릭 편집 에 링크가 해당 연락처 편집 양식과 jqueryui 대화 상자가 열립니다.
문제점 : 형태는 열리지 만 내부에 양식 필드가 없다. 사실, DOM에서 주입 된 form/div는 각 테이블 행에 대해 누락되었습니다. ???
HTML :
<div id="contact_table"></div>
자바 스크립트/jQuery를 - AJAX 전화 :
$(document).ready(function() {
$.ajax({
type: "POST",
url: "ax_all_ajax_fns.php",
data: 'request=index_list_contacts_for_client&user_id=' + user_id,
success: function(data) {
$('#contact_table').html(data);
var tbl = $('#injected_table_of_contacts');
tbl.find("div").each(function() {
$(this).dialog({
autoOpen: false,
height: 400,
width: 600,
modal: true,
buttons:
{
Okay: function() {
$(this).dialog("close");
},
Cancel: function() {
$(this).dialog("close");
}
}
})
});
}
});
});
AJAX/PHP 1 - ax_all_ajax_fns.php :
,626,AJAX/PHP 2 : - functions.php
function build_contact_table_for_client($user_id) {
$aContact_info = get_contact_data_ARRAY_user_id($user_id, 'first_name','last_name','email1','cell_phone', 'contact_id');
$r = '<table id="injected_table_of_contacts">
<tr>
<th width="120">Name</th>
<th width="200">Email Address</th>
<th width="100">Cell Phone</th>
<th>Action</th>
</tr>
';
while ($rrow = mysql_fetch_array($aContact_info)) {
$r .= '
<tr>
<td>'.$rrow['first_name'].' '.$rrow['last_name'].'</td>
<td>'.$rrow['email1'].'</td>
<td>'.$rrow['cell_phone'].'</td>
<td>
<a class="editcontact" id="edit_'.$rrow['contact_id'].'" href="#">edit</a>
/
<a class="delcontact" id="del_'.$rrow['contact_id'].'" href="#">del</a>
<div id="editThisContact_'.$rrow['contact_id'].'" style="display:none">
<form name="editForm" onsubmit="return false;">
<p class="instructions">Edit contact information:</p>
First Name:<span style="padding:0 20px;">Last Name:</span><br />
<input type="hidden" id="fn_'.$rrow['contact_id'].'" value="'.$rrow['first_name'].'">
<input type="hidden" id="ln_'.$rrow['contact_id'].'" value="'.$rrow['last_name'].'">
Email:<span style="padding:0 20px;">Cell Phone:</span><br />
<input type="hidden" id="em_'.$rrow['contact_id'].'" value="'.$rrow['email1'].'">
<input type="hidden" id="cp_'.$rrow['contact_id'].'" value="'.$rrow['cell_phone'].'">
</form>
</div>
</td>
</tr>
';
}
$r .= '</table>';
return $r;
}
jQuery를 - document.click 이벤트 - 삽입 된 코드가없는 경우, 어떻게 선택기를 찾을 수있다?
$(document).on('click', '.editcontact', function(event) {
var contact_id = this.id.split('edit_')[1];
var etc = $('#editThisContact_' + contact_id);
etc.dialog("open");
});
UPDATE - 부분적인 해결책 :
대화가 지금 나타나고있다 - 취소 버튼을은 this post 당, 장소에서였다. 그러나 주입 된 코드는 사라졌습니다. 아무 것도 바뀌지 않았습니다. 취소 버튼을 배치 할 때 구문 오류를 수정하여 대화 코드를 작동 시켰습니다. 및 필드 레이블 텍스트 "에 대한 편집 연락처 정보"에서 오는 - 대화 코드 앞에 주입 마크 업의
스크린 샷 대화없는 입력 필드의 injected markup before dialog code worked http://bluecoonmedia.com/so_query.jpg
스크린 샷을했다?injected markup after dialog code working http://bluecoonmedia.com/so_query_new.jpg
제안 : 대화 상자가 여러 개 없어야합니다. 하나의 JSON 객체 배열에 모든 데이터를 저장하십시오. 이 양식을 사용하여 양식을 작성하고 테이블을 그릴 수 있습니다 (필요에 따라 다름). –
어떻게 생겼습니까? 온라인 예제 나 튜토리얼을 가르쳐 주시겠습니까? 아직 JSON obj 배열로 작업하지 않았으므로 개념적으로 솔루션을 구상 할 수 없습니다. – gibberish