I am selecting an image as part of a html form. Once selected, jQuery assigns a user-defined attribute of the image to a hidden form variable and passes it to form handler. Neat.
Problem is when I dynamically add images that can be selected. I am using live function to ensure that the dynamically added image is highlighted when clicked - but the user-defined attribute is not being grabbed by jQuery.
I think that when the page is first loaded, all the existing image attributes are loaded into the DOM, but when extra images are added with ajax, the DOM doesn't have the new attribute values, despite them appearing in the html on the page. I don't think I can use the live function in this instance, because an attribute is not an event. Out of ideas now. Anyone help?
HTML/PHP, with jQuery:
echo anchor_popup('gallery/addphoto', 'Add new image (opens in new window) »', $atts);?>
</p>
<?if (!empty($images)) {?>
<p class="smaller">
<?echo form_label('Image:', 'person_img');?>
<span id="new_image"></span>
<?$default = set_value('person_img', (isset($person_img)) ? $person_img : '');?>
<?$options = array();
foreach ($images as $key => $row):?>
<span><img src="img/thumbs/<?=$row['image_name']?>" alt="<?=$row['image_title']?>" image_id_val="<?=$row['image_name']?>" <?echo ($default == $row['image_name']) ? 'class="highlighted"' : 'class="faded"';?>></span>
<?endforeach;?>
<input type="hidden" id="person_img" name="person_img" value="<?=$default?>">
</p>
<?} else {?>
<p class="small">Sorry - no images have been uploaded yet</p>
<?}?>
<script>
// highlighting images in forms function
$(document).ready(function(){
loopimages();
});
function loopimages() {
// Image selection highlighting
$('img.faded').live('click', function() {
// Set the form value
$('#person_img').val($(this).attr('image_id_val'));
// Unhighlight all the images
$('form img').removeClass('highlighted').addClass('faded');
// Highlight the newly selected image
$(this).addClass('highlighted').removeClass('faded');
});
// Image de-selection highlighting
$('img.highlighted').live('click', function() {
// Set the form value
$('#person_img').val('');
// Unhighlight all the images
$('form img').removeClass('highlighted').addClass('faded');
});
// Get precise time on server
$('#img_popup').click(function() {
// Only call the ajax polling loop function if nothing in the new image span - i.e. first time of asking only to avoid multiple threads running and multiple images appearing if uploading lots of photos
if ($('#new_image').html().length == 0)
{
do_image();
}
});
}
function do_image() {
$.ajax({
url: "<?= site_url('ajax/time_now') ?>",
success: function(unix)
{
setTimeout( function()
{
$.ajax({
type: "POST",
url: "<?= site_url('ajax/image_check') ?>",
data: "unix=" + unix,
success: function(html)
{
$(html).prependTo("#new_image");
// Set the form value
$('#person_img').val($(this).attr('image_id_val'));
// Unhighlight all the images - unhighlights selected image on re-pass so commented out for now!
// $('form img').removeClass('highlighted').addClass('faded');
// Highlight the newly selected image
$(this).addClass('highlighted').removeClass('faded');
}
});
do_image();
}, 3000);
}
});
}
</script>AJAX Scripts:
function time_now()
{
$this->db->select_max('image_last_updated');
$query = $this->db->get('images');
if ($query->num_rows() > 0)
{
$result = $query->result_array();
$last_image_time = $result[0]['image_last_updated'];
echo $last_image_time;
}
}
function image_check()
{
$html = '';
$unix = $this->input->post('unix');
$this->db->where('image_last_updated >', $unix);
$query = $this->db->get('images');
if ($query->num_rows() > 0)
{
$result = $query->result_array();
foreach ($result as $row)
{
$html .= '<img class="faded" image_id_val="' . $row['image_name'] . '" alt="' . $row['image_title'] . '" src="img/thumbs/' . $row['image_name'] . '">';
}
}
echo $html;
}