How can I reload a specific html tag using jquery?

Question

I want to happen is that the class="profile-pic" will refresh/reload before or on the dialog closes because the image source changes.

This is my code:

$('.change-profile-pic').click(updateProfilePicture);
function updateProfilePicture(){
    $('#dialog').dialog({
        resizable:false,
        modal:true,
        width:225,
        buttons: {
            'Upload':function(){
                $('#upload-image').ajaxForm({ 
                        target: '.new-profile-pic'
                }).submit();
            },
            'Done':function(){
                $.ajax({
                    url: 'update-profile-pic.php',
                    type: 'post',
                    data: { file_path: $('.new-profile-pic img').attr('src') },
                    success: function(data) {
                        if(data == 'Success'){
                            $('#dialog').dialog('close');
                        }
                    }
                });
            }
        }
    });

HTML To be reloaded:

<p class="profile-pic ">
                    <a href="#"><img class="change-profile-pic ui-corner-all" src="<?php echo $user['user_profile_path']; ?>" alt=""></a>
                </p>

HTML form:

<div title="Change profile picture" id="dialog" class="dialog-change-profile-pic">
            <div class="new-profile-pic">

            </div>
            <form id="upload-image" enctype="multipart/form-data" action="upload-image.php" method="post">
                <input type="hidden" name="MAX_FILE_SIZE" value="100000">
                <input class="profile-pic-name" name="uploadedfile" type="file">
            </form>
        </div>

What exactly do you mean by 'reload'? What should happen with the element? — Asciiom
– Asciiom, Commented Sep 24, 2012 at 8:45

Sushanth -- · Accepted Answer · 2012-09-24 09:03:23Z

1

You can write up the close event function which fires as soon as the close event fires..

<p class="profile-pic ">
                    <a href="#"><img class="change-profile-pic ui-corner-all" src="<?php echo $user['user_profile_path']; ?>" alt=""></a>
                </p>

close: function(event, ui) { 
    // Change the src attribute here with the newer source.. That should do 
 }

You can also use the beforeClose event

beforeClose: function(event, ui) { 

}

edited Sep 24, 2012 at 9:03

answered Sep 24, 2012 at 8:45

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

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

Comments

Neil Kennedy · Accepted Answer · 2012-09-24 08:46:56Z

0

Why is the image src wrapped in a PHP tag? Couldn't that just be static HTML? Your browser most likely has the image cached so if the image changes on the server side and you just want to reload it then you could do something like

$('.goButton').click(function() {
    $('#loadThis' img)[0].src = 'resources/default-male.png?' + Math.random();
});

answered Sep 24, 2012 at 8:46

Neil Kennedy

6031 gold badge6 silver badges12 bronze badges

Collectives™ on Stack Overflow

How can I reload a specific html tag using jquery?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related