PHP/MySQLを介して入力された連絡先のテーブルがあります。各連絡先は独自の行にあり、そのクラス名は「line」に行番号を加えたものです（例：「line01」または「line02」）。
新しい連絡先の追加、現在の連絡先の編集、連絡先の削除に使用しているjQueryモーダルダイアログがあります。私は.replaceWith()編集と.append();新しい連絡先の追加に使用しています。ここでの私の課題は、編集機能を正しく機能させて、編集中の<div>行のみを置き換え、すべての行を置き換えることではないようにすることです。
置換する特定の要素を選択するにはどうすればよいですか、または置換される行が編集中の行と同じIDを持っていることを確認するにはどうすればよいですか？十分に単純なはずですが、正しく機能させることができませんでした。ヘルプをいただければ幸いです。
これが私がこれまでに持っているコードです：
$("#contact-dialog").dialog({
autoOpen: false,
width: 600,
modal: true,
buttons: {
"Add Contact": function() {
var bValid = true;
allFields.removeClass( "ui-state-error" );
bValid = bValid && checkLength( contact_first_name, "first name", 2, 64 );
bValid = bValid && checkLength( contact_last_name, "last name", 2, 64 );
bValid = bValid && checkLength( title, "title", 1, 64 );
bValid = bValid && checkLength( phone, "phone", 6, 30 );
bValid = bValid && checkLength( email_address, "email_address", 5, 128 );
/* Handle edit function */
if (crow.val().length > 0) {
if ( bValid ) {
if (contact_count % 2) {
//$( "#contacts" ).html(
// '<div class="line'+contact_count+'">' +
$('.line'+contact_count).replaceWith(
'<div class="action gray">' +
'<a href="javascript:edit_contact('+contact_count+');"><img src="images/icons/edit.png" width="15" height="16" border="0" /></a>' +
'<a href="javascript:delete_contact('+contact_count+');"><img src="images/icons/trash.png" width="11" height="16" border="0" /></a>' +
'</div>' +
'<div class="contact gray"><input type="hidden" id="contact-first-name'+contact_count+'" name="contact_first_name[]" value="'+contact_first_name.val()+'" />' +
'<input type="hidden" id="contact-last-name'+contact_count+'" name="contact_last_name[]" value="'+contact_last_name.val()+'" />'+contact_first_name.val()+' '+contact_last_name.val()+'</div>' +
'<div class="phone gray"><input type="hidden" id="cphone'+contact_count+'" name="cphone[]" value="'+phone.val()+'" />'+phone.val()+'</div>' +
'<div class="email gray"><input type="hidden" id="email-address'+contact_count+'" name="email_address[]" value="'+email_address.val()+'" />'+email_address.val()+'</div>' +
'<div class="primary gray"><input type="radio" id="primary'+contact_count+'" name="primary[]" value="1" /></div>' +
'<input type="hidden" id="twitter'+contact_count+'" name="twitter[]" value="'+twitter.val()+'" />' +
'<input type="hidden" id="facebook'+contact_count+'" name="facebook[]" value="'+facebook.val()+'" />' +
'<input type="hidden" id="linkedin'+contact_count+'" name="linkedin[]" value="'+linkedin.val()+'" />' +
'<input type="hidden" id="title'+contact_count+'" name="title[]" value="'+title.val()+'" />' +
'</div>' +
'<div class="clear"></div>');
$( this ).dialog( "close" );
}
else {
//$( "#contacts" ).html(
// '<div class="line'+contact_count+'">' +
$('.line'+contact_count).replaceWith(
'<div class="action">' +
'<a href="javascript:edit_contact('+contact_count+');"><img src="images/icons/edit.png" width="15" height="16" border="0" /></a>' +
'<a href="javascript:delete_contact('+contact_count+');"><img src="images/icons/trash.png" width="11" height="16" border="0" /></a>' +
'</div>' +
'<div class="contact"><input type="hidden" id="contact-first-name'+contact_count+'" name="contact_first_name[]" value="'+contact_first_name.val()+'" />' +
'<input type="hidden" id="contact-last-name'+contact_count+'" name="contact_last_name[]" value="'+contact_last_name.val()+'" />'+contact_first_name.val()+' '+contact_last_name.val()+'</div>' +
'<div class="phone"><input type="hidden" id="cphone'+contact_count+'" name="cphone[]" value="'+phone.val()+'" />'+phone.val()+'</div>' +
'<div class="email"><input type="hidden" id="email-address'+contact_count+'" name="email_address[]" value="'+email_address.val()+'" />'+email_address.val()+'</div>' +
'<div class="primary"><input type="radio" id="primary'+contact_count+'" name="primary[]" value="1" /></div>' +
'<input type="hidden" id="twitter'+contact_count+'" name="twitter[]" value="'+twitter.val()+'" />' +
'<input type="hidden" id="facebook'+contact_count+'" name="facebook[]" value="'+facebook.val()+'" />' +
'<input type="hidden" id="linkedin'+contact_count+'" name="linkedin[]" value="'+linkedin.val()+'" />' +
'<input type="hidden" id="title'+contact_count+'" name="title[]" value="'+title.val()+'" />' +
'</div><div class="clear"></div>');
$( this ).dialog( "close" );
}
contact_count++;
}
}
/* Handle new contact rows */
else if ( bValid ) {
if (contact_count % 2) {
$( "#contacts" ).append(
'<div class="line'+contact_count+'">' +
'<div class="action gray">' +
'<a href="javascript:edit_contact('+contact_count+');"><img src="images/icons/edit.png" width="15" height="16" border="0" /></a>' +
'<a href="javascript:delete_contact('+contact_count+');"><img src="images/icons/trash.png" width="11" height="16" border="0" /></a>' +
'</div>' +
'<div class="contact gray"><input type="hidden" id="contact-first-name'+contact_count+'" name="contact_first_name[]" value="'+contact_first_name.val()+'" />' +
'<input type="hidden" id="contact-last-name'+contact_count+'" name="contact_last_name[]" value="'+contact_last_name.val()+'" />'+contact_first_name.val()+' '+contact_last_name.val()+'</div>' +
'<div class="phone gray"><input type="hidden" id="cphone'+contact_count+'" name="cphone[]" value="'+phone.val()+'" />'+phone.val()+'</div>' +
'<div class="email gray"><input type="hidden" id="email-address'+contact_count+'" name="email_address[]" value="'+email_address.val()+'" />'+email_address.val()+'</div>' +
'<div class="primary gray"><input type="radio" id="primary'+contact_count+'" name="primary[]" value="1" /></div>' +
'<input type="hidden" id="twitter'+contact_count+'" name="twitter[]" value="'+twitter.val()+'" />' +
'<input type="hidden" id="facebook'+contact_count+'" name="facebook[]" value="'+facebook.val()+'" />' +
'<input type="hidden" id="linkedin'+contact_count+'" name="linkedin[]" value="'+linkedin.val()+'" />' +
'<input type="hidden" id="title'+contact_count+'" name="title[]" value="'+title.val()+'" />' +
'</div><div class="clear"></div>');
$( this ).dialog( "close" );
} else {
$( "#contacts" ).append(
'<div class="line'+contact_count+'">' +
'<div class="action">' +
'<a href="javascript:edit_contact('+contact_count+');"><img src="images/icons/edit.png" width="15" height="16" border="0" /></a>' +
'<a href="javascript:delete_contact('+contact_count+');"><img src="images/icons/trash.png" width="11" height="16" border="0" /></a>' +
'</div>' +
'<div class="contact"><input type="hidden" id="contact-first-name'+contact_count+'" name="contact_first_name[]" value="'+contact_first_name.val()+'" />' +
'<input type="hidden" id="contact-last-name'+contact_count+'" name="contact_last_name[]" value="'+contact_last_name.val()+'" />'+contact_first_name.val()+' '+contact_last_name.val()+'</div>' +
'<div class="phone"><input type="hidden" id="cphone'+contact_count+'" name="cphone[]" value="'+phone.val()+'" />'+phone.val()+'</div>' +
'<div class="email"><input type="hidden" id="email-address'+contact_count+'" name="email_address[]" value="'+email_address.val()+'" />'+email_address.val()+'</div>' +
'<div class="primary"><input type="radio" id="primary'+contact_count+'" name="primary[]" value="1" /></div>' +
'<input type="hidden" id="twitter'+contact_count+'" name="twitter[]" value="'+twitter.val()+'" />' +
'<input type="hidden" id="facebook'+contact_count+'" name="facebook[]" value="'+facebook.val()+'" />' +
'<input type="hidden" id="linkedin'+contact_count+'" name="linkedin[]" value="'+linkedin.val()+'" />' +
'<input type="hidden" id="title'+contact_count+'" name="title[]" value="'+title.val()+'" />' +
'</div><div class="clear"></div>');
$( this ).dialog( "close" );
}
contact_count++;
}
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});
編集：これがのためのコードですedit_contact()：
function edit_contact(contact_line, cid) {
// $('#contact-dialog-link').val('edit');
$('#contact-dialog-id').val(cid);
$('#contact-first-name').val($('.line'+contact_line+' #contact-first-name'+contact_line).val());
$('#contact-last-name').val($('.line'+contact_line+' #contact-last-name'+contact_line).val());
$('#title').val($('.line'+contact_line+' #title'+contact_line).val());
$('#cphone').val($('.line'+contact_line+' #cphone'+contact_line).val());
$('#email-address').val($('.line'+contact_line+' #email-address'+contact_line).val());
$('#twitter').val($('.line'+contact_line+' #twitter'+contact_line).val());
$('#facebook').val($('.line'+contact_line+' #facebook'+contact_line).val());
$('#linkedin').val($('.line'+contact_line+' #linkedin'+contact_line).val());
$('#contact-update').val(contact_line);
$('#contact-dialog-link').trigger('click');
}
編集：保存機能を処理するPHPは次のとおりです。
if ($_POST && $_POST['type'] == 'add-to-contacts') {
$fid = $_SESSION['facility_current'];
if ($_POST['input'] == 'edit') {
// if ($_POST['contact-update'] == ''){
$dbQuery = sprintf("UPDATE facility_contacts SET fid=%d, first_name='%s', last_name='%s', title='%s', phone='%s', email_address='%s', twitter='%s', facebook='%s', linkedin='%s' WHERE cid = %d;", $fid,$_POST['first_name'],$_POST['last_name'],$_POST['title'],$_POST['phone'],$_POST['email_address'],$_POST['twitter'],$_POST['facebook'],$_POST['linkedin'],$_POST['cid']);
} else {
$dbQuery = sprintf("INSERT INTO facility_contacts (fid, first_name, last_name, title, phone, email_address, twitter, facebook, linkedin) VALUES (%d,'%s','%s','%s','%s','%s','%s','%s','%s');", $fid,$_POST['first_name'],$_POST['last_name'],$_POST['title'],$_POST['phone'],$_POST['email_address'],$_POST['twitter'],$_POST['facebook'],$_POST['linkedin']);
}
$dbResult = $dbc->query($dbQuery,__FILE__,__LINE__);
unapprove_proof_status();
echo ($dbResult) ? true : false;
exit;
}