I'm trying to make system of multiple dialogs in one page using jquery dialog...
Functions looks like...
function open_w(id){
$('.opened').dialog('close');
$(id).addClass('opened');
$(id).dialog({position: 'center', modal:true, width: '750px' });
};
function close_w(){
$('.opened').dialog('close');
$('.opened').removeClass('opened');
};
As you see passing the ID opens me that windows, but before open close me old windows.. When i open it fist time everything is good.. But Next time it's doesn't want open
Where is mistake?
It's because you're trying to re-create the dialog, instead of this every time:
$(id).dialog({position: 'center', modal:true, width: '750px' });
You need to call open (on the already created dialog), like this:
$(id).dialog('open');
For example:
function open_w(id){
close_w();
$(id).addClass('opened')
.dialog({position: 'center', modal:true, width: '750px' })
.dialog('open');
}
function close_w() {
$('.opened').dialog('close').removeClass('opened');
}
Related
I wanted a combobox in a panel created by the FF extension API. Something like this:
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_datalist
The SDK-tutorial says it's not possible, but a bugreport suggests a solution (the last two comments):
https://bugzilla.mozilla.org/show_bug.cgi?id=918600
I also found this about setting an attribute to the panels' frame:
Avoid panel to autoHide in Firefox extension
Accordingly, I've tried this:
var prefsPanel = require("sdk/panel").Panel({
width: 600,
height: 500,
contentURL: "./prefsPanel.html",
contentScriptFile: "./prefsPanel.js"
});
let { getActiveView } = require("sdk/view/core");
getActiveView(prefsPanel).setAttribute("tooltip", "aHTMLTooltip");
getActiveView(prefsPanel).setAttribute("noautohide", true);
The "noautohide"-command works, but the tooltip-command does not. Can somebody help? Tia.
I am using jquery-ui and it's dialog functionality to display modal dialogs in my web app. It works ok.
At one use case, I have a colorbox popup window on a screen, and once user finishes his input I need to display a confirmation dialog.
Also here everything actually works thanks to error handling on all the major browsers I tried, but I worry what problems might some combination of javascript engine&browser could cause.
The error I get is call stack size overflow (Chrome shows it as Uncaught RangeError: Maximum call stack size exceeded.).
The code for the modal dialog is:
function modalDialog(dialogText, dialogTitle, okFunc, okLabel, cancelFunc, cancelLabel) {
var dialogButtons = {};
dialogButtons[okLabel] = function() {
if (typeof(okFunc) == 'function') {
setTimeout(okFunc, 50);
}
$(this).dialog('destroy');
};
dialogButtons[cancelLabel] = function() {
if (typeof(cancelFunc) == 'function') {
setTimeout(cancelFunc, 50);
}
$(this).dialog('destroy');
};
$('<div style="padding: 10px; max-width: 500px; word-wrap: break-word;">' + dialogText + '</div>').dialog({
draggable: true,
modal: true,
resizable: false,
width: 'auto',
title: dialogTitle || 'Confirm',
minHeight: 75,
buttons: dialogButtons
});
}
The colorbox is called in javascript, and it takes embedded div from the actual page as it's content:
$(function() {
$(".colorbox-load").colorbox({
inline: true,
overlayClose: false,
href: "#popupContents",
height: "320",
width: "300"
});
})
In the popup, I have a button which just opens up the confirmation dialog.
I apologize in advance as it's my first time using JSFiddle, and I wasn't able to get colorbox and dialog popup match exactly how it looks on my page (it actually pops up properly on top of the colorbox and not "in the background"). I'm not sure if this is because I had to use different versions of jquery and jquery-ui (I couldn't find same combination I am using from the pulldown) or something else.
A JSFiddle is here. If you click around the colorbox area once the "open dialog" button has been pressed you should get same error (firefox and Chrome seem to react slightly differently when to show the error).
Thank you for any suggestions!
It seems like the Dialog and Colorbox are fighting for the focus. Setting the trapFocus setting to false will resolve this issue. Of course it might have some side effects for your page depending on how you use it. Please consult the official documentation for details.
$(function() {
$(".colorbox-load").colorbox({
inline: true,
overlayClose: false,
href: "#popupContents",
height: "320",
width: "300",
trapFocus: false
});
})
I am upgrading Jquery version from jquery-1.6.4.min.js to jquery-1.10.2.js
and jquery ui version from jquery-ui-1.7.2.js to jquery-ui-1.10.3.js
I have included latest version jquery-ui.css also.
This is script tag i am using.
<script type="text/javascript" src="JS/jquery-1.10.2.js"></script>
<script type="text/javascript" src="JS/jquery-ui-1.10.3.js"></script>
and this way i am opening a dialog.
dialog = $('#dialog-modal-error');
dialog.html (l_str);
dialog.dialog(); /* if i am not using this then it is giving me this error msg. cannot call methods on dialog prior to initialization; attempted to call method 'option'*/
if (dialog.dialog ('option', 'disabled') == undefined) {
dialog.dialog (
{
autoOpen: true,
position : { my: 'center', at: 'center'},
modal : false,
bgiframe : true,
buttons: {},
close : minimizeMessages,
resizable : false,
draggable : false
}
);
} else {
dialog.dialog ('open');
}
as a result it is always opening my dialog at the right bottom of the page so just want to know why it is showing me this behavior.
I have already checked all the css it is not taking any inherited css.
Edit:
I used this also position : { my: 'center', at: 'center', collison: 'none'} but not working.
With the last version of jquery it is working fine.
NOTE: Dialog is always coming out of the screen(Left -Bottom)
Check out the jQuery UI docs (http://api.jqueryui.com/dialog/#option-position) it seems that you have left the of attribute out. The default value for position is { my: "center", at: "center", of: window }. So try specifying the of: window attribute.
Use the 'of' attribute to position it properly. Where would you like it positioned?
For example:
position:{ my: "center", at: "center", of: $("#aDiv")}
This can also be read as:
place the center of my dialog box, at the center of the div with the ID aDiv.
I'm using Grails 1.3.7 and I use tinyMCE via richui. I'm trying to display a modal window which enables users to send a mail. However, if tinyMCE is correctly displayed, I can't use the text editor because of this error :
t.win.document is null
I finally found the reason here, at the end of the article :
http://blog.mirthlab.com/2008/11/13/dynamically-adding-and-removing-tinymce-instances-to-a-page/
It seems that when I call the page with the jquery script building the modal window, DOM isn't refreshed and doesn't create the corresponding textarea.
Anyway I don't know how to resolve this, so here is my code :
Jquery code :
function dialogSendFirstMail(id) {
var monurl = "/myApp/emailTemplate/writeFirstMail.gsp?id_for_mail="+id;
var titre = "Premier email"
//alert(monurl);
$("#dialogSendFirstMail").load(monurl, function() {
$(this).dialog({
height: 'auto',
width:'auto',
modal: true,
position: 'center',
overlay: {
backgroundColor: '#000',
opacity: 0.5
},
title:titre
});
});
}
GSP calling the script for the modal window :
<!-- ... -->
<g:if test="${params.sendFirstMail}" >
<div id="dialogSendFirstMail"></div>
<script>dialogSendFirstMail(${idProfil});</script>
</g:if>
</body>
modal window (only this for the moment) :
<richui:richTextEditor name="firstMail" value="%Email_de_bienvenue%"/>
In summary, if I detect that I have to send a first mail, the page creates a div in which is placed tinyMCE. This is what the user will see.
As you have mentioned, the reason that you the the error "t.win.document is null" is because the DOM isn't refreshed. So you will have to add the tinyMCE control explicitly when you load the modal dialog. You can use something like this in the gsp which renders the richUI editor (writeFirstMail.gsp in your case) :
jQuery(document).ready(function() {
//your tinyMCE settings here
tinyMCE.settings = {
mode : "textareas",
theme : "simple",
editor_selector : "mcesimple",
width: 400
};
tinyMCE.execCommand("mceAddControl", false, "yourTextareaId");
});
Once the dialog is closed, you can remove tinyMCE control from the textarea using this:
tinyMCE.execCommand("mceRemoveControl", false, "yourTextareaId");
I have a hidden div:
<div id="termSheetPrinted" style="visibility:hidden;">
</div>
that I am populating through the click of a button. After that population takes place, I would like to display the contents of this div on a separate popup window so the user can print it.
How would I do that with JQuery or Javascript or whatever is easiest.
slandau,
[edited] as per new information in your comment below.
using the jquery dialog (you must reference the jquery-ui js), create a 2nd div on the base html page and call it something like termSheetPrintedDialog.
<div id="termSheetPrintedDialog" style="visibility:hidden;"></div>
then in your document ready event, put:
$("#termSheetPrintedDialog").dialog({
autoOpen: false,
resizable: false,
height: 510,
width: 800,
position: 'center',
title: 'my snazzy popup window',
},
modal: true
});
then, in your button click event on your 1st modal form:
$('#yourbutton').click(function() {
// your div population code here ... etc
$('#termSheetPrintedDialog').html($('#termSheetPrinted').html());
$('#termSheetPrintedDialog').dialog('open');
});
it's not pretty, but it's an approach based on the constraints that you have.
You can use
var myWin = window.open('');
myWin.document.write(<html code>);
myWin.document.close();
Here is a link to read more about it:
window.open