We help IT Professionals succeed at work.

Dynamically creating dialogue with image

tonelm54
tonelm54 asked
on
208 Views
Last Modified: 2013-12-13
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
Comment
Watch Question

CERTIFIED EXPERT
Expert of the Year 2014
Top Expert 2014

Commented:
Code works fine
http://jsfiddle.net/GaryC123/HaZ9S/106/
Apart from the extraneous });
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
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/
CERTIFIED EXPERT
Expert of the Year 2014
Top Expert 2014

Commented:
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
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/
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
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

Author

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?
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.