Solved

Dynamically creating dialogue with image

Posted on 2013-11-21
7
161 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
0
Comment
Question by:tonelm54
  • 4
  • 2
7 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39666456
Code works fine
http://jsfiddle.net/GaryC123/HaZ9S/106/
Apart from the extraneous });
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39666650
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
 
LVL 58

Expert Comment

by:Gary
ID: 39666675
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39666687
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
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39666695
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
 

Author Comment

by:tonelm54
ID: 39666837
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
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 39666931
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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now