Two instances of a partialview are loaded on a page.
Partialview has a textarea with id 'newNote'. Hence, when page loads we have two textarea elements with same id - 'newNote' but under two different containers.
<html>
<div id='container1' style="display:none">
--partialview
<textarea id='newNote'/>
</div>
<div id='container2'>
--partialview
<textarea id='newNote'/>
</div>
</html>
I want to convert textarea to tinymce Rich text editor based on the active container (in above case container 2).
Can someone pls tell me how to handle two instances with same id.
You should never have two elements on the same page with a non-unique id
HTML4
HTML5
Related
I'm using template plugin for inserting html snippets. For example:
<a class="button" href="#"><span class="button-inner"><span class="button-label">Button Text</span></span></a>
Everything goes fine until editor tries to change button's text and exit its html to add some more text after. The caret doesn't leave the A tag and stops within spans or before closing A tag. So in the end we get something like this:
...Button Text</span> some more </span> text here </a>
It breaks the layout completely.
Is there a way to mark the link as single solid block or spans as non-enterable with some attributes to prevent inserting text within unexpected places?
You use the contenteditable="false" attribute to make a portion of your HTML non-editable. Here is an example:
http://fiddle.tinymce.com/Zxgaab
I changed your link HTML to this:
<a contenteditable="false" class="button" href="#">
<span class="button-inner">
<span class="button-label">
Button Text
</span>
</span>
</a>
It will act like a single character in the editor...
I've encountered a problem when combining JQuery sortable and TinyMCE.
My issue is similar to:
TinyMCE instances in jquery sortable; but I don't know how to "classed all MCE Instances with .tinyMCE", described in the solution.
It would be grateful if anyone can help me out of this.
You need add "tinyMCE" class for all textareas that used tinyMCE.
If you want use solution from example solution you also need to have unique id for each textarea. Like this
<div>
<textarea class="tinyMCE" id="textarea1"></textarea>
</div>
<div>
<textarea class="tinyMCE" id="textarea2"></textarea>
</div>
For some unavoidable reason, I had to wrap autocomplete result in two divs, so my final output is as
<div id="resultDiv">
<div id="scrollerDiv">
<li>...</li>
<li>...</li>
<li>...</li>
</div>
</div>
instead of
<li>...</li>
<li>...</li>
<li>...</li>
But this removes all styling and events from my result (i.e. <li>s). My 'select' event was getting called, results were navigatable using up and down arrows, background of selected record was getting highlighted etc. before adding these divs but all this functionality is gone. Is there any change/s I can do in 'jquery.ui.autocomplete.js' and/or 'query.ui.css' to add this div existance and get everything working back?
I achieved this by applying css class of <ul> to <div> dynamically.
I have a custom Wizard, defined as follows:
<wicket:panel>
<div>
<form wicket:id="form" class="wizard">
<span class="wizardoverview" wicket:id="overview"/>
<div class="wizardheader" wicket:id="header"/>
<div wicket:id="view" class="wizardpage"/>
<span wicket:id="feedback"/>
<div class="buttons">
<span wicket:id="buttons"/>
</div>
</form>
</div>
</wicket:panel>
The wizardpage is in this case a Panel with its own form.
This form contains a new Panel, which in turn contains a GridView.
The GridView contains a set of Panels, which each contain a FormComponentFeedbackBorder, which in turn contains input TextFields.
Phew!
So we have this:
Wizard->WizardpagePanel->Form->GridContainingPanel->GridView->Panel[]->FormComponentFeedbackBorder->TextField
When TextField fails validation, no feedback is rendered at all.
If I add a FeedbackPanel to the GridContainingPanel the error messages are rendered, but FormComponentFeedbackBorder renders nothing.
Any pointers as to what can be wrong?
I had a similar problem with a ListView instead of GridView, but that problem was resolved when I set listView.setReuseItems(true);
Is there a similar setting for GridView, or is there a different solution to this problem?
That was it:
gridView.setItemReuseStrategy(new ReuseIfModelsEqualStrategy());
solved the problem.
Thanks, rotsch.
So I have something like this:
<html>
<body>
<div id="jqt">
<div id="page1">
...
</div>
....
<div id="generic">
Some generic page to use as a template
</div>
</div>
</body>
</html>
and I want to create a new page on after everything is loaded and the user does some action.
$('#generic').clone().attr('id', 'some_new_page').appendTo('#jqt');
What happens is the new page ends up showing up in front of everything and doesn't seem to have and jqtouch events or styles added.
How do initialize this page (or at least have jqtouch reinitialize the whole html file)?
I don't want it to show up at first, I just wanted loaded and ready in the background.
Have you tried to do a deep clone with data and events instead?
$('#generic').clone(true, true).attr('id', 'some_new_page').appendTo('#jqt');