Changing an image's ALT value with jQuery

Question

I have a modal form that changes the caption of a photo (paragraph under the image) and I am also trying to change the image's ALT attribute but cannot seem to.

Here is the jQuery I am trying to make 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 the 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 caption is changing like 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>

Ben · Accepted Answer · 2010-04-28 02:09:47Z

1

Are you sure you're not trying to change the title attribute?, alt attribute cannot be seen without disabling images.

answered Apr 28, 2010 at 2:09

Ben

16.6k9 gold badges47 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nick Craver · Accepted Answer · 2010-04-28 02:10:10Z

0

This isn't working because, well 2 reasons, look at Ben's answer to see if this is the behavior you want in the first place. Currently you're cloning the jQuery object, this line:

var parent = $(this).parents('.item');

Already returns a jQuery object, so by doing $(parent) you're cloning it. From the docs:

jQuery(jQuery object) - jQuery object - An existing jQuery object to clone.

To fix it, instead do this:

parent.find(".labelCaption").html(newCaption);
parent.find('img').attr('alt', newCaption);

Also, I'd change $(this).parents('.item'); to $(this).closest('.item'); to be a bit safer.

answered Apr 28, 2010 at 2:10

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

5 Comments

NightMICU Over a year ago

I tried the above and the ALT does not change.. basically, I want the change to instantly show in jQuery Lightbox, which pulls its caption from the image's ALT attribute. The caption is also being changed on the database via Ajax.. only thing I can't get to work is the ALT..

Nick Craver Over a year ago

@Night - So the caption in lightbox is updating correctly already?

NightMICU Over a year ago

No, the caption in Lightbox and the ALT attribute (from which Lightbox draws the caption) are not changing with the above code

Nick Craver Over a year ago

@Night - Try changing this at the end: }); return false; to this: }).parent().appendTo(parent); return false; Currently your dialog moves to the end of the <body>, so the selector just doesn't find anything anymore, give it a shot, if that doesn't work please post the #editCaptionDialog html.

NightMICU Over a year ago

Hi Nick, that did not solve the problem, see update for requested HTML. It's a simple DIV.. may just give up on this problem. Very odd that it is not working

Collectives™ on Stack Overflow

Changing an image's ALT value with jQuery

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related