Solved

Dynamically creating dialogue with image

Posted on 2013-11-21
7
170 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

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…
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

705 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