With the last version of Laravel, I cannot use a simple jQuery plugin.
I try to use bootstrap-datepicker plugin. So I used:
yarn add bootstrap-datepicker
Then, in my app.js:
import './bootstrap';
import 'bootstrap-datepicker';
In bootstrap.js, I have:
try {
window.$ = window.jQuery = require('jquery');
require('bootstrap');
} catch (e) {}
This should make jQuery global I guess.
But when I try:
$(function() {
$('.input-daterange input').each(function() {
$(this).datepicker('clearDates');
});
});
I got the error:
app.js:41747 Uncaught TypeError: $(...).datepicker is not a function
I have this error with a lot of plugins (daterangepicker, datepicker...)
What I have to do to use Webpack / Mix to just use one simple jQuery plugin?
I made it this way:
In console:
npm i jquery-ui-dist
/resources/assets/js/bootstrap.js:
try {
window.$ = window.jQuery = require('jquery');
require('bootstrap');
require('jquery-ui-dist/jquery-ui')
} catch (e) {}
/resources/assets/sass/app.scss:
#import'~jquery-ui-dist/jquery-ui';
In your blade or at the end of boostrap.js
$('.input-daterange input').datepicker(params)
In this case I'm usign jQuery UI DatePicker
If jQuery and jQuery Plugin not in the same file, you need to use $.fn.extend() merge the contents of plugin object onto the jQuery prototype to provide new jQuery instance methods.
$.fn.extend({
datepicker: function() {
require('bootstrap-datepicker');
}
});
Related
I'm working on a project and curious about Alpine JS $dispatch. I'm wondering if code sample no 1 and no 2 are the same or not? If not how do I write $dispatch 'magic' properties provided by Alpine JS in native Javascript?
Code sample 1 (with Alpine JS)
quill.on('text-change', function () {
$dispatch('input', quill.root.innerHTML);
});
Code sample 2 (JavaScript)
quill.on('text-change', function () {
let quillData = quill.root.innerHTML;
let customEvent = new Event('input', {data:quillData});
container.dispatchEvent(customEvent);
});
The Alpine.js $dispatch function uses CustomEvent instead of Event see it here https://github.com/alpinejs/alpine/blob/master/src/component.js#L355
So your vanilla JS sample needs to be:
quill.on('text-change', function () {
let quillData = quill.root.innerHTML;
let customEvent = new CustomEvent('input', {detail:quillData});
container.dispatchEvent(customEvent);
});
Hi I just saw a tutorial on creating ember-addon using ember-cli.
replicating it
versions
Ember Inspector
1.7.3
Ember
1.11.1
Ember Data
1.0.0-beta.16.1
jQuery
1.11.3
EmberComputedFilter
0.0.0.547aa481
command
ember addon ember-computed-filter
//tests/dummy/app/controllers/application.js
import Em from 'ember';
export default Em.Controller.extend({
name: 'Myname',
trimmedName: function() {
return this.get('name').trim();
}.property('name')
});
Issue is definitely with computed property.
I am not sure of my controller is placed in right folder
I missed this one https://github.com/ember-cli/ember-cli/pull/3645
from the guides. http://guides.emberjs.com/v1.11.0/configuring-ember/disabling-prototype-extensions/
// This won't work:
fullNameDidChange: function() {
console.log("Full name changed");
}.observes('fullName')
// Instead, do this:
fullNameDidChange: Ember.observer('fullName', function() {
console.log("Full name changed");
})
I am developing an add-on and I need to inject large chunks of HTML/CSS into the DOM based on a function result in my content script. Here is my main.js script (you may want to skip this part).
var pageMod = require("sdk/page-mod");
var self = require('sdk/self');
var pull = self.data.url;
pageMod.PageMod({
include: "*",
contentScriptFile: [
pull('vendors/jQuery.js'),
pull('util.js'),
pull('views.js'),
pull('myScript.js')]
});
myScript.js needs to inject some html/css form data directory of my addon into DOM. how can I do this?
I tried to use jQuery load and get functions but it didn't work.
I wish I could do some thing like this:
myScript.js
var html = $.get(chrome.extension.getURL("html/place-holder.html"), function (data) )
//I will append html to the DOM
});
var css = $.get(chrome.extension.getURL("css/style.css"), function (data) )
//I will append css to the DOM
});
This is the way I did it in Google Chrome but it seems to be much harder in Firefox
main.js
const {data} = require('sdk/self');
require("sdk/page-mod").PageMod({
include: "*",
contentScriptFile: [
data.url('vendors/jQuery.js'),
data.url('util.js'),
data.url('views.js'),
data.url('myScript.js')],
contentStyleFile: data.url("css/style.css"),
contentScriptOptions: {
html: data.load("html/place-holder.html")
}
});
myScript.js
document.body.insertAdjacentHTML('beforeend', self.options.html);
im not sure if you set pull correctly. try setting var pull to just self.data instead of self.data.url
My website is generating some content dynamically, so I have to somehow launch the highlight.js plugin again after loading it.
This code is used to launch the highlighter:
hljs.initHighlightingOnLoad();
I tried to do something like hljs.initHighlighting(); to do this again but it does not work.
You must set called to false first:
hljs.initHighlighting.called = false;
hljs.initHighlighting();
You can reinitialize all of the codeblocks like this.
$(document).ready(function() {
$('pre code').each(function(i, e) {hljs.highlightBlock(e)});
});
or if you have a div with an ID of myBlock, you can do this.
$(document).ready(function() {
$('#myBlock').each(function(i, e) {hljs.highlightBlock(e)});
});
i hope this could solve your problem..
you have to use
hljs.highlightAll()
since, hljs.initHighlightingOnLoad() is deprecated since version 10.6.
if you're using react, you could apply at componentdidMount..
useEffect(() => {
hljs.highlightAll()
}, []);
or, if another framework, please call that function when page loaded.
more: https://highlightjs.readthedocs.io/en/latest/api.html
I'm using webkit only. I need to inject jQuery into a page that already has prototype loaded. I'm using this code to load jQuery. (you can try in console)
var s = document.createElement('script');
s.setAttribute('src', 'http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js');
s.setAttribute('type', 'text/javascript');
document.getElementsByTagName('head')[0].appendChild(s);
I get an error with just the code above.
How can I use noConflict() on load. If I put the following code after injecting the jquery script, I still get an error.
$(document).ready(function() {
jQuery.noConflict();
// my thing here
});
This also throw an error:
jQuery.noConflict();
$(document).ready(function() {
// my thing here
});
EDIT: Because you're loading the script from another script, you should put the jQuery code you need to run in a callback to a load event for your script:
var s = document.createElement('script');
s.setAttribute('src', 'http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js');
s.setAttribute('type', 'text/javascript');
document.getElementsByTagName('head')[0].appendChild(s);
// Place your code in an onload handler for the jQuery you're loading
s.onload = function() {
jQuery.noConflict(); // release jQuery's hold on "$"
jQuery(document).ready(function( $ ) {
alert( $.fn.jquery );
});
};
Another solution would be to not use this method of loading jQuery. Just hardcode your <script> element, and the code will run in the expected synchronous manner:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery.noConflict(); // release jQuery's hold on "$"
// do this with ready() -------v------ and the "$" will be available inside
jQuery(document).ready(function( $ ) {
// $ is safe for jQuery inside this .ready() callback
alert( $.fn.jquery );
});
</script>
Original answer:
Do this:
var s = document.createElement('script');
s.setAttribute('src', 'http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js');
s.setAttribute('type', 'text/javascript');
document.getElementsByTagName('head')[0].appendChild(s);
jQuery.noConflict(); // release jQuery's hold on "$"
// do this with ready() -------v------ and the "$" will be available inside
jQuery(document).ready(function( $ ) {
// $ is safe for jQuery inside this .ready() callback
alert( $.fn.jquery );
});
Try
var $j = jQuery.noConflict();
$j(document).ready(function() {
// my thing here
});
You can then use $j for any jquery $
$ is the alias/shortcut for jQuery (as well as prototype). NoConflict basically releases control of the $ shortcut, so that once called, the other library has control of it. Try this:
jQuery(document).ready(function() {
// my thing here
});
Here, you use $ first and then use jQuery.noConflict(), the problem is that you've (wrongly) assumed $ is jQuery before you've set up the no conflict:
$(document).ready(function() {
jQuery.noConflict();
// my thing here
});
Here, you've done the opposite. You've done the no conflict bit first, good, but then continued to use $ to access jQuery, which will no longer work (as a direct result of the noConflict() call):
jQuery.noConflict();
$(document).ready(function() {
// my thing here
});
Combining your two efforts you end up with the following. I've also added a $ to the .ready line so that inside the ready function you can still use $ as your jQuery reference.
jQuery.noConflict(); // stops $ being associated with jQuery
jQuery(document).ready(function($) { // use long-hand jQuery object reference to call `ready()`
// my thing here
});