Develop Reference

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
});

Which is proper listener to use doLayout function?

I am working in EXTJs, Please check below example:
var containerForm=Ext.widget('panel',{
width: 1100,
border: false,
frame: true,
"layout":"fit",
title: 'Add User',
hidden:true,
listeners:{
'afterrender': function(panelObj,eOpts )
{
panelObj.doLayout();
}
}
});
Html of above panel is updating via ajax response as shown in the following code:
formObj.update(jsonResp.html,true,function(){
containerForm.doLayout();containerForm.focus();
});
containerForm is auto height panel, because this panel is used for multiple pupose,
When "formObj.update" populating this panel content, it's content loading properly but
If ajax response "jsonResp.html" has any image, that time doLayout() function is not helping to align panel height properly,
i added doLayout function at 2 places but callback function is not helping me in above case:
when i call doLayout function after 2 seconds then only it's work correctly:
formObj.update(jsonResp.html,true,function(){
setTimeout('containerForm.doLayout(); containerForm.focus();', 2000);
});
Which is proper listener to use doLayout function?

You could take a look at the Mutation Events but these are not cross browser compatible. If they were, you could try:
formObj.on('DOMSubtreeModified', function(){containerForm.doLayout();}, this);
You really just need to make sure your formObj.update() is complete. That is why your timeout is helping. If you want to make sure the innerHtml is set, just check it yourself.
If you look at the Source for Ext.dom.Element.update(), it is just using dom.innerHtml to update the html. In your update callback, you could check to see if the innerHtml is there before calling doLayout(). Some simple example code I threw together quick.
var doLayoutIfComplete = function(){
if(document.getElementById('formObjId').innerHTML == jsonResp.html){
containerForm.doLayout();
}
else{
doLayoutWhenComplete.delay(500); //Check again in 500ms
}
}
var doLayoutWhenComplete = new Ext.util.DelayedTask(function(){
doLayoutIfComplete();
});
formObj.update(jsonResp.html,true,function(){
doLayoutWhenComplete.delay(500);
});

Show and hide dynamic jQuery UI Dialogs

I know this should be simple, but it doesn't appear to be working the way I hoped it would.
I'm trying to dynamically generate jQuery UI dialogs for element "help."
I want to toggle the visibility of the dialog on close (x button in dialog), and clicking of the help icon. This way, a user should be able to bring up the dialog and get rid of it, as needed, multiple times during a page view.
// On creation of page, run the following to create dialogs for help
// (inside a function called from document.ready())
$("div.tooltip").each(function (index, Element) {
$(Element).dialog({
autoOpen: false,
title: $(Element).attr("title"),
dialogClass: 'tooltip-dialog'
});
});
$("a.help").live("click", function (event) {
var helpDiv = "div#" + $(this).closest("span.help").attr("id");
var dialogState = $(helpDiv).dialog("isOpen");
// If open, close. If closed, open.
dialogState ? $(helpDiv).dialog('close') : $(helpDiv).dialog('open');
});
Edit: Updated code to current version. Still having an issue with value of dialogState and dialog('open')/dialog('close').
I can get a true/false value from $(Element).dialog("isOpen") within the each. When I try to find the element later (using a slightly different selector), I appear to be unable to successfully call $(helpDiv).dialog("isOpen"). This returns [] instead of true/false. Any thoughts as to what I'm doing wrong? I've been at this for about a day and a half at this point...

Maybe replace the line declaring dialogState with var dialogState = ! $(helpDiv).dialog( "isOpen" );.
Explanation: $(helpDiv).dialog( "option", "hide" ) does not test if the dialog is open. It gets the type of effect that will be used when the dialog is closed. To test if the dialog is open, you should use $(helpDiv).dialog( "isOpen" ). For more details, see http://jqueryui.com/demos/dialog/#options and http://jqueryui.com/demos/dialog/#methods.

I was able to get it working using the following code:
$("div.tooltip").each(function (index, Element) {
var helpDivId = '#d' + $(Element).attr('id').substr(1);
var helpDiv = $(helpDivId).first();
$(Element).dialog({
autoOpen: true,
title: $(Element).attr("title"),
dialogClass: 'tooltip-dialog'
});
});
// Show or hide the help tooltip when the user clicks on the balloon
$("a.help").live("click", function (event) {
var helpDivId = '#d' + $(this).closest('span.help').attr('id').substr(1);
var helpDiv = $(helpDivId).first();
var dialogState = helpDiv.dialog('isOpen');
dialogState ? helpDiv.dialog('close') : helpDiv.dialog('open');
});
I changed the selectors so that they're identical, instead of just selecting the same element. I also broke out the Id, div and state into separate variables.

JQuery ModalDialog only shows data once and not on repeat attempts

We have a image that calls a script function that should show a jquery modal dialog popup. The dialog loads once with the data and then when we close it and try to click on the img again it does not load the data, sometimes the dialog will appear but be blank. If we take the link from the img tag and put it in a new browser it pulls the data fine so the link should be ok.
Below is the script in the head section of the page:
function ShowReportDialog(reporturl){
jQuery("#reportdialog").dialog({
title: 'Hello World',
modal: true,
width: 915,
height: 670}).show();
jQuery("#reportdialog").load(reporturl);
}
Image Tag that calls the script:
<img style="border:0;" onclick="ShowReportDialog('Service/REPORT?ARCHIVE=102127');" src="/Images/rerun.png"
Anyone see anything I missed or a better way?
Thanks

