rendered paste body===============
XML RESPONSE
==============
<?xml version="1.0" encoding="utf-8" ?>
<responses>
<response>
<id>address-22</id>
<error>false</error>
<html>
<![CDATA[
<tr id="address-22" class="field-value">
<td align="left" valign="middle">
Business</td>
<td align="left" valign="middle">
Test</td>
<td align="left" valign="middle">
Test</td>
<td align="left" valign="middle">
ST</td>
<td align="left" valign="middle">
000000</td>
<td align="left" valign="middle">
<a href="/ajax.php?action=ajax_update_address&contact_id=5&modify_id=22" id="address-22-modify" class="address-modify">Modify</a></td>
</tr>
]]>
</html>
</response>
</responses>
======================
jQuery STRUCTURE
======================
$(document).ready(function() {
$("#add_address_form")
.jqDrag('.jq-drag')
.jqResize('.jq-resize')
.jqm({trigger: '#open_add_address_form', closeClass: 'jqm-close', overlay: 0,
onShow: function(h) {
h.w.slideDown();
},
onHide: function(h) {
h.w.slideUp("slow", function() { if (h.o) h.o.remove(); });
}
});
$(".address-modify").click(function() {
$.ajax({
type: "GET",
url: this.href,
dataType: "xml",
success: function(xml) {
$("/addresses/address", xml).each(function(i) {
if ($("error", xml).text() == 'false') {
$("#address_update_container").html($("html", $(this)).text());
}
});
}
});
modify_id = $(this).attr('id');
modify_id = modify_id.replace(/.*-(\d+)(?:-modify)?/g, "$1");
$("#updateAddress input[@name=modify_id]").attr({value: modify_id});
$("#delete_address_button").attr({href: "/ajax.php?action=ajax_process_delete_address&contact_id=5&modify_id=" + modify_id});
return false;
});
$("#addAddress").submit(function() {
var inputs = [];
$(':input', this).each(function() {
inputs.push(this.name + '=' + escape(this.value));
});
$(this).parent().jqmHide();
$.ajax({
type: "POST",
url: this.action,
timeout: 5000,
dataType: "xml",
data: inputs.join('&'),
success: function(xml) {
$("#address-none").remove();
$("/responses/response", xml).each(function(i) {
id_name = "#" + $("id", $(this)).text();
html = $("html", $(this)).text();
$(html).appendTo('#address_container');
alert('ID: ' + id_name + "\n" + 'Length: ' + $(id_name).length + "\n" + 'ID: ' + $(id_name).attr('id'));
$(id_name).highlightFade({start: 'yellow', speed: 1500});
if ($("error", xml).text() == 'true') {
setTimeout(function() {
$(id_name).fadeOut(2000);
}, 2500);
}
});
}
});
return false;
});
});
========================
HTML STRUCTURE
========================
<div style="position: absolute; margin: 0 0 0 200px;">
<div id="add_address_form" class="jqm-add-form jqm-add-form-large">
<form action="/ajax.php?action=ajax_process_add_address" method="post" name="addAddress" id="addAddress">
<input type="hidden" name="formSubmit" value="TRUE" />
<input type="hidden" name="contact_id" value="5" />
<div class="jqmn-title jq-drag">
<h2>New Address</h2>
</div>
<div class="jqmn-content">
<table width="100%" cellspacing="1" cellpadding="0" align="center" border="0">
<tr>
<td align="left" valign="middle" class="field-heading">
<strong>Description</strong></td>
<td align="left" valign="middle" class="field-heading">
<strong>Address 1</strong></td>
<td align="left" valign="middle" class="field-heading">
<strong>Address 2</strong></td>
<td align="left" valign="middle" class="field-heading">
<strong>City</strong></td>
<td align="left" valign="middle" class="field-heading">
<strong>State</strong></td>
<td align="left" valign="middle" class="field-heading">
<strong>Zipcode</strong></td>
<td align="left" valign="middle" class="field-heading">
<strong>Country</strong></td>
</tr>
<tr>
<td align="left" valign="middle" class="field-value">
<select name="description" id="description"><option value="Business">Business</option><option value="Postal">Postal</option><option value="Residence">Residence</option></select></td>
<td align="left" valign="middle" class="field-value">
<input type="text" name="address_1" id="address_1" value="" style="width: 120px;" /></td>
<td align="left" valign="middle" class="field-value">
<input type="text" name="address_2" id="address_2" value="" style="width: 120px;" /></td>
<td align="left" valign="middle" class="field-value">
<input type="text" name="city" id="city" value="" style="width: 100px;" /></td>
<td align="left" valign="middle" class="field-value">
<input type="text" name="state" id="state" value="" style="width: 25px;" /></td>
<td align="left" valign="middle" class="field-value">
<input type="text" name="zipcode" id="zipcode" value="" style="width: 50px;" /></td>
<td align="left" valign="middle" class="field-value">
<input type="text" name="country" id="country" value="" style="width: 120px;" /></td>
</tr>
</table>
<br />
<input type="submit" name="submit" value="Add Address" />
</div>
<img src="/policybase/images/icons/close_icon.png" alt="close" class="jqm-close" />
<img src="/policybase/images/icons/resize.gif" alt="resize" class="jq-resize" />
</form>
</div>
</div>
... A while later....
<span class="table-heading">Address</span> - <a href="#" id="open_add_address_form">Add Address</a><br />
<table width="100%" cellspacing="1" cellpadding="0" align="center" border="0" id="address_container">
<tr>
<td width="80" align="left" valign="middle" class="field-heading">
<strong>Description</strong></td>
<td align="left" valign="middle" class="field-heading">
<strong>Address 1</strong></td>
<td align="left" valign="middle" class="field-heading">
<strong>City</strong></td>
<td align="left" valign="middle" class="field-heading">
<strong>State</strong></td>
<td align="left" valign="middle" class="field-heading">
<strong>Zipcode</strong></td>
<td width="30" align="left" valign="middle" class="field-heading">
<strong>Modify</strong></td>
</tr>
</table>
$(document).ready(function() {
});