Changing the ALT value of an image using jQuery
I have a modal form that changes the title of the photo (paragraph below the image) and I also try to change the ALT attribute of the image, but I can't seem to show.
Here is jQuery, I am trying to make it work
$(".edit").click(function() {
var parent = $(this).parents('.item');
var caption = $(parent).find('.labelCaption').html();
$("#photoCaption").val(caption);
$("#editCaptionDialog").dialog({
width: 450,
bgiframe: true,
resizable: false,
modal: true,
title: 'Edit Caption',
overlay: {
backgroundColor: '#000',
opacity: 0.5
},
buttons: {
'Edit': function() {
var newCaption = $("#photoCaption").val();
$(parent).find(".labelCaption").html(newCaption);
$(parent).find('img').attr('alt', newCaption);
}
}
});
return false;
});
And HTML
<li class="item ui-corner-all" id="photo<? echo $images['id'];?>">
<div>
<a href="http://tapp-essexvfd.org/gallery/photos/<?php echo $images['filename'];?>.jpg" class="lightbox" title="<?php echo $images['caption'];?>">
<img src="http://tapp-essexvfd.org/gallery/photos/thumbs/<?php echo $images['filename'];?>.jpg" alt="<?php echo $images['caption'];?>" class="photo ui-corner-all"/></a><br/>
<p><span class="labelCaption"><?php echo $images['caption'];?> </span></p>
<p><a href="edit_photo.php?filename=<?php echo $images['filename'];?>" class="button2 edit ui-state-default ui-corner-all">Edit</a></p>
</div>
</li>
The signature changes as it should.
thanks
UPDATE
Here is the code for editCaption
<div id="editCaptionDialog" style="display: none;">
<p><strong>Caption:</strong> <input type="text" name="photoCaption" id="photoCaption"/></p>
</div>
a source to share
This doesn't work because, for 2 reasons, look at Ben's answer to see if this is indeed the behavior you want. You are currently cloning a jQuery object, this line:
var parent = $(this).parents('.item');
Already returns a jQuery object, so by doing $(parent)
you are cloning it. From the docs:
jQuery(jQuery object)
- jQuery object - An existing jQuery object to clone.
To fix this, do the following:
parent.find(".labelCaption").html(newCaption);
parent.find('img').attr('alt', newCaption);
Also, I would change $(this).parents('.item');
to $(this).closest('.item');
to be more secure.
a source to share