Here is an example of using getContent to display Dojo tooltip based on the element the mouse hovers over:
require(["dijit/Tooltip", "dojo/query!css2", "dojo/domReady!"], function(Tooltip){
new Tooltip({
connectId: "myTable",
selector: "tr",
getContent: function(matchedNode){
return matchedNode.getAttribute("tooltipText");
// What if we want to load this asynchronously???
}
});
});
However this doesn't work if you try to load data asynchronously via getContent(). Does anyonw knows how this can be solved?
When you set 'async: true' in the data-dojo-config property, dojo loader will load modules asynchronously. This means only the modules that you require will be loaded, therefore you won't have dojo/* or dijit/* .
If you were running into this issue on JsFiddle, all you need to do is to change the Framework & Extensions from 'onLoad' to 'No wrap - in < head>', so dojo loader is called in before require is. Here is an example. Please note the fiddle option:
data-dojo-config="async:true"
Related
In my website, the main index.php have a drop-down menu, and if I click on an item, an Ajax loader work and writes in the main div of the main index.
But if this import use foundation function (reveal, callout, tabs..), this import doesn't work.
If in web explorer console I insert again this command '$(document).foundation();', import works but I receive in the log a warning
Tried to initialize drill down on an element that already has a Foundation plugin.
foundation.min.js:65 Tried to initialize dropdown-menu on an element that already has a Foundation plugin.foundation.min.js:65
Tried to initialize off-canvas on an element that already has a Foundation plugin.foundation.min.js:65
Tried to initialize responsive-toggle on an element that already has a Foundation plugin.foundation.min.js:65
Tried to initialize reveal on an element that already has a Foundation plugin.
Can somebody help me to find a clean solution to reload foundation?
In Foundation 6.2.3,
$(document).foundation()
will call
reflow: function(this, plugins)
with plugins undefined, so every plugin will be checked: The function will look at each child of $(document) with a [data-plugin_name] attribute and show this warning if that element already has been initialized:
if ($el.data('zfPlugin')) {
console.warn("Tried to initialize " + name + " on an element that already has a Foundation plugin.");
return;
}
So you can either call foundation() directly on the new element after your ajax request :
$('#your_element').foundation();
or call reflow with a specified plugin (eg. reveal)
Foundation.reflow($('document'), 'reveal')
provided you don't already have an initialized 'reveal' element in your DOM
Mixed: (best solution I think)
Foundation.reflow($('#your_element'), 'reveal');
Firstly, do not call $(document).foundation(); more than once.
If you've updated an element already initialized with a plugin, you'll need to use reInit.
If you've added or completely replaced an element with a new element you'll need to use $(element).foundation();
I use the following technique:
First, when foundation is initialized I store a global:
$(document).foundation();
__foundationRun = true;
Then, no matter when, the following util will handle initialization of new/updated elements:
function foundationUpdate(el) {
if (__foundationRun) {
if (el.data('zfPlugin'))
// existing element already has a plugin - update
Foundation.reInit(el);
else
// new element - initialize
el.foundation();
}
// else leave for foundation to init
}
So you could use like this:
$(".accordion").append("<li>Item</li>");
foundationUpdate($(".accordion"));
or
var newAccordion = $("<ul class='vertical menu accordion-menu'"
+ " data-accordion-menu><li>Item</li></ul>");
$(".container").append(newAccordion);
foundationUpdate(newAccordion);
I'm trying to make an auto slideshow with pics from other .php file and to achieve that i've decided i will use http://responsiveslides.com/ jQuery plugin. The problem is that this plugin doesn't want to work with my photos by "loading" them from other file.
$('.first-option').click(function(){
$('.inner-box').load('file.php .rslides');
});
$(function() {
$("file.php .rslides").responsiveSlides();
});
*CSS/HTML are exactly the same way written like the author wrote in his "Usage".
try this:
$('.first-option').click(function(){
$('.inner-box').load('file.php .rslides', function callback () {
$('.rslides').responsiveSlides();
});
});
I've not used the plugin before, but it appears that you need to apply the bootstrap method to the element that contains the slides you load into your page. So what you're doing in your code is attaching the load method to the click handler, while attaching the responsive slides to an empty selector when the DOM is ready. What I've provided above loads the content, and then using a callback function (when the content has successfully been loaded into the DOM), then calls the bootstrap method onto the original selector.
Edited the code to use the '.rslides' selector.
I'm new to Mithril and trying to wrap my head around this issue.
I have a view that creates a DOM element and has a onClick method declared. Unfortunately when I tried to launch a lightbox such as magnificPopup, jqueryui dialog, fancybox or you name it, it calls the method undefined, even though the lightbox library is loaded.
Is this an issue with Mithril?
Here is my code:
m('a.view-link', {
onclick: function() {
$.colorbox(); // this fails
alert('here is the code'); // alerts do work
$('.view-link').css('border', '2px solid red'); // this works
// $('.white-popup').magnificPopup({ // this claims .magnificPopup is undefined
// type:'inline',
// midClick: true
// });
// $('#dialog').dialog('open'); //jqueryUI dialog claims that .dialog is undefined
},
href: '#'
} , ' Show link in lightbox')
The way Mithril works is by creating a virtual DOM (i.e. a plain-javascript data structure that represents a template), and then rendering this virtual DOM to create a real DOM tree.
When you call m(), you're building this virtual DOM, so at that point the DOM elements don't exist yet in the document. In order to integrate third party libraries, the correct way to do it is via the config attribute (see http://lhorie.github.io/mithril/mithril.html#accessing-the-real-dom-element )
In a nutshell, the config function gets called after rendering, and it takes the element as an argument, along with some other parameters to help control its lifecycle.
The syntax looks like this:
m("a.view-link", {config: function(el) {
$(el).colorbox() //initialize jquery plugin
}})
Might it be that $.colorbox(); is missing the 'subject' element?
$(this).colorbox(); should work better.
I'm writing a CKEditor widget. As I am trying to make it easily distributable, I want to make my css external. While this syntax works:
CKEDITOR.plugins.add('myplugin', {
requires: 'widget',
icons: 'myplugin',
init: function(editor) {
CKEDITOR.dialog.add('myplugin', this.path + 'dialogs/myplugin.js');
var self = this;
editor.on('contentDom', function() {
editor.document.appendStyleSheet(CKEDITOR.getUrl(self.path + 'css/style.css'));
});
}
});
I found that CKSource uses onLoad: function(editor){} in their image2 widget to attach css. This looks more canonical than my code. I'm getting editor = undefined though. What's the catch?
Update:
I'm using the framed option and I definitely want to stay DRY through .appendStyleSheet() to user-facing page as well as to the wysiwyg framed editor. However, I still have problem with init/beforeInit:function(editor), where editor does not seem to have document property populated at that very moment. When I do window.ed = editor though, then I can access the window.ed.document in the console once the page is ready. So, is there any kind of deferred promise going on there? Maybe I'm complicating things, but I definitely want to append a distributable stylesheet and remove it easily.
I found this working:
beforeInit: function(
var ccss = CKEDITOR.config.contentsCss;
if(typeof ccss == 'string'){
ccss = [ccss];
}
ccss.push('/css/style.css'); // <-- my css installed at website root
CKEDITOR.config.contentsCss = ccss;
console.log(CKEDITOR.config.contentsCss);
},
While the issue with isolated css stylesheet might sound over-complicated, I want to achieve an easily demoable state without the need to touch existing files.
Note that in the image2 plugin stylesheet is not added to editor instance, but using CKEDITOR.addCss:
CKEDITOR.plugins.add( 'image2', {
...
onLoad: function( editor ) {
CKEDITOR.addCss( ' ... ' );
}
} );
It is a mistake that the editor is specified as an argument - it always will be null.
If you want to add stylesheet manually using document.appendStyleSheet, then do it on init, or beforeInit, not on onLoad.
Altough, you should know that contentDom will be fired multiple times for one document, e.g. when setting data. So in your case stylesheet would be added many times. Therefore, if you want to add a stylesheet for the framed editor (the one using iframe), you can use config.contentsCss, and if you want to add it for inline editor, then you can freely call:
CKEDITOR.document.appendStyleSheet( ... );
In plugin's onLoad (will be called only once). So most likely you'll want to do both things, to handle inline and framed editors.
So I'm running into this predicament.
<SCRIPT src="../js/tiny_mce/tiny_mce.js"></script>
<SCRIPT type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "simple"
});
</SCRIPT>
<SCRIPT src="../js/admin.js"></script>
The above is called on my PHP page.
I'm then calling
var request = $.ajax(
{
url:"getEvents.php",
type:"POST",
data:{'method':'showevents'},
dataType:"html"
}).done(function(msg){
$('#eventlistbody').html(msg);
});
setTimeout(
function(){
$(".mceSimple").each(function(){
tinyMCE.execCommand("mceAddControl",false, this.id);
})
},2000);
this loads a bunch of textareas.....
the tinyMCE will load on all the text areas the first time it returns..when I click on the reload which runs the above again and returns the text areas they no longer have the tinyMCE attached to them.
I'm not sure why it works the first time and not subsequent times.
You should shut down tinymce correctly before you reload in order to be able to reinitialize a tinymce editor after the reload has been made. This is necessary because tinymce does not like to be dragged around the dom. And initialized editor instances may have one one unique id (using reload will force tinymce to try to initliaze a second editor with the same id - which will fail).
Tinymce3:
To shut down an edtor instance use:
tinymce.execCommand('mceRemoveControl',true, editor_id);
To reinitialize use
tinymce.execCommand('mceAddControl',true, editor_id);
Tinymce4:
To shut down an edtor instance use:
tinymce.execCommand('mceRemoveEditor',true,editor_id);
To reinitialize use
tinymce.execCommand('mceAddEditor',true,editor_id);
For me tinyMCE.remove(editor_id) worked.
Tinymce4: To shut down an edtor instance use:
tinymce.remove();
or indicate one unique id
tinymce.execCommand('mceRemoveEditor',true,editor_id);
To reinitialize use
tinymce.init(conftinymce);
or indicate one unique id
tinymce.execCommand('mceAddEditor',true,editor_id);