tonelm54
asked on
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:-
My code is currently:-
According to the documentation I can just include the html code so it should work fine.
Any ideas what Im doing wrong?
Thank you
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');
});According to the documentation I can just include the html code so it should work fine.
Any ideas what Im doing wrong?
Thank you
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/ChrisS
Here it is with jQueryUI 1.10.3 - doesn't work
http://jsfiddle.net/ChrisS
Here it is with jQueryUI 1.9.2 - works fine
http://jsfiddle.net/ChrisS
Here it is with jQueryUI 1.10.3 - doesn't work
http://jsfiddle.net/ChrisS
Nicely found Chris
And here's the documentation
http://jqueryui.com/upgrade-guide/1.10/#changed-title-option-from-html-to-text
And here's the documentation
http://jqueryui.com/upgrade-guide/1.10/#changed-title-option-from-html-to-text
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/ChrisS
Anyway, here some code to override the title function so it works in jQueryUI 1.10:
http://jsfiddle.net/ChrisS
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');ASKER
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?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
http://jsfiddle.net/GaryC123/HaZ9S/106/
Apart from the extraneous });