I'm trying to build a WebSite but i'm running into some porblems when it comes down to use 2 versions of jquery qith the bootstrap system (also with bootstrap validator).
First of all, i do already know there is a lot of questions in here about 2 versions of jquery, but i spent the last 2 days reading and trying to make this work, but i just can't!
This is why i'm here.
So, in my head tag i had set up the 2 versions i need to run.
1- is to make the bootstrap scripts work, like the dropdown menu and the form validation.
2- is to run the magnific popup script.
This is my head code so far:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="validator/vendor/jquery/jquery-1.10.2.min.js"></script>
the part of the script i'm trying to use with the noConflict () but i had no success.
This is what i did.
*the script i need to change the version of the jquery is for the magnificpopup
<script>
jq1111 = jQuery.noConflict(true);
</script>
<script type="text/javascript">
jq1111(document).ready(function() {
jq1111('.zoom-gallery').magnificPopup({
delegate: 'a',
type: 'image',
closeOnContentClick: false,
closeBtnInside: false,
mainClass: 'mfp-with-zoom mfp-img-mobile',
image: {
verticalFit: true,
titleSrc: function(item) {}
},
gallery: {
enabled: true
},
zoom: {
enabled: true,
duration: 500, // don't foget to change the duration also in CSS
opener: function(element) {
return element.find('img');
}
}
});
});
</script>
Can anyone please help me? Because i'm out of ideas and i'm not that advanced in jquery, of course.
Thanks!
You need to run the jQuery.noConflict between the 2 script tags that include jQuery, including the one for magnificPopup and magnificPopup first:
<script src="jquery-1.11.1.min.js"></script>
<script src="magnific-popup.min.js"></script>
<script type="text/javascript">
var j1111 = jQuery.noConflict() ;
</script>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
j1111.magnificPopup(/* ... */) ;
});
</script>
Use require.js and make whatever module dependant of the necessary jQuery version. For example :
require.config({
enforceDefine: true,
baseUrl: '/js',
shim: {
'jquery#1.11.1': {
exports: '$'
},
'jquery#2.1.1': {
exports: '$'
},
'bootstrap#3.1.1': {
deps: [ 'jquery' ], // use jQuery 2.1.1 !
exports: '$' // need to export something.... so... export jQuery!
},
'magnific': {
deps: [ 'jquery#1.11.1' ],
exports: '$.fn.magnificPopup'
}
},
paths: {
'jquery#1.11.1': 'http://code.jquery.com/jquery-1.11.1.min', // or a CDN...
'jquery#2.1.1': 'lib/jquery.min', // local copy!,
'bootstrap#3.1.1': 'lib/bootstrap.min', // local copy!
'magnific': 'http://dimsemenov.com/plugins/magnific-popup/dist/jquery.magnific-popup.min'
},
map: {
'*': {
'jquery': 'jquery#2.1.1',
'bootstrap': 'bootstrap#3.1.1'
}
}
});
Then, simply require your jQuery library
require(['jquery', 'jquery#1.11.1', 'jquery#2.1.1', 'magnific'], function ($, $1, $2) {
console.log($.fn.jquery, $.fn.magnificPopup);
console.log($1.fn.jquery, $1.fn.magnificPopup);
console.log($2.fn.jquery, $2.fn.magnificPopup);
});
Which, of course, will result in the correct output
2.1.1 undefined
1.11.1 function (n){_();var i=e(this);if("string"==typeof n)if("open"===n){var o,r=b?i.data("magnificPopup"):i[0].magnificPopup,a=parseInt(arguments[1],10)||0;r.items?o=r.items[a]:(o=i,r.delegate&&(o=o.find(r.delegate)),o=o.eq(a)),t._openClick({mfpEl:o},i,r)}else t.isOpen&&t[n].apply(t,Array.prototype.slice.call(arguments,1));else n=e.extend(!0,{},n),b?i.data("magnificPopup",n):i[0].magnificPopup=n,t.addGroup(i,n);return i}
2.1.1 undefined
Related
Hello I am facing a wierd issue that colorpicker doesnt work after the javascript file is minified and $ is assigned a variable named 'k'. It works when i try with $. My code:
requirejs.config({
paths: {
jquery: "/js/jquery/jquery",
"datatables.net": "/js/datatables/js/jquery.dataTables.min",
"datatables.net-css": "/js/datatables/css/jquery.dataTables.min",
tippy: "/js/tippy.all.min",
fixedHeader: "/js/datatables/js/dataTables.fixedHeader.min",
"fixedHeader-css": "/js/datatables/css/fixedHeader.dataTables.min",
jquerymin: "/js/jquery-1.10.2.min",
colpick: "/js/colpick",
colpickcss: "/css/colpick"
},
shim: {
"datatables.net": ["jquery", "css!datatables.net-css"],
fixedHeader: ["css!fixedHeader-css"],
colpick: ["css!colpickcss"]
}
});
require.config({
priority: ["jquery", "jquerymin", "colpick"]
});
require(["jquery", "tippy", "datatables.net", "fixedHeader", "jquerymin", "colpick"], function (k, s)
k(".colpick").css("display", "block");
var t;
k("#displayarea").colpick({
layout: "hex",
submit: 0,
submitText: "OK",
colorScheme: "dark",
onSubmit: function (u, x, v, w) {
k(w).val(x);
t = "#" + x;
k(w).colpickHide();
p.createChart()
}
}).keyup(function () {
k(this).colpickSetColor(this.value)
})
Is there a way to solve this issue. Rename happens during minification but how can i prefer '$' sign instead of the variable 'k'. Thanks.
The issue is fixed. Seems like it was due to reference to jquermin, when i removed from require function it works as expected.
I'd like to embed the following script into my component in nuxtjs app. But since nuxt has no solution for this. I'd like to ask the vue community to see if there was a better way of embedding external 3rd party js scripts?
Where should I be embedding this type of scipt? And what sort of external configurations do I need to add to enable this to work?
I tried adding directly into my template but it doesn't seem to be working.
<script type="text/javascript" src="//downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script><script type="text/javascript">require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us17.list-manage.com","uuid":"XXXXXX","lid":"XXXXXX"}) })</script>
Thanks!
Open up your nuxt.config.js file, and search for the head object. You can add your third party scripts there like this:
// nuxt.config.js
module.exports = {
head: {
title: 'My title',
// etc.
script: [
{ src: "//downloads.mailchimp.com/js/signup-forms/popup/embed.js" },
// You can add multiple third-party scripts here
]
},
// Other stuff
}
Docs: How to use external resources?
I haven't tested it, but I think, since the other part is just javascript, you can add into your page you wan't to show it or a layout file (if you want to show it on multiple pages), like this:
// layout/default.vue
<template>
<!-- Your template -->
</template>
<script>
require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us17.list-manage.com","uuid":"XXXXXX","lid":"XXXXXX"}) });
export default {
// etc...
}
</script>
Although the require part might mess things up...
Let me know if this works!
Insert the MailChimp code inside the <head>
head() {
return {
script: [
{
type: "text/javascript", // mailchimp universal script
src:
"//downloads.mailchimp.com/js/signup-forms/popup/unique-methods/embed.js",
"data-dojo-config": "usePlainJson: true, isDebug: false"
},
{
type: "text/javascript", // mailchimp script for specific popup form
innerHTML: this.getMailchimp
}
],
__dangerouslyDisableSanitizers: ["script"]
};
},
computed: {
getMailchimp() {
if (process.client) {
return JSON.stringify(
window.dojoRequire(["mojo/signup-forms/Loader"], function(L) {
L.start({
baseUrl: "your base url",
uuid: "your uuid",
lid: "your lid",
uniqueMethods: true
});
})
);
}
}
}
I just started using head.js for loading JS files asynchronously with dependencies.
Looking at the API documentation and examples, I see that you can apply labels to JS files, then run some conditions when they are loaded, heres an example in their documentation:
// same as above, but pass files in as an Array
head.load([
{ label1: "file1.js" },
{ label2: "file2.js" }],
function() {
// do something
});
// Labels are usually used in conjuntion with: head.ready()
head.ready("label1", function() {
// do something
});
So basically, that will execute anything in the 2nd block of code (inside the closure), when the file1.js is loaded.
What I wanted to do, is load more files (asynchronously) when other files are loaded..
For example..
First, load the jquery file: jquery.min.ks
After thats successfully loaded, asynchronously load DataTables files: [ dataTables.searchHighlight.min.js, dataTables.conditionalPaging.js, jquery.dataTables.yadcf.js ]
After that, load the main application files: [ myapp_core.js, myapp_whatever.js ]
Heres the code I have now, using head.js, It seems to work ok, but it just doesn't seem right (Having to throw head.load() inside other functions)
// Step #1
head.load(
// First, load the main JS library
[
{ jquery_core: "/include/plugins/jquery-1.11.3/jquery-1.11.3.min.js" },
{ jquery_ui: "/include/plugins/jquery-ui-1.10.4/ui/minified/jquery-ui.min.js" }
],
function() {
console.debug('Loaded jQuery library files, loading jQuery plugin files..');
jquery_plugins();
}
);
// Step #2
function jquery_plugins() {
head.load([
// Load all the jQuery plugin files
"/include/plugins/bootstrap-3.2.0/js/bootstrap.min.js",
"/include/plugins/select2/select2.js",
"/include/plugins/bootstrap3-editable/js/bootstrap-editable.min.js",
"/include/plugins/bootstrap3-editable/inputs-ext/address/address.js",
"/include/plugins/bootstrap3-editable/inputs-ext/typeaheadjs/lib/typeahead.js",
"/include/plugins/bootstrap3-editable/inputs-ext/typeaheadjs/typeaheadjs.js",
"/include/plugins/bootstrap3-editable/inputs-ext/wysihtml5/wysihtml5.js",
"/include/plugins/mustache/mustache.js",
"/include/plugins/slimscroll/jquery.slimscroll.min.js",
"/include/plugins/jquery-cookie/jquery.cookie.js",
"/include/plugins/gritter/js/jquery.gritter.js",
"/include/plugins/jquery-tooltipster-master/js/jquery.tooltipster.js",
"/include/plugins/bootstrap-wizard/js/bwizard.js",
"/include/js/apps.js",
"/include/js/enhanced-select.jquery.min.js",
"/include/js/jquery.multi-select.js",
"/include/plugins/intro/intro.js",
"/include/plugins/switchery/switchery.min.js",
"/include/js/jquery.multiselect.js",
"/include/plugins/parsley/src/parsley.js",
"/include/plugins/parsley/src/extra/validator/APPcustom.js",
"/include/plugins/parsley/src/extra/plugin/parsley.remote.js",
"/include/plugins/bootstrap3-timepicker2/js/bootstrap-timepicker.js",
"/include/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js",
"/include/plugins/SamWM/numeric/jquery.numeric.min.js",
"/include/plugins/moment/moment.min.js",
"/include/plugins/flot/jquery.flot.min.js",
"/include/plugins/flot/jquery.flot.time.min.js",
"/include/plugins/flot/jquery.flot.resize.min.js",
"/include/plugins/flot/jquery.flot.pie.min.js",
"/include/plugins/flot/jquery.flot.stack.min.js",
"/include/plugins/flot/jquery.flot.crosshair.min.js",
"/include/plugins/flot/jquery.flot.categories.js",
"/include/plugins/sparkline/jquery.sparkline.js",
"/include/plugins/bootstrap-tagsinput/bootstrap-tagsinput.min.js",
"/include/plugins/bootstrap-tagsinput/bootstrap-tagsinput-typeahead.js",
"/include/plugins/jquery-tag-it/js/tag-it.min.js",
"/include/plugins/bootstrap-select/bootstrap-select.min.js",
"/include/plugins/contextMenu/src/jquery.ui.position.js",
"/include/plugins/contextMenu/src/jquery.contextMenu.js",
"/include/js/jquery.mask.min.js",
"/include/plugins/jquery-jstree/dist/jstree.min.js",
"/include/plugins/jquery.expander.js",
"/include/plugins/jquery-labelauty/source/jquery-labelauty.js",
"/include/plugins/jquery-file-upload/js/vendor/jquery.ui.widget.js",
"/include/plugins/jquery-jscroll/jquery.jscroll.js",
"/include/js/modernizr.js",
"/include/plugins/jquery-messi/dist/messi.js",
"/include/plugins/jquery-tmpl/jquery.tmpl.min.js",
{ jquery_highlight: "/include/plugins/jquery-searchhighlight/jquery.highlight.js" },
{ datatables_core: "/include/plugins/DataTables/minify/datatables.min.js" },
{ datatables_searchHighlight: "/include/plugins/DataTables-Plugins/features/searchHighlight/dataTables.searchHighlight.min.js" },
{ datatables_conditionalPaging: "/include/plugins/DataTables-Plugins/features/conditionalPaging/dataTables.conditionalPaging.js" },
{ datatables_ellipsis: "/include/plugins/DataTables-Plugins/dataRender/ellipsis.js" },
{ datatables_yadcf: "/include/plugins/yadcf-0.8.8/jquery.dataTables.yadcf.js" },
{ ckeditor: "/include/plugins/ckeditor/ckeditor.js" }
],
function() {
console.log('All jQuery plugins loaded, loading APP js files...');
APP_js_files();
});
}
// Step #3
function APP_js_files(){
head.load([
// Load the application JS files
{ APP_plugins: "/include/js/APP_plugin.js" },
{ APP_intro: "/include/js/APP_intro.js" },
{ APP_app: "/include/js/APP_app.js" },
{ APP_confirmation: "/include/js/APP_confirmation.js" }
],
function() {
"use strict";
console.log('Successfully loaded all APP js files!');
$.ajaxSetup({
cache:false
});
App.init();
template.init();
account.init();
admin.init();
assets.init();
forms.init();
});
}
The above code is inside init.js, which is loaded via..
<script type="text/javascript" src="/include/js/head.min.js" data-headjs-load="/include/js/init.js"></script>
Is this the right way to do it? The documentation on head.js is pretty limited.
Thanks
Current implementation don't support query or ordering of loading, as I can sas in source code, that's why your solution of the problem is one of the best.
So I want to use requirejs, kendo ui and knockout JS together.
I read Using Kendo with RequireJS and the Knockout JS article Asynchronous Module Definition (AMD) With RequireJs and then I found the Knockout-Kendo library via Knockout.js and Kendo UI - a Potent Duo and I thought to myself - this is awesome - I'm about to be in a beautiful world of rainbows, MVVM, AMD and HTML5 lusciousness.
But now it seems more like I'm in a dark underground world of pain and suffering. Here's the deal...
I have a simple web site that has a js folder that has the following inside:
jquery-2.0.3.min.js
knockout-2.3.0.js
knockout-kendo.min.js
require.js
kendo-ui/** all the kendo files under here
and an index.html file that I have put in the root containing this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/require.js"></script>
</head>
<body>
<div id="grid" data-bind="kendoGrid: items"> </div>
<script type="text/javascript">
require.config({
baseUrl : 'js',
paths: {
'jquery': 'jquery-2.0.3.min',
'knockout': 'knockout-2.3.0',
'kendo': 'kendo-ui',
'knockout-kendo': 'knockout-kendo.min',
},
shim: {
'jquery': {
exports: 'jQuery'
}
}
});
define('mainViewModel', ['knockout'], function (ko) {
return function mainViewModel(){
this.items = ko.observableArray([
{ id: "1", name: "apple"},
{ id: "2", name: "orange"},
{ id: "3", name: "banana"}
]);
};
});
require(['jquery','knockout','mainViewModel','knockout-kendo'],
function($, ko, mainViewModel) {
ko.applyBindings(new mainViewModel());
});
</script>
</body>
</html>
As far as I can fathom, that should be basically correct but I am getting this exception:
GET http://localhost/ko-kendo/js/kendo-ui.js [HTTP/1.1404 Not Found 1ms]
Error: Script error for: kendo
http://requirejs.org/docs/errors.html#scripterror #http://localhost/ko-kendo/js/require.js:163
Seems that knockout-kendo is trying to load up kendo-ui.js but it, unsurprisingly since it doesn't exist, can't find it.
In an attempt to verify the mappings I knocked up this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/require.js"></script>
</head>
<body>
<div id="grid" data-bind="kendoGrid: items"> </div>
<script type="text/javascript">
require.config({
baseUrl : 'js',
paths: {
'jquery': 'jquery-2.0.3.min',
'knockout': 'knockout-2.3.0',
'kendo': 'kendo-ui',
'knockout-kendo': 'knockout-kendo.min',
},
shim: {
'jquery': {
exports: 'jQuery'
}
}
});
define('mainViewModel', ['knockout'], function (ko) {
return function mainViewModel(){
this.items = ko.observableArray([
{ id: "1", name: "apple"},
{ id: "2", name: "orange"},
{ id: "3", name: "banana"}
]);
};
});
require(['jquery','knockout','mainViewModel','kendo/kendo.grid.min'],
function($, ko, mainViewModel) {
var vm = new mainViewModel();
$(document).ready(function () {
$('#grid').kendoGrid({
dataSource: new mainViewModel().items()
});
});
ko.applyBindings(vm);
});
</script>
</body>
</html>
That worked fabulously (well, it worked) - you can see that the difference between the two is that in the second case I am not using knockout-kendo and therefore, the binding does not apply, which is why I do that kendoGrid thing in the document ready function.
So, does anyone know how on this green and beautiful earth I can get knockout-kendo working with require JS? I feel like there might be something fancy with a shim that would get it going but I can't work it out...
Knockout-Kendo is set to depend on a kendo module. The easiest thing to do is point kendo at the kendo.web file like: kendo: kendo.web.min (in whatever directory kendo.web.min.js is in).
I am currently passing in the TinyMCE source as a dependency, and then calling
tinyMCE.init({}); but it is not initializing TinyMCE. When I console.log TinyMCE, it returns a TinyMCE Object. Code sample below:
define([
'jQuery',
'Underscore',
'Backbone',
'TinyMCE'
], function($, _, Backbone, tinyMCE) {
tinyMCE.init({
mode: "exact",
elements: $('textarea'),
theme: "advanced",
theme_advanced_toolbar_location: 'top',
theme_advanced_buttons1: 'bold,italic,underline,bullist,numlist,link,unlink',
theme_advanced_buttons2: '',
theme_advanced_buttons3: '',
theme_advanced_toolbar_align: 'left',
plugins: 'paste,inlinepopups',
width: '100%',
height: textarea.attr('data-height'),
oninit: function () {
console.log('TargetTD :');
console.log(targetTD);
}
});
}
});
You can use 'shim' for requirejs 2.1.0 or higher, see example of main script below:
requirejs.config({
baseUrl: "js",
paths: {
tinyMCE: 'libs/tinymce/tiny_mce'
},
shim: {
tinyMCE: {
exports: 'tinyMCE',
init: function () {
this.tinyMCE.DOM.events.domLoaded = true;
return this.tinyMCE;
}
}
}
});
requirejs([
'tinyMCE'
], function (tinyMCE) {
console.log(tinyMCE);
// your code here
});
Edit: I added iimuhin’s snippet from below in the comments. It doesn’t seem to work without it; I added it because future searchers will appreciate avoiding the added IE headache.
Had the same problem. My solution was to use TinyMCE jQuery plugin instead of TinyMCE directly. This way it works fine.
define(['jquery', 'tiny_mce/jquery.tinymce'], function ($) {
$('textarea').tinymce({
script_url : 'js/tiny_mce/tiny_mce.js',
theme : 'advanced',
theme_advanced_buttons1 : 'fontselect,fontsizeselect,forecolor,bold,italic,underline,strikethrough,justifyleft,justifycenter,justifyright,justifyfull,removeformat,indent,outdent,numlist,bullist,copy,paste,link',
theme_advanced_buttons2 : '',
theme_advanced_buttons3 : '',
theme_advanced_toolbar_location : 'top',
theme_advanced_toolbar_align : 'left'
});
});
You can implement tinyMCE as usual in a backbone view. But you must wait until the view's el is inserted in the dom before initializing tinyMCE. In javascript, there is now way to detect when element is inserted in the DOM. But when a backbone view is rended (Backbone.View.render()), the element will be inserted in the dom after the current browser's process. Use a "setTimeout" to initialize the the tiny mce element with 1 millisecond (which will simply execute the code in the next browser's process).
var FormTextArea = Backbone.View.extend({
template : _.template('<%=value%>'),
tagName: 'textarea',
className: "control-group",
render: function(){
this.$el.html(this.template(this.model.toJSON()));
setTimeout(_.bind(this.initMCE, this), 1);
return this;
},
initMCE: function(){
tinymce.init({selector: 'textarea'});
}
});
var v = new FormTextArea({
model: new Backbone.Model({value: '<h2>Heading 2</h2><p>A paragraph here</p>'})
});
$('body').append(v.render().el);
Here is a jsfiddle :
http://jsfiddle.net/pCdSy/10/