Question

Here’s what I’ve made so far:

// somewhere in the page code...
<img alt="" src="images/frame.png" onclick="uploadImage()" />

I have created a jQuery script:

// in the head section of the page...
<script type="text/javascript">
    $('#uploadContactImage').dialog({
        title: 'Change contact image',
        buttons: {
            "Upload new image": function() {
                $(this).dialog("close");
            },
            "Remove current image": function() {
                $(this).dialog("close");
            },
            "Cancel": function() {
                $(this).dialog("close");
            }
        }
    });
</script>

Finally, I have a javascript file with the empty function:

function uploadImage() {
}

The use case should be: User clicks the image, the dialog pops up. Based on the button the user has clicked, certain functions should be called.

Please note that my image tag is generated through AJAX, i.e. the jQuery script is not connected to it. That’s the first problem.

The second problem is that I don’t know how to call the jQuery script to actually display the dialog.

The third and the last problem is that I don’t know how to handle the choice the user makes.

As you must have concluded by now, I am a complete newbie when it comes to jQuery. Can you help me out to get started? Thanks.

Answer 1

Boris,

This is quite simple to do. Firstly, I would not use an onClick event as jQuery has much better ways to manage this. Instead, it should look as follows:

HTML:

<img alt="" src="images/frame.png" id="imageUpload" />

jQuery:

$('img#imageUpload').dialog({
    title: 'Change contact image',
    buttons: {
        "Upload new image": function() {
            $(this).dialog("close");
        },
        "Remove current image": function() {
            $(this).dialog("close");
        },
        "Cancel": function() {
            $(this).dialog("close");
        }
    }
});