Is it possible to drag stuff out of a jQuery UI dialog and drop it onto the page? I'm using html() function to move data between the dialog and the page, but it would be cool to have the drag and drop effect.
Yes.
Make the content of the jQuery UI dialog draggable and the place where you want to drop it droppable.
Related
By default the Modal control is draggable.
Is there a way to prevent that?
I just found that you could click the IsStatic checkbox under Modal control properties
Hi i am using ckEditor in inside JQuery UI Dialog my jquery ui dialog loading code is like
$("#my-div").dialog({
height : 700,
width: 500,
modal : true,
closeOnEscape: false
});
When i click on table or image icon in ckeditor then it opens another dialog , below picture is sample example when i click on table icon, now the problem is that when table dialog is opened then every text box and drop down in that dialog become disable and i am unable to modify any rows or columns value. And when i modify the modal property to false then its working, i think there is some z-index issue , but at this time i am unable to solve it.
I Think that you need to remove all
tabindex=-1
from
jquery
UI dialog
Page.ClientScript.RegisterStartupScript(this.GetType(), "Alert", "JavaScript:alert('MY Message')", true);
Above code shows message box on top of the page , but I want it to the center of the page.
Alert boxes by default open at the center. Look at #Tomzan's comment, you are probably getting it at the top for just Chrome.
As far as I know it's not possible to make any modifications to that. If you want a custom alert box look into using jQuery ui. It'll allow you to put a messagebox wherever you want.
jQuery ui dialog box
The alert('message') is dialog box shown by browser, with very little to no control over its positioning.
Instead you can use jquery ui dialog to show your message. There are 'n' number of jquery plugins which are available to show the alert messages.
And of course you can control the positioning dialogs of these custom dialogs.
http://jqueryui.com/dialog/
http://needim.github.io/noty/
http://jquery-plugins.net/tag/alert-box
I put together a page that shows what's happening here. The dialog is a confirmation that an email was sent, so you'll need to fill out the form to get the dialog to pop up. (I wanted to retain as much as the original functionality as possible.)
I generated a UI theme using Themeroller and the dialog I'm using is completely void of all styling. To the point that the dialog is completely transparent and all that shows in the dialog is the text in the dialog's div and the unstyled close buttons.
I tried both the compressed and un-compressed UI css and js files with no change.
I'm using some UI effects elsewhere in the same site (highlighting, etc), and they work fine.
Is this an issue with the Themeroller generator or am I missing something?
For now I can just display a label with a confirmation message, but I'd really like to use a dialog.
You haven't linked to the jQuery UI css anywhere. Here's a screenshot of the page after I injected the base jQuery UI theme.
I'm having some problems with Jquery UI Dialog and TinyMCE.
Passing data to a text area works well with UI Dialog and Jquery.
So setting data in text area like this works fine:
$("#MessageDialog #messageDto_Body").val(messagedata.Body);
$("#MessageDialog").dialog("open");
When I attach a tinyMCE editor to the text area it correctly adds the editor (and without the UI window the content of the text area is preserved):
tinyMCE.execCommand('mceAddControl', false, 'messageDto.Body');
With UI Dialog the area is empty.
From what I have seen the tinyMCE works hiding the real text-area and adding a new one.
I have also tried setting the content directly but no luck:
tinyMCE.activeEditor.setContent(messagedata.Body, {format : 'bbcode'});
Any advice?
UPDATE: substituted Jquery UI Dialog with jqModal and everything works. I think the problem could rely not in TinyMce but in the Jquery UI Dialog
Perhaps the jQuery TinyMCE plugin will be helpful.
tinyMCE hides the textarea and adds multiple elements using the textarea's ID appended with '_' + element type. To access the contents of the iframe try something like this.
$("#content_ifr").contents().find("body").html(messagedata.Body);
Where #content is the ID of your textarea.
I solved this by initializing the editr with the TinyMCE jQuery plugin with $('#myTextBox').tinymce(..., after opening the dialog. CLosing and reopening the dialog doesn't seem to cause a problem with jQ UI 1.8.16.