Im trying to load a page I created using ajax, which loads fine and all. The problem Im having is that the page I load into the dialog has an update button in its form it displays. That button doesn’t work since it just redirects to the page Im on without performing the update.
Is there some special way to handle a page loaded in the dialog with the buttons it contains.
This is my ajax request that works and loads the page I wanted.
$('[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. john.smith@gmail.com, john.smith@yahoo.com, john.smith@hotmail.com)</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- I found a solution to the problem I was having and felt like sharing it
$('[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;
});
Based on info that buttons work on standalone page. If they have script on standalone, the ready event has already occured on main page where dialog is, so if script is not loading after the new html it will fire prematurely.
You can call the same script within the same ajax success where you create dialog ( after you load new html in dialog) or make sure the script tag on loaded page is afer the html it refers to