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.
Related
I'm making a form using a purchased theme with bootstrap 3. The forms I like from the theme use a CSS class called ".smart-form *" which affects everything inside the form where it's being used. I'm also using Summernote inside the form and, as shown in the picture below, everything seems ok:
The problem comes when opening the image or link attachment modal window. Here's a picture of the class:
And here's a picture of how the modal looks:
Now, if I uncheck those 3 attributes from that class, I get a perfect modal window but the rest of the form gets broken. Here's the correct modal window:
Is there any way of telling Summernote NOT to inherit those 3 CSS attributes?
Thanks!!!
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 am doing a design screen for my customers and i use jquery sortable portlets.
i put the html editor each column.When u write something into the editor then drag drop the portlets the editor's content is disappearing.After droping it,i change the active mode of editor to preview and design,then i see that content is there.How can i solve this problem ?
I play now a little with the jquery sortable portlets and I notice that its not just move the position of each div, but redesign the full struct of the divs on each drag-drop.
This is mean that is probably copy/paste the inside div on every moving action.
Now your editor is initialize what its show, and from the moment that the portless is move the div content to other possition, the initialize from the editor is lost.
To gain it again I suggest to reinitialize the editor after any drag-drop.
i'm new to jquery and I like to know how to do the following:
1) Dynamically create tabs with iFrame inside
2) ability to remove tabs on the fly without postback
3) tabs are unlimited and can shrink depending on the length of the browser
Sorry if this may be too much to ask, but i'd like to learn how to do this. A perfect example of what I'm trying to achieve is the tabs present in the new Yahoo mail UI. When the user selects a mail entry, a new tab will be generated on the fly.
Thank you
Try this example.. This creates tabs dynamically the way you probably wanted.
Dynamically adding jQuery Tabs
Here's a quick working demo..
Dynamic TAB Demo
You can use jQuery Tabs 3 Plugin.
You can use the jQuery Tabs element at http://docs.jquery.com/UI/Tabs
The jQuery tabs plugin can be used. You will not lose the state on the other tabs, because they aren't removed, but simply hidden (display: none).