How to add an image to a JQuery Dialog Box

Question

Hi I am having problems trying to add a Picture to my dialog box, Basically my Dialog Box is called when a user clicks a cell within the table.

    <td class="dialog">English</td>

which is then linked to the Div

<div id="dialog" title="LessonSelected">

</div>

Next here is my JQuery:

$(function() {
    $( ".dialog" ).click(function(){        
        $('#dialog').html($(this).html()); 
        $('#dialog').dialog({
            resizable:false,
            buttons: {
                "Enrol": function()
                {
                    $(this).dialog('close');
                    choice(true);
                },
                "Cancel Enrol": function()
                {
                    $(this).dialog('close');
                    choice(false);
                }
            }
        });
    });
  });

However when I try to add img markup within the div the image appears on the interface and not in the dialog box also when the cell is clicked the text within the cell appears in the dialog box automatically which is not what is needed I do want to get the value though it just appears automatically and being new to JQuery I do not know how to format this or add further text before or after it. Is anyone able to diagnose my problem ?

Answer 1

Check this Demo Fiddle : using jQuery .append()

$(function() {
    $( ".dialog" ).click(function(){ 

        $('#dialog').append('<img src="https://www.google.co.in/logos/doodles/2014/world-cup-2014-1-6584893165273088-res.png"/><br/>').append($(this).html());

       //append image through JS

        $('#dialog').dialog({
            resizable:false,
            buttons: {
                "Enrol": function()
                {
                    $(this).dialog('close');
                    choice(true);
                },
                "Cancel Enrol": function()
                {
                    $(this).dialog('close');
                    choice(false);
                }
            }
        });
    });
  });

OR

<div id="dialog" title="LessonSelected">
    <span><img src="https://www.google.co.in/logos/doodles/2014/world-cup-2014-1-6584893165273088-res.png"/></span>
</div>

Answer 2

Create the dialog autoOpen = false and then open it when you click

HTML

<div id="dialog" class="dialogBox" title="LessonSelected">
    <img src="https://www.google.com/logos/2014/worldcup14/opening/cta.png" />
</div>

JQuery

$(function() {

    $('#dialog').dialog({
        resizable:false,
        autoOpen: false,
        buttons: {
            "Enrol": function()
            {
                $(this).dialog('close');
                choice(true);
            },
            "Cancel Enrol": function()
            {
                $(this).dialog('close');
                choice(false);
            }
        }
    });

  $( ".dialog" ).click(function(){        
    $('#dialog').dialog("open");
  });
});

FIDDLE: http://jsfiddle.net/F9uR3/