Losing jQuery functionality after postback
- by David Lozzi
I have seen a TON of people reporting this issue online, but no actual solutions. I'm not using AJAX or updatepanels, just a dropdown that posts back on selected index change. My HTML is
<div id="myList">
<table id="ctl00_PlaceHolderMain_dlFields" cellspacing="0" border="0" style="border-collapse:collapse;">
<tr>
<td>
<tr>
<td class="ms-formlabel" style="width: 175px; padding-left: 10px">
<span id="ctl00_PlaceHolderMain_dlFields_ctl00_lblDestinationField">Body</span>
</td>
<td class="ms-formbody" style="width: 485px">
<input name="ctl00$PlaceHolderMain$dlFields$ctl00$txtSource" type="text" id="ctl00_PlaceHolderMain_dlFields_ctl00_txtSource" class="ms-input" style="width:230px" />
<select name="ctl00$PlaceHolderMain$dlFields$ctl00$ddlSourceFields" id="ctl00_PlaceHolderMain_dlFields_ctl00_ddlSourceFields" class="ms-input">
<option value="Some Field Name 1">Some Field Name 1</option>
<option value="Some Field Name 2">Some Field Name 2</option>
<option value="Some Field Name 3">Some Field Name 3</option>
<option value="Some Field Name 4">Some Field Name 4</option>
</select>
<a href="#" id="appendSelect">append</a>
</td>
</tr>
</td>
</tr><tr>
<td>
<tr>
<td class="ms-formlabel" style="width: 175px; padding-left: 10px">
<span id="ctl00_PlaceHolderMain_dlFields_ctl01_lblDestinationField">Expires</span>
</td>
<td class="ms-formbody" style="width: 485px">
<input name="ctl00$PlaceHolderMain$dlFields$ctl01$txtSource" type="text" id="ctl00_PlaceHolderMain_dlFields_ctl01_txtSource" class="ms-input" style="width:230px" />
<select name="ctl00$PlaceHolderMain$dlFields$ctl01$ddlSourceFields" id="ctl00_PlaceHolderMain_dlFields_ctl01_ddlSourceFields" class="ms-input">
<option value="Some Field Name 1">Some Field Name 1</option>
<option value="Some Field Name 2">Some Field Name 2</option>
<option value="Some Field Name 3">Some Field Name 3</option>
<option value="Some Field Name 4">Some Field Name 4</option>
</select>
<a href="#" id="appendSelect">append</a>
</td>
</tr>
</td>
</tr><tr>
<td>
<tr>
<td class="ms-formlabel" style="width: 175px; padding-left: 10px">
<span id="ctl00_PlaceHolderMain_dlFields_ctl02_lblDestinationField">Title</span>
</td>
<td class="ms-formbody" style="width: 485px">
<input name="ctl00$PlaceHolderMain$dlFields$ctl02$txtSource" type="text" id="ctl00_PlaceHolderMain_dlFields_ctl02_txtSource" class="ms-input" style="width:230px" />
<select name="ctl00$PlaceHolderMain$dlFields$ctl02$ddlSourceFields" id="ctl00_PlaceHolderMain_dlFields_ctl02_ddlSourceFields" class="ms-input">
<option value="Some Field Name 1">Some Field Name 1</option>
<option value="Some Field Name 2">Some Field Name 2</option>
<option value="Some Field Name 3">Some Field Name 3</option>
<option value="Some Field Name 4">Some Field Name 4</option>
</select>
<a href="#" id="appendSelect">append</a>
</td>
</tr>
</td>
</tr>
</table></div>
The above Div tag is static, and the table is generated from a DataList object. On postback the datalist reloads using a new dataset, for example
<div id="myList">
<table id="ctl00_PlaceHolderMain_dlFields" cellspacing="0" border="0" style="border-collapse:collapse;">
<tr>
<td>
<tr>
<td class="ms-formlabel" style="width: 175px; padding-left: 10px">
<span id="ctl00_PlaceHolderMain_dlFields_ctl00_lblDestinationField">Notes</span>
</td>
<td class="ms-formbody" style="width: 485px">
<input name="ctl00$PlaceHolderMain$dlFields$ctl00$txtSource" type="text" id="ctl00_PlaceHolderMain_dlFields_ctl00_txtSource" class="ms-input" style="width:230px" />
<select name="ctl00$PlaceHolderMain$dlFields$ctl00$ddlSourceFields" id="ctl00_PlaceHolderMain_dlFields_ctl00_ddlSourceFields" class="ms-input">
<option value="Some Field Name 1">Some Field Name 1</option>
<option value="Some Field Name 2">Some Field Name 2</option>
<option value="Some Field Name 3">Some Field Name 3</option>
<option value="Some Field Name 4">Some Field Name 4</option>
</select>
<a href="#" id="appendSelect">append</a>
</td>
</tr>
</td>
</tr><tr>
<td>
<tr>
<td class="ms-formlabel" style="width: 175px; padding-left: 10px">
<span id="ctl00_PlaceHolderMain_dlFields_ctl01_lblDestinationField">URL</span>
</td>
<td class="ms-formbody" style="width: 485px">
<input name="ctl00$PlaceHolderMain$dlFields$ctl01$txtSource" type="text" id="ctl00_PlaceHolderMain_dlFields_ctl01_txtSource" class="ms-input" style="width:230px" />
<select name="ctl00$PlaceHolderMain$dlFields$ctl01$ddlSourceFields" id="ctl00_PlaceHolderMain_dlFields_ctl01_ddlSourceFields" class="ms-input">
<option value="Some Field Name 1">Some Field Name 1</option>
<option value="Some Field Name 2">Some Field Name 2</option>
<option value="Some Field Name 3">Some Field Name 3</option>
<option value="Some Field Name 4">Some Field Name 4</option>
</select>
<a href="#" id="appendSelect">append</a>
</td>
</tr>
</td>
</tr>
</table></div>
After the postback and the datalist is reloaded, my JQuery doesn't work anymore. No errors, nothing. I don't see any actual changes in the objects in the HTML that should cause this. How do I fix this? Any workarounds or bandaides I can apply? My JQuery is below
<script type='text/javascript'>
$(document).ready(function () {
$('#myList a').live("click", function () {
var $selectValue = $(this).siblings('select').val();
var $thatInput = $(this).siblings('input');
var val = $thatInput.val() + ' |[' + $selectValue + ']|';
$thatInput.val(jQuery.trim(val));
})
});
</script>
Thanks!!
