I'm trying to use a CKEDITOR instance into a jqueryUI dialog.
$('[name=dialog]').dialog();
$('[name=content]','[name=dialog]').ckeditor();
It works fine until i want to use the dialogs from the editor (f.e. dialog to set an URL, dialog to create a table)
it's like i can't click on that dialog..
i was checking for the z-index (i think that is the problem) but nothing, it is the highest level and nothing, i can not use those dialogs.
Anybody knows why is this for?
I know this post is a little late, but maybe it'll help the next guy.
To create a ckeditor instance in a dialog, you have to load the dialog first and then create ckeditor like this:
$("#mydialog").dialog({
open: function() {
$("#mytextarea").ckeditor(); //LOAD IT HERE
},
close: function() {
//you might want to destroy the instance once the dialog closes
//to keep things clean
CKEDITOR.instances["mytextarea"].destroy();
},
autoOpen: true, ... more options
});
Hope this helps.
Its easy, just the next code ( sorry for the formatting, but I'm replying using my mobile )
$("<div><textarea id='foo'></textarea></div>").dialog({});
CKEDITOR.replace("foo");
Related
I have a dialog setup as follow
$("#myDialog").dialog({
autoOpen: true,
close: function(event, ui) {
$("#myDialog-content").html("");
$(this).dialog("destroy");
}
});
$("#myDialog").css("min-height","");
$("#myDialog-content").html("Loading...");
$.ajax({
...
success: function(response) {
$("#myDialog-content").html(response);
}
});
This working fine I load and close dialog in same page but not able to make it work properly where I move between pages.
Here is a my page flow
From source page(say PageA) I make AJAX call to load the page containing dialog div(say PageB).
Link on this page call above method to display dialog. (For first time it runs OK).
When I click close button. Dialog close and with firebug I can still see dialog div at the end with UI classes but in hidden state.
If I go back to source page (Page A) and reload the PageB.In firebug I can see two div - one originally from JSP and second one from step 3.
Now if I click button to load dialog box - It used hidden to populate new data and never use new div created by jquery. So I just have blank dialog box.
I am not sure if this is jquery Dialog issue or my page flow. One possible solution I though of is use remove in close function to remove dialog div completely but it puts burden to create this div everytime page PageB is loaded. Is there any other way or any thing I am doing wrong in this scenario?
If i understood correctly the situation, You have 2 options:
If you somehow cleaning the content of "Page B", remove the modal
then.
If you do not have the cleaning mechanism like that, just
.remove() content of modal on close
Sidenote: i would advise not to use jquery for .css and .html('Loading...'). Also, it is good to cache jquery elements in variables e.g var dialog = $("#myDialog");
How can I run the modal and build the modal from dynamically create elements.
Example, I have a button that I want to launch the modal, which is dynamically created.
I'm using this modal plugin:
http://labs.voronianski.com/jquery.avgrund.js/
I have tried this, it does work, although it doesn't work until the 2ND click of the button.
$('body').on('click','#siteSwitch', function(){
$(this).boxModal({
height: 800,
width: 800,
holderClass: 'boxModal',
showClose: true,
showCloseText: 'X',
enableStackAnimation: false,
template: '<p>So implement your design and place content here! If you want to close modal, please hit "Esc", click somewhere on the screen or use special button.</p>'
});
});
Thankyou
I found the answer guys,
It seems adding openOnEvent: false as an option for the modal fixes it. It makes complete sense, by default it was true, so it's waiting for a 'click' event to fire the launch which hasn't happened until it's built once in the background.
Thanks!
Shannon
$(this).avgrund({})
code is like this, rather than boxModal()
I would like to make register button, but when people click on it. A pop up dialog will appear and has two button for user to click. One is YES , One is NO. IF they select YES, will pass them to X page. Convert way, they select NO, will pass them to Y page. I search on google but only OK and cancel confirm.
YES --> VIP REGISTER
NO --> REGULAR REGISTER
Should i use Jquery?
You can use jQuery UI for this.
$('<div>', {text: 'Do you have VIP code?'}).dialog({
modal: true,
buttons: {
'Yes': function() {
window.location = ...;
},
'No': function() {
window.location = ...;
}
}
});
Note that this dialog box will by default include a "close" button and will also close automatically if you press escape. You need to either disable those features (see here for how), or decide what action to take (if any) when that happens.
You can do this in classic javascript
var answer = confirm ("Do you have vip code?")
and then treat the answer accordingly
You can use the built-in confirm method if you don't want to customise the look-and-feel of the dialog (you can't change anything, including the text of the buttons):
if (confirm("Do you have VIP code?")) {
//Yes!
} else {
//No
}
If you want to customise the dialog, look at the endless lightbox scripts that are available. As mentioned by #Alnitak, jQuery UI provides a good one.
jquery is a good way to do this very easy. But often the problem is, people belive they can use jQuery without understanding Javascript itself. So, first learn the basics of Javascript (for Example: Methodchaning, Closurs, Array-Handling, Prototyping) and after that try jQuery. The Box you want is very easy to do with jQuery-UI and
window.location = "vip.html";
Here I am facing a problem, I will explain:
I set up a calendar on my website, when I click on an event to this calendar I open a popup until the hopefully it works correctly, I would like to change the content of my popup by inserting values my event.
eventClick: function(calEvent, jsEvent, view) {
z=open('popup.html','','width=400,height=200,toolbar=no,scrollbars=no,resizable=yes,location=0,directories=no,menubar=no,status=no');
z.document.getElementById('test').append(toto);
},
Above me the code that opens my popup correctly I created a new file by "popup.html.
The last line does not work against ...
z.document.getElementById('test').append(toto);
I have an element with the id "test" in the HTML file of my popup. I also tried to generate the popum the fly from my script, I get this solution in a properly transmit information I want displayed in the popup io unfortunately I do not find a solution to the stylized popup window
w=open("",'popup','width=400,height=200,toolbar=no,scrollbars=no,resizable=yes');
w.document.write("<TITLE>"+document.forms[0].elements["titre"].value+"</TITLE>");
w.document.write("<BODY> Hello"+document.forms[0].elements["nom"].value+"<BR><BR>");
w.document.write("this popup work");
w.document.write("</BODY>");
w.document.close();
Do you have a solution to my / my problem?
Thank you in advance,
Good afternoon,
cordially
Do you really want a new window? Or do you only want a modal, like the jQuery.UI dialog?
In order to use the latter you usually prepare a <div>, e.g.
var myDialog = $("#toto");
myDialog.dialog({ autoOpen: false });
and use myDialog.dialog('open') to open it. Note that this will remove #toto from its parent. If you don't wish this behavior try var myDialog = $("#toto").clone().
You can then style the new dialog with the jQuery css methods.
I'm having some trouble with IE6 and jQuery UI. I have a popup dialog (modal, if it matters), that displays a "yes/no" dialog to the user with some information. In order to facilitate this, I build the dialog with autoOpen = false, and then I call $('#popup').show() later on as needed, in response to various different events. Now, in IE6 (and only IE6, as far as I can tell), the .dialog method will occasionally fail but STILL return the jQuery object. So, rather than show a popup, the .show() method just display a div container in the html page.
What could be causing this, and how I can fix this behavior?
Thanks.
$('#myDialog').dialog({
autoOpen: false,
buttons: {
"No": function()
{
$(this).dialog('close');
//do stuff
},
"Yes": function()
{
$(this).dialog('close');
//do stuff
}
},
draggable: false,
modal: true,
resizable: false,
title: "Confirmation",
width: "500px",
zIndex: 2000
});
and later
$('#myDialog').dialog('open').show();
Pretty standard.
New information
I'm loading the page that makes the dialog with ajax inside of another dialog, which can be repeatedly created and destroyed. Now, each time my page gets loaded with ajax, .dialog(opts) should re-instantiate the dialog div, correct? I've found that this is the scenario.
1.) An outer dialog uses ajax to replace its content with my content.
2.) My content launches a dialog that was previously created and set to not autoopen.
3.) The outer dialog is destroyed as the inner dialog is closed.
4.) The outer dialog is reopened. The inner dialog no longer is able to appear as a dialog in ie6. This ONLY happens in ie6.
You should open your dialog using
$('#myDialog').dialog('open');
instead of
$('#myDialog').show();
The first method displays actual dialog box, while the one you are using just causes the #myDialog item to be displayed (with no UI Dialog magic). show() method is the part of the core jQuery library and shoudn't be used to invoke a dialog.
I had a similar situation and was never able to reuse the dialog. I had to destroy and recreate both dialogs each time.
I use the bgiframe: true and I never got any problem with them with I6, FFox, etc.
More info: http://docs.jquery.com/UI/Dialog#option-bgiframe
Regards.
By the way, when you are hiding your modal before you open it, are you using style="display:none" as your hiding attribute, or a CSS class, or jquery?
The reason I ask, is that if you use simply style="display:none" I never have problems with the modal showing the modal perfectly all the time using dialog("open") but if I use either css or jquery, I always have problems.
You may want to test it.
Marcus