无法将文本和图像组合到JQuery对话框中

Question

I am trying to add a picture and text to my JQuery Dialog box yet I am having problems, I'm new to JQuery but can't seem to find anything wrong with the code. Anyone have any ideas on what the problem is ?

$(function() {
    $( ".dialog" ).click(function(){   
        $('#dialog').append('<img src="Image here"/><br/>').append($(this).html());
        $('#dialog').html("The Football Game ") + $(this).html() + " Is now playing")dialog({
            resizable:true,
            modal:true,
            height: 350,
            width:  500,
            buttons: {
                "Ok": function()
                {
                    $(this).dialog('close');
                },
                "Cancel": function()
                {
                    $(this).dialog('close');
                }
            }
        });
    });
  });

Answer 1

Using your very example, slightly rewritten.

HTML markup to trigger dialog:

<div id="dialog" title="Basic dialog">
    <p>Here's some content</p>
</div>
<!-- a HTML element with the class "dialog" to trigger the event -->
<input type="button" class="dialog" value="Trigger Dialog"/>

Your jQuery example modified:

$(document).ready(function(){
    $('.dialog').click(function(){ //use a better selector to trigger this event..
    var fetchHTML = $('#dialog').html(); //fetch the current HTML of your element with the ID "dialog" and save it within a variable
    $('#dialog').html('<img alt="" src="someimage.png"/>'+ fetchHTML); // add your image to the element and then the HTML that was there before. The method htm() will overwrite everything that was there before

        $('#dialog').dialog({ //use the jquery-ui dialog method with selected parameters
            resizable : true,
            modal : true,
            height : 350,
            width : 500,
            buttons: {
                "Ok": function(){
                       $(this).dialog('close');
                       },
                "Cancel": function(){
                       $(this).dialog('close');
                       }
                }
           });
       });
  });

And remember to make sure that you have successfully included:

• jQuery
• jQuery-ui
• jQuery-ui CSS stylesheet (or at least the appropriate classes that you need).

Google hosts them all for you https://developers.google.com/speed/libraries/devguide . Easy as pie to just copy and paste them within your document

Whenever developing web applications I use FireFox and have installed extensions such as FireBug, WebDeveloper and YSlow. They're of great help :) Just saying...

Answer 2

One

The main issue I see is in the line below:

$('#dialog').html("The Football Game ") + $(this).html() + " Is now playing")dialog({

There is an extra ) which is closing the html() and you are missing a . before calling dialog() .

$('#dialog').html("The Football Game " + $(this).html() + " Is now playing").dialog({

Two

Also, you are calling html() after append() , essentially overwriting the appended content. Try using append() after html() (or combine all the content into the html() call):

$('#dialog')
    .html('<img src="http://dummyimage.com/600x400/000/fff"/><br/>')
    .append("The Football Game "+ $(this).html() + " Is now playing")
    .dialog({ ...

Working Example