How to display a dialog when user clicks on a <img>?

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

Answer 2

First you'll need some hook, or path, to select the image element. Second, since it's added to the page after the document load you'll need to attach the event listener after the response.

• select the element

So if you have control of the html returned via ajax add an id to it and select it trivially with jquery:

<img alt="" src="images/frame.png" onclick="uploadImage()" id="pickME" />

...and someplace in the ajax callback...
$("#pickME").click(...

If you can't add the id you'll have to drill down to it by starting from the wrapping element and looking for the img descendant.

• attach the event

you can't attach the click event when the document is "ready" because the ajax hasn't inserted it into the document yet. So the thing here is to add the event handler after the img is inserted into the document. So you need to catch that event so you know when its time to add your click event.

ajax(... 
    success: function(data){
             ...stuff data into document...
             $("#pickME").click(function(){
                 ...attach the dialog to the element...

you might be out of your depth ;-)