jQuery UI Dialog To Load HTML Title - javascript

I'm using jQuery UI Dialog for pop-ups that read from external pages. How do I get it to load the title from the external HTML instead of having the change it in the code every time? Because I want different titles as well.
Any suggestions please?
function openDialog(url) {
$("<div class='popupDialog'>Loading...</div>")
.dialog({
autoOpen: true,
closeOnEscape: true,
width: '900',
height: '900',
modal: true,
title: 'Bonus Features',
beforeClose: function(){ $(this).remove(); }
}).bind('dialogclose', function() {
jdialog.dialog('destroy');
}).load(url, function() {
$(this).dialog("option", "position", ['center', 'center'] );
});
adjustJQueryDialogOverlay();
}
$(window).resize(function() {
$(".ui-dialog-content").dialog("option", "position", ['center', 'center']);
});

What you seem to have are two questions. First, the simple one. How do you change the title?
The jQuery Dialog title comes from the title parameter. In your code, you have:
title: 'Bonus Features'
But if you were to change your function signature to accept a title parameter, you could pass the title along to the function and not have to worry about changing your code all the time.
function openDialog(url, title) {
$("<div class='popupDialog'>Loading...</div>").dialog({
...
title: title,
...
);
}
Now for the complex one: How do you get the title from your target page. I'm not sure there's an easy way for you to pull this off short of requesting the page through AJAX and parsing the result as XML/Text. Here's a link to do that if you're really interested.
http://forum.jquery.com/topic/getting-title-tag-from-html-page-using-ajax
But I really don't want to encourage that. I mean, it seems a little overboard to ask the client script to do all that. And you're not guaranteed that it may work from browser to browser. Rather it would be much easier just to associate whatever you're using to launch your dialogs with the page titles by hard-coding the titles.

Put this in 'open' event:
$(this).parent().find('.ui-dialog-title').html('Printed Card Designer');

Related

jQuery EasyUI put scrollbar in $.messager.show

I am using jQuery EasyUI in my web app. After some AJAX call, I will call $.messager.show method to display information if there is any error messages. The error messages sometimes is less and sometimes is in multiple lines. So when it comes to more than 3 lines, some of the message cannot be seen. I plan to put a scroll bar because I don't want to set it too big. Here is what I have and it is not working.
$.messager.show({ // show error message
title: 'Error',
msg: result.msg,
style:{
overflow:'scroll'
}
});
Please help if somebody has any way to do this or trick of doing this. Thank you.
You could try Dialog intead of Messager. I believe the following code produces the result you want:
var div = document.createElement('div');
div.innerHTML = result.msg;
$(div).dialog({
title: 'Error',
width: 300,
height: 'auto',
modal: true,
resizable: true
});

changing jquery ui dialogue title

I have this fiddle http://jsfiddle.net/cdG94/2/ in which I am trying to change the jquery UI dialogue title..It works fine when I am using Jquery 1.9 or lower but when I go to higher library it just displays the HTML directly ..am I doing something wrong here .I am using Jquery 1.10.2 and jQuery UI - v1.10.3
<button id="opener">Open the dialog</button>
<div id="wrapper">
<p>Some txt goes here</p>
</div>
$('#wrapper').dialog({
autoOpen: false,
minHeight: 400,
minWidth: 600,
title: function () {
return "Testing&nbsp<span style=\"font-size:smaller;\">Testing the HTML .</span>";
}
});
$('#opener').click(function() {
$('#wrapper').dialog('open');
return false;
});
Thanks
In jQuery UI 1.10 they changed the title option so that it uses .text() instead of .html() to set the dialog's title:
From the jQuery UI 1.10 release notes:
Changed title option from HTML to text
(#6016) Dialog titles are controlled either via the title option or the title attribute on the content element. The title has previously been set as HTML, but since titles are generally plain text, this could easily cause a scripting vulnerability for users who don't realize the value is being set as HTML. As a result, titles are now set as text. If you need to add custom formatting to your dialog titles, you can override the _title() method on the dialog.
To revert to the original behaviour you can therefore do this, per the jQuery UI team's recommendation:
$.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
_title: function (title) {
if (!this.options.title) {
title.html(" ");
}
title.html(this.options.title);
}
}));
but do beware (if you allow user supplied input to appear in the titles) of the potential for XSS vulnerabilities that was the original reason for the change!
(demo at http://jsfiddle.net/alnitak/bJ47w/)
As far as title option changed from html to text, you can adjust small hack to face html content in jQuery UI dialog window title.
This is not best practice, but maybe a solution sometimes. Here is an example:
Trigger a function, when dialog is created and manually change title .html
$('#wrapper').dialog({
autoOpen: false,
minHeight: 400,
minWidth: 600,
create: function () {
$('#wrapper').prev().html($('#wrapper').prev().text());
},
title: function () {
return "Testing&nbsp<span style=\"font-size:smaller;\">Testing the HTML .</span>";
}
});
$('#opener').click(function () {
$('#wrapper').dialog('open');
return false;
});
Here is fiddle: http://jsfiddle.net/zur4ik/cdG94/8/
Like others said, the newer version of JQuery UI doesn't use HTML.
However, it looks like you are just trying to make the text smaller. Why not do this using CSS:
.ui-dialog-title{
font-size: smaller !important;
}

How to get AlloyUI modal body to render properly when initialized as visible: false?

I'm using the AlloyUI modal "Real World Example" directly from their website at: http://alloyui.com/examples/modal/real-world/
Using the example verbatim and changing the following line from:
visible: true,
to
visible: false,
So that the modal appears only after clicking the button instead of when the page loads, as one would expect a dialog box to do. When I click the button to "show modal" the modal loads however the body of the dialog doesn't fill it's space properly, and the toolbar is mashed up against it. Upon resize everything jumps back into place nicely.
I'm looking for a clean fix, so far I figure a hacky fix might be to load the modal with a zIndex that puts it behind the page body, and alter the z-index via CSS with the button click (but this seems really hackish). I could probably also programatically resize the modal after the button fires modal.show() but that would cause a visible jump in the layout which I would like to avoid.
Any suggestions? I know AlloyUI has tons of hidden goodies, as their documentation is sparse, perhaps the visible attribute is not the one I should be using?
After some research I found an answer to my own question, this still may be a hacky fix but until someone comes up with something better here is the solution.
Step 1:
Leave visible: true intact.
Step 2:
Invoke .hide() after setting up the modal
The complete code.
YUI().use('aui-modal', function(Y) {
var modal = new Y.Modal({
bodyContent: '<div id="dialogBody"><div id="myTab"></div></div>',
centered: true,
headerContent: '<h3>Modal Goodness</h3>',
height: 600,
modal: true,
render: '#modal',
width: 900
}).render();
modal.addToolbar([
{
label: 'Save',
on: {
click: function() {
alert('You clicked save!');
}
}
},
{
label: 'Close',
on: {
click: function() {
modal.hide();
}
}
}
]);
modal.hide();
Y.one('#showModal').on(
'click',
function() {
modal.show();
}
);
});
I've done it nearly as you, just a little difference
modal = new Y.Modal(
{
centered: true,
contentBox: '#contentBox',
destroyOnHide: false,
headerContent: '<h3>Informations to your Orders</h3>',
height: 400,
modal: true,
render: '#modal',
resizable: {
handles: 'b, r'
},
visible: true,
width: 450
}
).hide();
I replaced .render() with hide(), by clicking a button this lines of codes are called:
Y.all('#showModal').on(
'click',
function() {
modal.show();
}
);
Can't find a method or parameter on YUI API Docs to stop auto render, so that seems to be the 'usual' way. I thought it might be the attribute render, but setting it to false or deleting the attribute don't make any changes to the auto init behaviour.

How to attribute an ID to a Telerik MVC Window when creating in in JavaScript

I am using the Telerik MVC controls (which at first glance are impressive) to build an MVC3 Razor application, and have a question about the Window control. I am trying to assign an ID to the Window when I create it from JavaScript so that I may reference it at any time using JQuery ... $('WindowID') ... but can't seem to be able to do so.
In short, here is my window:
var windowElement = $.telerik.window.create({
title: "Window opened from JS",
html: "<strong>Inserting an image...</strong>",
contentUrl: '',
modal: false,
resizable: false,
draggable: true,
scrollable: false,
width: 150,
onClose: function () { }
})
I would like to later, from some other random button or event, be able to move, resize, or close the Window by using it's ID. The problem is, I haven't been able to assign the Window any ID when creating it in JavaScript.
Note:
When I create the Window in the Razor view, I can assign a "Name" to the Window which DOES allow me to do exactly what I want to. However, I need to be able to create the Window in JavaScript. I guess I could create a bunch of Windows in Razor, then Hide/Show them as needed, but I would like that to be a last resort.
Ok, for anybody else interested, I eventually figured this out ...
After creating my window in JavaScript (like this):
var windowElement = $.telerik.window.create({
title: "Window opened from JS",
html: "<strong>Inserting an image...</strong>",
contentUrl: '',
modal: false,
resizable: false,
draggable: true,
scrollable: false,
width: 150,
onClose: function () { }
})
I used the .attr() jQuery method to assign the 'id' attribute of the Window (like this):
windowElement.attr('id', 'myChatID');
And that did the trick.
Note: Of course, I needed to have the jQuery library referenced for this to work ...
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
I'm not familiar with using the client API this way, but when you use the server API to create Telerik windows, the ID is derived from the Name() method.
Try setting
name: "yourid",
By the way, you don't need to create the window using Javascript in order to be able to reference it client-side. In fact, you may be making your life more complicated in the process.
I create the window in the MVC view using the server fluent API and use Javascript to show it when required.
...almost all of which I'd not have bothered to mention if I'd read your entire question!

How to put buttons in a html page in a jQuery dialog

eHello everyone,the following is my code to display a jquery dialog window with a closing button "OK":
<script type="text/javascript">
$(function(){
$("#dialog").dialog({
autoOpen:false,
bgiframe:true,
buttons: { "OK": function() { $(this).dialog("close"); } },
width:500,
height: 350,
modal: true,
show: 'slide',
hide:'slide',
title:"Similar Trends Detected in 2nd DataSet"
});
$("#userid").focus();
});
function showForm(matches){
$("#dialog").html(matches).dialog("open");
}
Currently it runs by supplying a string variable "matches",then the content of the variable gets displayed on the dialog frame.
Now me and my teammate want to extend this dialog a little,we want to attach a button to every line inside the html content("matches" variable),please note that we don't want buttons in the dialog(like another "OK" button),but we want buttons "inside" the frame (the actual html content).
So I would like some help here,how could I modify my "matches" variable,to have buttons also shown inside the dialog.
Thanks.
EDIT: Updated based on comments from OP
function showForm(matches){
// Of course, you'll need to modify with your own button.
// I also added a valid <br>, assuming you want it there.
matches = matches.replace( /<\/br>/g, '<button>my button</button><br>' );
$("#dialog").html( matches ).dialog("open"); // Insert new HTML content
}
Does the matches variable contain HTML?
You could just make a jQuery object out of it, and traverse it like any other HTML:
function showForm(matches){
// Of course, you'll need to modify with your own button.
// I also added a valid <br>, assuming you want it there.
matches = matches.replace( /<\/br>/g, '<button>my button</button><br>' );
$("#dialog").html( matches ).dialog("open"); // Insert new HTML content
}
Relevant jQuery docs:
.after() - http://api.jquery.com/after/
.find() - http://api.jquery.com/find/
Traversing: http://api.jquery.com/category/traversing/
what do you mean by every line? can you post a sample value for the matches variable? why not just include the buttons in the matches string value?
anyway, you can also provide a callback function to the dialog widget's 'open' event.
$("#dialog").dialog({
autoOpen:false,
bgiframe:true,
buttons: {
"OK": function() {
$(this).dialog("close");
}
},
width:500,
height: 350,
modal: true,
show: 'slide',
hide:'slide',
title:"Similar Trends Detected in 2nd DataSet",
open: function() {
var targetElements = 'br';
$(this).find(targetElements).after('<button>click me</button>');
}
});
after every br tag in the content, a button will be appended after it... every time the dialog is shown, the open callback will be triggered.
So the matches content is some static set of HTML. Once it has been added to the DOM you can use the same selectors and controls you use for everything else. So let us assume for the moment that the matches field contains a list of elements.
function showForm(matches){
$("#dialog").html(matches).dialog("open");
var b = $("<input type='button' value='clickme'/>");
$("#dialog ul li").append(b);
}
Of course this is only really going to work if you have some conception of what match contains. If you know for example that it is a set of divs with a certain class that will help in making the selector.

Categories

Resources