1
私はajaxを使用して作成したページを読み込もうとしていますが、これはすべて正常に読み込まれます。私がダイアログにロードするページには、表示されるフォームの更新ボタンがあるという問題があります。このボタンは、更新を実行せずにページImにリダイレクトするだけで機能しません。独立したページボタンAjax機能
ダイアログにロードされたページを、それに含まれるボタンで処理する特別な方法はありますか？
これは私が望むページを読み込んで動作させる私のajaxリクエストです。
$('[data-label="button_edit"]').bind('click', function(){
temp = $(this).attr('id');
contact_id = temp.split('-');
$.ajax({
type: 'post',
url: 'admin/contacts/add-edit.php?fk_pivot_table=&fk_pivot_id=&contact_id='+ contact_id[1] + '&form_only=true' ,
success:(function(data) {
$('#edit_contact_form').html(data).dialog({
width: 1500,
height: 700
});
})
});
return false;
});
<td data-label="form_only" class="-left-side">
<form action="" method="post" name="form" id="form">
<span data-label="footprint_alerts">footprint_alerts</span>
<table class="span-17 -form">
<thead>
<tr>
<th colspan="2">Contact Information</th>
</tr>
</thead>
<tbody>
<tr>
<td class="-field-label" width="120">Is Default:</td>
<td class="-field">
<select size="1" data-field="is_default" name="is_default">
<option value="yes">yes</option>
<option value="no">no</option>
</select>
</td>
</tr>
<tr>
<td class="-field-label -required">Contact Method:</td>
<td class="-field">
<select name="method" data-field="method">
<option value="">-- Select a Contact Method --</option>
<option value="phone">Phone</option>
<option value="email">E-Mail</option>
<option value="form">Form</option>
</select>
</td>
</tr>
<tr>
<td class="-field-label">Email Address:</td>
<td class="-field">
<input type="text" value="" maxlength="128" size="30" name="email" data-field="email" />
<div data-label="email_container"></div>
</td>
</tr>
<tr>
<td class="-field-label">Email Address Alt:</td>
<td class="-field">
<input type="text" value="" size="30" name="email_alt" data-field="email_alt" /><br/>
<small class="-lite">This field accepts comma separated e-mail address lists. (ie. [email protected], [email protected], [email protected])</small>
<div data-label="email_alt_container"></div>
</td>
</tr>
<tr>
<td class="-field-label">URL:</td>
<td class="-field">
<input type="text" value="" maxlength="1024" size="45" name="url" data-field="url" />
<div data-label="url_container"></div>
</td>
</tr>
<tr>
<td class="-field-label">URL Alt:</td>
<td class="-field">
<input type="text" value="" maxlength="1024" size="45" name="url_alt" data-field="url_alt" />
<div data-label="url_alt_container"></div>
</td>
</tr>
<tr>
<td class="-field-label">Job Title:</td>
<td class="-field">
<input type="text" value="" maxlength="45" size="20" name="job_title" data-field="job_title" />
<div data-label="job_title_container"></div>
</td>
</tr>
<tr>
<td class="-field-label">Company Name:</td>
<td class="-field">
<input type="text" value="" maxlength="45" size="25" name="name_company" data-field="name_company" />
<div data-label="name_company_container"></div>
</td>
</tr>
<tr>
<td class="-field-label -required">First Name:</td>
<td class="-field">
<input type="text" value="" maxlength="45" size="25" name="name_first" data-field="name_first" />
<div data-label="name_first_container"></div>
</td>
</tr>
<tr>
<td class="-field-label">Middle Name:</td>
<td class="-field">
<input type="text" value="" maxlength="45" size="25" name="name_middle" data-field="name_middle" />
<div data-label="name_middle_container"></div>
</td>
</tr>
<tr>
<td class="-field-label -required">Last Name:</td>
<td class="-field">
<input type="text" value="" maxlength="45" size="25" name="name_last" data-field="name_last" />
<div data-label="name_last_container"></div>
</td>
</tr>
<tr>
<td class="-field-label">Phone:</td>
<td class="-field">
<input type="text" value="" maxlength="20" size="20" name="phone" data-field="phone" />
<div data-label="phone_container"></div>
</td>
</tr>
<tr>
<td class="-field-label">Phone Alt.:</td>
<td class="-field">
<input type="text" value="" maxlength="20" size="20" name="phone_alt" data-field="phone_alt" />
<div data-label="phone_alt_container"></div>
</td>
</tr>
<tr>
<td class="-field-label">Address:</td>
<td class="-field">
<input type="text" value="" maxlength="45" size="25" name="address" data-field="address" />
<div data-label="address_container"></div>
</td>
</tr>
<tr>
<td class="-field-label">Address 2:</td>
<td class="-field">
<input type="text" value="" maxlength="45" size="25" name="address_alt" data-field="address_alt" />
<div data-label="address_alt_container"></div>
</td>
</tr>
<tr>
<td class="-field-label">City:</td>
<td class="-field">
<input type="text" value="" maxlength="45" size="25" name="city" data-field="city" />
<div data-label="city_container"></div>
</td>
</tr>
<tr>
<td class="-field-label">Zip:</td>
<td class="-field">
<input type="text" value="" maxlength="10" size="10" name="zip" data-field="zip" />
<div data-label="zip_container"></div>
</td>
</tr>
<tr>
<td class="-label"> </td>
<td class="-field">
<input type="submit" data-field="button_new" value="Create New" name="action" class="-alt"/>
<input type="submit" value="Update" name="action" data-field="button_update" />
<input type="submit" value="Delete" name="action" data-field="button_delete" />
</td>
</tr>
</tbody>
</table>
</form>
</td>
-Edit-私は私が持っていた問題への解決策を見つけたとボタンがスタンドアロンのページで動作していることの情報に基づいて
$('[data-label="button_edit"]').bind('click', function(){
temp = $(this).attr('id');
contact_id = temp.split('-');
$.ajax({
type: 'post',
url: 'admin/contacts/add-edit.php?fk_pivot_table=&fk_pivot_id=&contact_id='+ contact_id[1] + '&form_only=true' ,
success:(function(data) {
contactForm = $('#edit_contact_form_container').html(data);
$('#contact_form').find('[data-field="button_update"]').css('visibility','hidden');
$('#contact_form').bind('submit', function(){
$.post('admin/contacts/add-edit.php?fk_pivot_table=&fk_pivot_id=&contact_id='+ contact_id[1] + '&form_only=true&action=Update Contact',$('#contact_form').serialize());
contactForm.dialog('close');
});
contactForm.dialog({
width: 700,
height: 700,
title: 'Edit Contact Information',
buttons: {
"Go To Contacts Page": function(){
location.href='admin/contacts/add-edit.php?fk_pivot_table=&fk_pivot_id=&contact_id=' + contact_id[1];
},
"Update Contact": function(){
$.post('admin/contacts/add-edit.php?fk_pivot_table=&fk_pivot_id=&contact_id='+ contact_id[1] + '&form_only=true&action=Update Contact',$('#contact_form').serialize());
contactForm.dialog('close');
window.location.reload();
}
}
});
})
});
return false;
});
を指しますが、ダイアログボックスを作成するのと同じAjaxの成功内の同じスクリプトを呼び出す（ダイアログで新しいHTMLをロードした後）、またはロードされたページのスクリプトタグは、HTMLのaferであることを確認することができますフォームボタンから探している動作。 AJAX？ – charlietfl
申し訳ありませんが私は明確でない場合。基本的に私が今働いているのは、別のPHPページから得られるダイアログボックスの中に現れるフォームです。問題は、ダイアログボックス内に表示されるフォームは、他のページのボタンがありますが、いずれかのボタンをクリックすると、どのタイプの機能も実行しません。それらのボタンは別のPHPページで動作することに注意してください。だから私はどのように私は現在のページ上でそのボタンを動作させることができますか？ – Novazero
提供したコードにボタンが表示されません。質問に答えるために必要なコードをすべて投稿してください。 – Paul