I have npm installed the jquery-ui. It's all split into components there and it seems pretty hard to use them in my javascript files that I compile using laravel-mix.
This is how I managed to invoke draggable to a set of elements:
require('jquery-ui/themes/base/draggable.css');
var jQuery = require('jquery');
var draggable = require('jquery-ui/ui/widgets/draggable');
var draggableOptions = {
revert: 'invalid',
// other options...
cursor: 'move'
};
$('.resource').each(function(index, resource) {
new draggable(draggableOptions, $(resource));
});
// The documented approach didn't work because there was no function 'draggable'
// $('.resource').draggable(draggableOptions);
Now I am trying to use the jquery-ui effects like bounce or shake and I can't manage to import and/or invoke them in any way either like documented or like above. And all in all I have the feeling that I'm doing it all wrong and it should be easier.
Been at this my self today, and I've come to this sort of solution.
Edit you /resources/assets/js/app.js and add the following:
import $ from 'jquery';
window.$ = window.jQuery = $;
import 'jquery-ui/ui/widgets/autocomplete.js';
import 'jquery-ui/ui/widgets/sortable.js';
As you can see, you need to add the widgets that you intend to include.
Source: https://github.com/JeffreyWay/laravel-mix/blob/master/docs/jquery-ui.md
I hope that it might help you on the way.
Related
I try the last hours to integrate EasyAutocomplete into RAILS 6. But not so easy.
What I did :
Install Javascript Package with yarn:
# yarn add easy-autocomplete
Add this in the file app/javascript/packs/application.js
import “easy-autocomplete”
Add this in the file app/assets/stylesheets/application.css
*= require easy-autocomplete
*= require easy-autocomplete.themes
Then start the Rails Server and refresh the Web Page.
Then try to use it. Go into the developer console and type :
var options = {
data: ["otto", "hans", "paula"]
};
$("#task_name_search_field").easyAutocomplete(options);
task_name_search_field was previously defined as id :
<input type="search" class="form-control" id="task_name_search_field">
I got this message:
TypeError: $(...).EasyAutocomplete is not a function
Any idea ?
I had the same problem. Turbolinks does not give access to the script, the code needs to be run after it is loaded, something like this:
document.addEventListener("turbolinks:load", function() {
var options = {
data: ["otto", "hans", "paula"]
};
$("#task_name_search_field").easyAutocomplete(options);
});
In order for the autocomplete to work, you need to add a script file to the application.js like this:
require("packs/youfile")
If it helps you, here is an example of my code:
document.addEventListener("turbolinks:load", function() {
$input = $("[data-behavior='autocomplete']")
var options = {
getValue: "full_name",
url: function(phrase) {
return "/search.json?q=" + phrase;
},
categories: [
{
listLocation: "cameras",
header: "<strong>Cameras</strong>",
}
],
list: {
onChooseEvent: function() {
var url = $input.getSelectedItemData().url
$input.val("")
Turbolinks.visit(url)
}
}
}
$input.easyAutocomplete(options)});
I suppose you wouldn't have included jquery in your application.js. You need to do explicitly as it doesn't get included automatically with rails 6 app.
I ran into a similar issue. I'm a n00b at Webpacker, but by default it doesn't seem to compile in the same order in which plugins are included.
To get around the issue I did this workaround which just wraps the plugin code in an anonymous jQuery function, like so:
(function($) {
//Eac plugin code
})(jQuery);
https://github.com/pawelczak/EasyAutocomplete/issues/200#issuecomment-212277620
Maybe there is a way in the configs to force compilation in the correct order. This looks promising https://stackoverflow.com/a/43005332/148390
Add script-loader to package.json then add
import 'script-loader!jquery/dist/jquery.min'
in app/javascripts/application.js
Check in your browser that $().jquery yields a proper result.
Material UI (React) uses a theaming solution where the theme object is created in JS then passed into the top level component. Creating the theme object in Opal can be complicated as the Material component expects a JS function to be passed in which actually creates the theme on the fly.
Has anyone got an example of this working well?
After some experimentation, I got this working well by mixing JS and Opal code so here is the solution in case anyone else comes up with this. (There may be a better 'more Opal' solution, so if there is please do post an alternative answer, but the one below does work well.
First import the JS libraries with webpack:
import { MuiThemeProvider, createMuiTheme } from '#material-ui/core/styles';
import indigo from '#material-ui/core/colors/indigo';
import pink from '#material-ui/core/colors/pink';
import red from '#material-ui/core/colors/red';
global.createMuiTheme = createMuiTheme;
global.MuiThemeProvider = MuiThemeProvider;
global.indigo = indigo;
global.pink = pink;
global.red = red;
Add the following to your Javascript assets:
// app/assets/javascripts/my_theme.js
const my_theme = createMuiTheme(
{ palette: {
primary: { main: pink[500] },
secondary: { main: indigo[500] }
}
});
Then provide the theme in your top-level Component code:
class MyRouter < HyperComponent
include Hyperstack::Router
render(DIV) do
MuiThemeProvider(theme: `my_theme` ) do
CssBaseline do
...
end
end
end
end
I'm using react-highcharts and I'm trying to find a way to trigger an event when one of the Y-axis categories is being clicked. I'm using xrange graph.I want to get the offset of the value that was clicked. For example, if i have:
CatA
Catb
CatC
If I will click on CatB I will get 1.
I found a jquery solution, which give me the value itself. Its not a problem to get all the elements and iterate over them and found the offset myself. The solution of jquery:
$("#container .highcharts-yaxis-labels text").click(function() {
alert($(this).text());
});
I'm looking for react/react-highcarts solution for that.
Update
Thanks Kamil Kulig! Im getting trouble with the library. I import the library as
import HighchartsCustomEvents from 'highcharts-custom-events';
And nothing happned, also i added this code at componentWillMount function:
template.yAxis.events.click = function () {
alert(1);
};
I saw the docs and I didnt find any offset function, which means that sould I use jquery anyway? or do u have any idea?
Highcharts offers the custom events module that is able to handle the actions that you require.
Module reference on npm: https://www.npmjs.com/package/highcharts-custom-events
Module reference on Highcharts website: https://www.highcharts.com/products/plugin-registry/single/15/Custom-Events
Sample code:
yAxis: {
labels: {
events: {
click: function () {
// do something
}
}
}
}
I just migrated to backbone and have a strange behaviour.
I attach draggable to an element which is created by a script, thus not directly available in DOM.
EDIT:
The element that is created is .nav, $("#viewer") as container is already in the DOM.
In plain jQuery i used .on and mousemove event for this and it worked.
With backbone I use the same in the initialize method:
initialize: function(options) {
this.viewer = $("#viewer");
this.viewer.on("mousemove", '.nav', function() {
$(this).draggable();
});
This seems to work, but only one time.
After dragging the element one time, I can't drag it anymore.
Are there conflicts with the events? Am I missing something?
You have to refer to $('#viewer') after you've called render(). initialize is called before render, and so the DOM element doesn't exist.
Also, use this.$('#viewer'), and it will grab the element (after render) even if it hasn't been appended to your page's DOM.
myView = new ExampleView({ model: myModel });
$(body).append(myView.render().el);
myView.onRender();
// -------------
// Now on your view:
onRender: function() {
this.viewer = this.$('#viewer');
this.viewer.on("mousemove", '.nav', function() {
$(this).draggable();
});
},
UPDATE
You can also, to make such things simpler, customize Backbone to automatically call the onRender() function after rendering, by triggering an event or something.
Marionette.js (a Backbone.js extension) has this built in and I use it all the time.
The solution finally was pretty easy:
make sure you dont use outdated versions of backbone.js and underscore!!
After i updated the versions to latest I made it work with:
render: function() {
this.viewer.on("mouseover", '.nav', function() {
if (!$(this).data("init")) {
$(this).data("init", true);
$(this).draggable();
}
});
Probably still not very elegant but i couldnt made the suggested onRender method from dc2 work.
Version Drupal 7.16
I'm trying to use draggable of jquery in Drupal way :
I have a simple page (with hook_menu) wich call an js and render a simple div with the good class to draggable :
(function($) {
Drupal.behaviors.testJs = {
attach : function(context, settings) {
$('.test-js').draggable();
});
}
}
})(jQuery);
This js is load.
I add library of jquery Drupal :
drupal_add_library('system', 'ui');
or
drupal_add_library('system', 'ui.draggable');
But nothing happen....
When I had an external jquery like :
drupal_add_js('http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js', 'external')
draggable work.
I try to enable jquery update module, but nothing more....
It is most likely that the hook you are calling isn't called int the right order. template_process_html is where css and js are finalized and rendered to template variables. Try adding your code in hook_preprocess_html and see if that works. Otherwise find a hook that is called before template_process_html like hook_init. If that doesn't work give a more detailed code sample of how you are trying to achieve this.
https://api.drupal.org/api/drupal/includes%21theme.inc/function/template_process_html/7
https://api.drupal.org/api/drupal/modules%21system%21theme.api.php/function/hook_process_HOOK/7
https://api.drupal.org/api/drupal/includes%21theme.inc/function/theme/7
https://api.drupal.org/api/drupal/modules%21system%21system.api.php/function/hook_init/7