Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 187
  • Last Modified:

Dynamically creating dialogue with image

Im trying to code a jQuery UI dialogue dynamically but with an image in the title, however my dialogue just shows the code instead of the image:-
image
My code is currently:-
	var tag = $("<div title='test'></div>"); //This tag will the hold the dialog content.
	tag.html("data").dialog({
		title: '<img src="refresh.png" />'
		}).dialog('open');
	});

Open in new window


According to the documentation I can just include the html code so it should work fine.

Any ideas what Im doing wrong?

Thank you
0
tonelm54
Asked:
tonelm54
  • 4
  • 2
1 Solution
 
GaryCommented:
Code works fine
http://jsfiddle.net/GaryC123/HaZ9S/106/
Apart from the extraneous });
0
 
Chris StanyonCommented:
Not sure if this is a bug or not as I can't find any docs on it, but setting the title to an image works fine in jQueryUI version 1.9.x and less, but in version 1.10.x and above, you just get to see the raw HTML:

Here it is with jQueryUI 1.9.2 - works fine
http://jsfiddle.net/ChrisStanyon/hu62f/

Here it is with jQueryUI 1.10.3 - doesn't work
http://jsfiddle.net/ChrisStanyon/G6RUT/
0
 
GaryCommented:
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
Chris StanyonCommented:
Yeah, just found it myself - don't ya just hate it when developers sneak these changes in - noone ever reads the ChangeLogs ;)

Anyway, here some code to override the title function so it works in jQueryUI 1.10:

http://jsfiddle.net/ChrisStanyon/4YpFV/
0
 
Chris StanyonCommented:
Alternatively, avoid the title call altogether and set the title on open:

var tag = $('<div>').attr('title', 'test');
tag.html('data').dialog({
open: function() {
    $(".ui-dialog-title").html('<img src="http://lorempixel.com/50/50" />');
}
}).dialog('open');

Open in new window

0
 
tonelm54Author Commented:
Ok, the easiest way I can get it working is ChrisStanyon suggestion, however when I create multiple dialogues, all of them have the image in, is it possible (do you think) to specify a title unique to the dialogue Im creating?
0
 
Chris StanyonCommented:
Sure. You just need to limit the selector to the current dialog:

$(".ui-dialog-title", $(this).parents('.ui-dialog')).html('<img src="http://lorempixel.com/50/50/sports" />');

Open in new window

0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now