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, Sep 24 '12 at 08:45
Similar question: http://stackoverflow.com/questions/2104949/how-to-reload-refresh-an-elementimage-in-jquery Does that help? — Sabre Runner, Sep 24 '12 at 08:45

Sushanth -- · Answer 1 · 2012-09-24T09:03:23.887

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) { 

}

score 0 · Answer 2 · answered Sep 24 '12 at 08:46

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();
});

How can I reload a specific html tag using jquery?

2 Answers2