I have a jQuery plugin (jQuery.fn.myJQueryPlugin) that loads on a page that also loads a TinyMCE editor.
Is there a way I can get the plugin to work on the content of the TinyMCE editor (via a TinyMCE plugin)?
I've tried something along the lines of
tinymce.PluginManager.add( 'myTinyMCEPlugin', function( editor ) {
editor.on('PostProcess', function(event){
editor.getWin().parent.jQuery(".trigger-class").myJQueryPlugin();
});
});
but that doesn't seem to work
ok, it turns out, it can be done:
tinymce.PluginManager.add( 'myTinyMCEPlugin', function( editor ) {
editor.on('PostProcess', function(event){
// get jQuery from parent window
$ = editor.getWin().parent.jQuery;
$(".trigger-class", editor.getDoc()).myJQueryPlugin();
});
});
Related
I added ajax to single product page using that way and it (ajax)works, but I still have no reaction on
jQuery(document).ready(function($){
$('body').on( 'added_to_cart', function(){
alert("testing!");
});
});
I want to make popup visible after adding product to cart. The popup is standard - with options go cart link or stay there and close popup. What can be wrong? No reaction on that trigger at all
Try this code:
(function ( $ ) {
$( document ).ready( function () {
$( document.body ).on( 'added_to_cart', function () {
alert( "testing!" );
} );
} );
})( jQuery );
I'm using this as well and on my page it works.
If it don't works, be sure your JS script get's loaded by opening the console and check the sources. You can also add an alert to your ready function as well.
I have written a JQuery plugin for some content which is tabbed content on desktop devices and an accordion on mobile devices. I've used the JQuery Boilerplate (https://github.com/jquery-boilerplate/jquery-boilerplate/blob/master/src/jquery.boilerplate.js) as a start point pattern for the plugin file.
I now need to use this plugin on the site within an ajax-loaded modal window. The HTML for the plugin is loading into the modal window fine but the javascript for the plugin is not running.
I believe I need to trigger the init function of my plugin from within the jQuery .load() function which loads the content of the modal window. The function for the ajax overlay looks like this:
menuOverlays = (function(){
var toggleMenuOverlay = function(){
//Toggle a class on the body which triggers styles for the overlay's appearance
$("body").toggleClass('overlay');
//Set the overlay expected to active
var $activeOverlay = $("#"+$(this).data("overlay-element"));
$activeOverlay.toggleClass('active');
//If there is a href on the link that the user clicked on, grab the URL from the link and load the content from that URL into the modal
if($(this).attr("href")){
var urlToLoad = $(this).attr("href") + " #ajaxContent";
$activeOverlay.find(".ajax-content").empty().load(urlToLoad);
}
return false;
};
return{
init: function(){
$("[data-overlay-element]").on("click", toggleMenuOverlay);
}
};
}()),
I have read the following on how to trigger JQuery Boilerplate plugin methods:
Call methods using jQuery Plugin design pattern
and thus tried this:
$activeOverlay.find(".ajax-content").empty().load(urlToLoad, function({
var $t2a = $('.tabs2accordion').tabs2Accordion().data('plugin_tabs2Accordion');
$t2a.init();
});
But I get:
Uncaught TypeError: Cannot read property 'data' of undefined
Any ideas?
Is there a way to dynamically change the skin of the editor (CKEditor 4.1 (revision 80c139aa))?
The only way I could do that is from the config.js (which means that my skins are working ok)
The editor is loaded when a jDialog is opened. On open of the dialog i want to run a command that will change the skin according to user preferences.
I tried with no luck:
CKEDITOR.config.skin = '/moono-dark';
Also this:
CKEDITOR.editorConfig = function( config ) {
config.skin = '/karma';
};
Also this:
CKEDITOR.replace( 'problem', {
customConfig: '../ckeditor/skins/config_flat.js'; //this path is ok
});
Also tried to load the config file with ajax (after deleting the defaulkt config.js file):
$.getScript( "../ckeditor/skins/config_icy_orange.js", function( data, textStatus, jqxhr ) {
CKEDITOR.replace( 'problem' );
});
It always loads the default config.js file...
How can i do this?
You can choose the skin to use whith CKEDITOR.replace like this:
CKEDITOR.replace( 'ckeditor',{
skin: "kama"
});
If the skin isn't in the default plugin folder you should add the path to the skin folder like this:
// Enable "moonocolor" skin from the /myskins/moonocolor/ folder.
CKEDITOR.replace( 'editor1', {
skin: 'moonocolor,/myskins/moonocolor/'
} );
Here a working fiddle with kama
You can see here ckeditor skin samples
I have been trying for two days to get ColorBox to return post results back to the same open box but it just will not do it.
I am using Jquery Form Plugin to Post from a ColorBox. It seems to work in IE 8, but not Safari or FireFox.
In IE 8 it returns the result from the post page "action" and returns the result in the same ColorBox but in FF and Safari it closes the box and sits on the load page (i.e. process1.php)?
I have a page say "process1.php" which loads the ColorBox onLoad (it does this no problem)
Load Page ColorBox Code For process1.php:
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j.fn.colorbox({
href:"process2.php",
escKey: false,
overlayClose: false,
width: "60%",
height: 350,
title: "Process Secure Order",
open:true
});
});
Upon Page Load it will load the "process2.php" displaying a form for the user to submit data.
This is my JQuery Form Plugin Code:
var $j = jQuery.noConflict();
$j(document).ready(function() {
var options = {
beforeSubmit: showSpinner,
success: showResponse,
//resetForm: true,
timeout: 3000,
target: '#output1'
};
function showSpinner() {
$j('#sterms, #accept, #decline, #side-cart').hide();
$j('#working').show().html('Please Wait');
return true;
};
function showResponse(){
$j('#working').hide();
$j('#result').show();
return true;
};
// bind form using 'ajaxForm'
$j('#secure_process01').ajaxForm(options);
});
It posts fine and then just tries to reload the same page with out the ColorBox opening on Load.
It has me stumped why it works in IE and nothing else, any help would be appreciated.
Using JQuery 1.5.2 (JQuery Form Plug In is not working with anything higher has permission issues)
Reference For JQuery Form Plugin http://jquery.malsup.com/form/#ajaxForm
This issue has been solved.
It turned out that the Jquery Form Plugin did not like the 1.6.1 JQuery version so I did the code using Jquery Post and it worked in all browsers.
ColorBox plugin big rap, great and easy.
I have this issue. I'm working on a jquery ajaxed site. I have the main content div in the middle and on top the navigation. I need to AJAX the content, because I have flash backgound so that the flash video won't start from beginning after every page load. The only way I was able to do this was with this sort of code:
$(document).ready(function(){
$.ajaxSetup ({
cache: false
});
//For loading
var ajax_load = "<img src='img/load.gif' alt='loading...' /><p>";
// Var
var loadPage1 = "page1.html";
// Load page
$("#page1").click(function(){
$("#content").hide(2000);
$("#content").html(ajax_load).load(loadPage1);
$("#content").show(2000);
});
All other ways to get the div didn't work because there was issues on getting plugins etc. working in the ajaxed div (content).
So... everythig is working fine - but, the div loads it's content from page1.html and shows it and only after this does it hide it and show it. So it loads the page and then does the effects I want to.
Do I need to queue this some how or what's the proper jquery way? I tried delay, stop etc.. but can't seem to solve this out. It's propably very simple.
Thanks.
Show the element in the load callback handler.
i.e:
$("#page1").click(function(){
$("#content").hide();
$("#content").html(ajax_load).load(loadPage1, function(){
$("#content").show(2000)
});
});
.load() takes 2 arguments, the URI and a callback to fire after load.
API is found here: http://api.jquery.com/load/
function() {
$("#content").hide(2000);
$("#content").html(ajax_load).load(loadPage1, function() {
$("#content").show(2000);
});
}