jQuery is probably caching your AJAX request. Check out this other thread for ways to prevent this from happening.
Edit: I'm by no means a jQuery expert, but I believe you should only show your dialog after the AJAX request has been responded. So I'm guessing something like this:
function ShowReportDialog(reporturl){
jQuery("#reportdialog").load(reporturl, function(){
jQuery("#reportdialog").dialog({
title: 'Hello World',
modal: true,
width: 915,
height: 670
}).show();
});
}

jQuery UI Dialog and Flash in IE

I've been trying to get Zero Clipboard and jQuery UI Dialog to play nice together, and it's proving to be rather difficult.
Zero Clipboard allows copying to clipboard from Javascript by placing a transparent Flash movie over a button, so that the user clicks on the Flash when he tried to click the button. This works nicely and cross-browser as you can see in the demo page.
However, when trying to use this in a jQuery UI Dialog box something seems to go wrong.
First, I discovered that the flash element must be placed inside the dialog element, otherwise Chrome and IE refuse to respond to click events. This means I can't use the glue convenience method, but that's OK.
However, now IE for some reason won't accept the setText method on the Flash element.
An example of what I did is here. My code starts around line 300, and the most relevant lines are:
$("#showme").dialog({autoOpen: false, width: 550, height: 200});
$("#showme").bind("dialogopen", function() {
if($("#clipflash").length == 0) {
var btn = $("#d_clip_button");
$("<div id='clipflash' style='position:absolute; background: #f00; z-index: 9999' />")
.css(btn.position())
.width(btn.width())
.height(btn.height())
.html(clip.getHTML(btn.width(), btn.height()))
.appendTo("#showme");
}
});
I colored the div red so it's easier to spot and set its z-index to 9999, just to be safe. I then set the position and size to cover the "button", and add the HTML for the Flash element with clip.getHTML().
I've been working on this for several hours now, so any help would be greatly appreciated.
Almost forgot: my problem is that IE7 says "Object does not support this property or method" inside the Zero Clipboard code.
UPDATE
powtac's comment points to something that looks really promising:
I forgot the own golden rule: In
order for the Flash ExternalInterface
to work in IE 7, you have to stuff the
EMBED/OBJECT HTML into the DIV element
AFTER it gets appended to the DOM. Stupid IE.
However, switching the lines .html(clip.getHTML(btn.width(), btn.height())) and .appendTo("#showme") didn't help. Even doing a setTimeout for adding the flash HTML later did not help. I feel like I'm really close, though...

OK, so powtac did point me in the right direction, but there was one element missing: using the jQuery html() function did not have the same effect as simply setting innerHTML. If would be nice if somebody could explain why.
So, the fixed code looks like this:
$("#showme").bind("dialogopen", function() {
if($("#clipflash").length == 0) {
var btn = $("#d_clip_button");
$("<div id='clipflash' style='position:absolute; background: #f00; z-index: 9999' />")
.css(btn.position())
.width(btn.width())
.height(btn.height())
.appendTo("#showme")
[0].innerHTML = clip.getHTML(btn.width(), btn.height());
}
});
Also, I forgot to put DOCTYPE in the example page, so the offsets are wrong in IE. My bad.

I adapted your answer to a reusable method, and fixed a few position issues (I had to add position:absolute, and use outerWidth() and outerHeight().
Demo.
function setupCopier(selector, buttonSelector, callback, opt_dialogSelector){
var copiedText = $(selector).text();
ZeroClipboard.setMoviePath('http://dl.dropbox.com/u/464119/Programming/javascript/libraries/ZeroClipboard/ZeroClipboard.swf');
var clip = new ZeroClipboard.Client();
clip.setText(copiedText);
clip.addEventListener('complete', callback);
$(buttonSelector).each(function(){
clip.glue(this);
});
// Make sure Zero Clipboard is on top
$("#ZeroClipboardMovie_1").
parent().
css("z-index", 2000);
if (opt_dialogSelector) {
$(opt_dialogSelector).bind("dialogopen", function() {
if($("#clipflash").length === 0) {
var btn = $(opt_dialogSelector).find(buttonSelector);
$("<div id='clipflash' style='position:absolute; z-index: 9999' />")
.css(btn.position())
.width(btn.outerWidth())
.height(btn.outerHeight())
.appendTo(opt_dialogSelector)
[0].innerHTML = clip.getHTML(btn.outerWidth(), btn.outerHeight());
}
});
}
}
$(function(){
setupCopier('#copy-div', '.copy-button', function(){
alert("Copied");
}, '#dialog');
$("#open-dialog-button").click(function(){
$("#dialog").dialog("open");
});
$("#dialog").dialog({autoOpen: false, modal: true, resizable: false, draggable: false,
title: "Create your Free Personal Bar now", height:200, width:300});
});