I have a bit of simple created with XAJAX, which replaces the innner HTML of a select control with some options created by a php script.
This is fine and dandy in Firefox, but it does not work in IE7.
Looking on the XAJAX forums i found this which basically says " doesnt really work in IE, use a div and replace the inner HTML of that with the full select statement"
Did this, and it's fine, except that i had a jQuery selector working on the select control, which now no longer works.
Anyone got any ideas, or can anyone point me to a good jQuery example of how to do the ajax bit using jQuery, so I can ditch the XAJAX altogether?
<div id=imgselect>
<select id="images">
<option value="">Then select an image</option>
</select>
</div>
Picture Preview:<br><br>
<div class="img-preview" id='preview'></div>
<script type='text/javascript'>
$('#images').change(function()
{
var image = $(this).val();
var img = $('<img/>').attr('src', image);
$('#preview').html(img);
document.getElementById('picsmall').value = image;
});
</script>
The problem comes when the contents of the imgselect
div
is replaced by the AJAX call
This is now solved using the
$objResponse->script
command
For the sake of completeness and if anyone wants to see in the future, I have the original page set up as above:
<div id=imgselect>
<select id="images">
<option value="">Then select an image</option>
</select>
</div>
then in my xajax php file I have
function getphotos()
{
$objResponse = new xajaxResponse();
//this include assigns all the options to the select controll into the $output var
include "photos.photosselect.php";
$objResponse->assign("imgselect", "innerHTML", "$output");
$objResponse->script("$('#images').change(function() {var image = $(this).val(); var img = $('<img/>').attr('src', image); $('#preview').html(img); document.getElementById('picsmall').value = image;});");
return $objResponse;
}