I have two divs on the same page using CKEditor. I can get a toolbar to load for the first div, but not the second. I realize this is the case because I'm using an id for ckToolbar instead of a class. However, if I use a class, the toolbar doesn't show up.
Div 1
<div id="ckEditor">
<div id="ckToolbar"></div>
<div class="editor" data-bind="wysiwyg: txtBody, value:txtBody, valueUpdate:'keydown'"></div>
</div>
Div 2
<div id="ckEditor">
<div id="ckToolbar"></div>
<div class="editor" data-bind="wysiwyg: txtHelpText, value:txtHelpText, valueUpdate:'keydown'"></div>
</div>
Config.js
config.extraPlugins = 'sharedspace';
config.sharedSpaces = { top: 'ckToolbar' };
I am also using Knockout JS. I created a custom binding and a div instead of a textarea because I couldn't use the CKEDITOR replace function with my binding.
You can't have two elements on the same page with same id's. How is JavaScript supposed to recognize which one you have in mind? You should either use classes or different id's and adjust you knockout code to handle that.
Sorry for the general answer but there is simply no way around it. You can't have two elements with same id on a single page.
NOTE: CKEditor auto replaces elements with ckeditor class however if you are using knockout, I don't think this will me much of a use for you.
Related
After retrieving info, I want to show it inside a bootstrap panel by using jQuery.
I use the .html() function to show the panel.
$('#id_div').html('<div class="panel panel-info"><div class="panel-heading"><h3 class="panel-title">'+my.awesome.title+'</h3></div><div class="panel-body">Content here :) There is more and this is becoming a super long line ...</div></div>');
I have found that there is a way to break this into several lines by using .append() . I have tried the following:
$('#id_div').append('<div class="panel-body">Adding more content here :) </div>');
This does not work, since the added text appears outside the panel.
How do I specify where exactly I want the code to be appended?
Solved.
According to David, by using the .find() function, you can specify where exactly you want the text to be appended.
$('#id_div').find('.panel-body').append('Adding more content here :)');
I have two hidden <div> elements which are hidden at the bottom of my page like so:
<div class="hidden-unit" style="display:none;">
<h1>ad unit one</h1>
</div>
<div class="hidden-unit" style="display:none;">
<h1>ad unit two</h1>
</div>
Further up my page I have another two div elements, like so...
<div class="visible-unit"></div>
<div class="visible-unit"></div>
I would like to loop through each of the hidden units, place the content from the first .hidden-unit into the first .visible-unit and then likewise for the second.
The content that sits within each .hidden-unit will actually be an inline script used for displaying ads, this is passed through from an array into a view that I have created in PHP so there is a strong possibility that more content could be added to the array or removed, so this loop needs to accommodate for such situations.
I have tried a number of solutions using jQuery's .each() but I can't seem to get it right. I've also created a JSFiddle should anyone want to demonstrate a solution:
https://jsfiddle.net/p89sq2df/3/
I've tried loads of different combinations and the latest attempt only seems to be populating the .visible-unit elements with the 'ad unit two' text.
$('.hidden-unit').each(function() {
$('.visible-unit').html($(this).html());
});
Anyone had to do anything like this before? I appreciate it's an odd one.
You can try using the index:
$('.hidden-unit').each(function(index) {
$('.visible-unit').eq(index).html($(this).html());
});
var visibleUnits = $('.visible-unit').toArray();
var x = 0;
$('.hidden-unit').each(function() {
visibleUnits[x].html($(this).html());
x++;
});
The gotcha is that there could be more .hidden-unit elements than .visible-unit elements, which would cause an exception. But this you put you on the right track.
You need to use the index the elements so you update matching instances. This can be done using each or html(function)
$('.visible-unit').html(function(index){
return $('.hidden-unit').eq(index).html();
});
Since you mention that the content is loaded by script originally, you may need to allow time for any asynchronous loading (if any) in the scripts
DEMO
Rather than trying to match indices and having to maintain two lists of divs, you can clone the hidden divs and add them to a container, or insert them before or after another element if you really don't want a container element.
$(".hidden-unit").clone()
.removeClass("hidden-unit")
.removeAttr("style")
.addClass("available-unit")
.appendTo(".container");
Working fiddle here: https://jsfiddle.net/ygn34zL8/
I have a JSP page with 6 custom widgets in a TabContainer. The code looks something like this:
<div data-dojo-type="dijit/layout/TabContainer" data-dojo-props="region: 'center', gutters:false">
<div data-dojo-type="dijit/layout/ContentPane" title="<b>Registries</b>">
<div data-dojo-type="my/custom/Widget"></div>
</div>
...(5 more ContentPanes like this)
</div>
When the page loads, each tab loads each widget and it's pretty slow. Most of the time, I only need to access one of those tabs and don't care about the others, so I decided I want to load this content dynamically.
When the href property is specified for a Dojo ContentPane, that content will not be loaded or parsed until that tab is selected. The only problem is, that means I would have to create 6 new .html files that have nothing besides in them. It's like a declarative way to programmatically load widgets... kind of weird.
Is there a way I can simply tell the ContentPane I just want it to dynamically load my custom widget instead of having to create html markup? Currently, I created a Spring controller method that accepts a String with a "widget" property and returns a string that is a div with the data-dojo-type set to the widget name, which is a programmatic way define declarative markup to be loaded programatically... it just keeps getting weirder! So now all of my content panes look like this:
<div data-dojo-type="dijit/layout/ContentPane" title="<b>Registries</b>" data-dojo-props='href:"rest/dynamicWidgetHtml/my.custom.Widget/"'></div>
Where "my.custom.Widget" is a spring controller path variable.
Any way to simplify this and eliminate the need for calling the server to build the div so the widget can be dynamically loaded when the tab is selected?
Would like to know how familiar are you with JavaScript and Dojo widgets.?
I have tried to answer the questions with some assumptions.
1) Assuming that data-dojo-type="my/custom/Widget" is a custom dojo widget i.e dojo widget contained in a javascript file.
2) You are able to attach a function to the onShow event of the ContentPane as shown below.
First is you need to attach a function to the contentPane "onShow" event. say myFirstTabContentPaneShowAction()
and specify a element tag with a unique ID. I have used widget1 as an example below. The onShow event will be fired when you select the tab.
<div dojoType="dijit.layout.ContentPane" onShow="myFirstTabContentPaneShowAction()">
<div id="widget1" ></div>
</div>
The myFirstTabContentPaneShowAction() will be as follows.
function myFirstTabContentPaneShowAction() {
require ( ["dojo/parser", "dojo/dom", "my/custom/Widget"] , function ( parser, dom) {
widgetHandle = parser.instantiate([dom.byId("widget1")], {data-dojo-type: "my.custom.Widget"});
});
Hope it helps.
I'm using chosen.js to implement jQuery dropdowns... https://github.com/harvesthq/chosen
If I want multiple dropdowns styled differently is there a way to apply a different stylesheet to each dropdown? There is a clue here but I haven't figured it out yet.. https://github.com/harvesthq/chosen/issues/935
If stof's answer doesn't work (from the link provided), I guess you can still wrap it in a div with a custom class or ID, can't you ?
<div class="myCustomStyledChosen">
<select...
</div>
and then in your stylesheet
.myCustomStyledChosen
{
yourstyles..
}
On the JSTL page I have following divs
<div dojoType="dijit.layout.TabContainer" style="width: 100%; height: 100%;" doLayout="false" id="dojoTabbedPane" >
<c:forEach items="${summariesMap}" var="summaryEntry">
<div dojoType="dijit.layout.ContentPane" title="${summaryEntry.key}">
I try to find all divs under (including dojoTabbedPane) in order to recersively destroy all the contentPane under it. Then I can use jQuery.load() to reload contents and use
dojo.parser.parse(dijit.byId("dojoTabbedPane"));
to re-parse the component to make sure the tabbedPane can be rendered(otherwise it doesn't and cause memory leak or error)
Here the question is:
(1) Am I on the right track to re-parse the dojo TabbedContainer?
(2) Why each time the findWidgets function just return array with size 0?
Thanks in advance.
I'll answer 2 first: because dijit.findWidgets expects a DOM node, not a widget. If you need to find all widgets inside another widget, you can use getDescendants instead:
var descWidgets = dijit.byId("dojoTabbedPane").getDescendants();
Onto question 1: First off: if you want to destroy all the tabs in a TabContainer, you can use :
dijit.byId("dojoTabbedPane").destroyDescendants();
Now, if I understand you correctly, you subsequently grab a string of HTML from the server (using jQuery), and want to add it to the TabContainer. This new content contains several ContentPane divs, and you want these to become the new tabs in the TabContainer.
I may be wrong here, but I don't think that's doable without some gnarly hack. Once you've parsed/instantiated a TabContainer, you should add tabs using addChild, passing instantiated ContentPanes.
This means that if you get new HTML content like this from the server (via your jQuery load):
<div dojoType="dijit.layout.ContentPane" title="new tab1">foo</div>
<div dojoType="dijit.layout.ContentPane" title="new tab2">bar</div>
.. then your best bet is to remove the old TabContainer and make a new one, then parse the whole thing. If you're able to change the content you get from your server, perhaps you can simply wrap that in <div dojoType="dijit.layout.TabContainer....