I'm trying to use jayq with jquery.ui.sortable to make a list on a page
sortable. Looking at http://jqueryui.com/demos/sortable/ it seems like it should be as
simple as:
(.sortable ($ :#sortable))
Which compiles down to:
jayq.core.$.call(null, "\ufdd0'#sortable").sortable();
And throws:
Uncaught TypeError: Cannot call method 'call' of undefined
when I try to include it in a page. Interestingly, the generated code
does work in the page when I paste it into the js console, which implies
to me that something necessary is loaded after that line is executed.
I've modified
(def cljs-options {:advanced {:externs ["externs/jquery.js"]}})
to
(def cljs-options {:advanced {:externs ["externs/jquery.js" "js/ui/jquery-ui.js]}})
after reading
http://lukevanderhart.com/2011/09/30/using-javascript-and-clojurescript.html
, which doesn't seem to be sufficient. I'm guessing that jquery.ui
modifies the $ Prototype, but I'm not sure how to accomplish this in
clojurescript
I'm also using noir and noir-cljs, if it makes any difference.
Looking at using jQueryUI with closure compiler it might just be that jquery-ui needs a hand rolled externs file in order to be used, possibly a major undertaking. Can anyone confirm?
There were two separate aspects to solving this.
To compile in advanced mode, I needed to add the following to my externs file.
$.prototype.sortable = function (a,b) { };
$.prototype.disableSelection = function (a,b) { };
I'm using noir-cljs, and in my view template, had the following:
(:require [noir.cljs.core :as cljs])
(:use [hiccup.page :only [include-js]])
...
(cljs/include-scripts :with-jquery)
(include-js "/js/jquery-ui.js")
But this can't ever work, since the jquery-ui code needs to be included after jquery but before the generated ClojureScript. The solution is to manually include the libraries in the page:
(include-js "/js/jquery.js")
(include-js "/js/jquery-ui.js")
(include-js "/cljs/bootstrap.js") ;; Generated
Related
I did just a upgrade from RAILS 5 to RAILS 6 and I see that all rails views are not able to call a javascript function as before in RAILS 5.
I have an external javascript file located under
app/javascript/packs/station.js
This is is embeded in in app/views/layouts/application.html.erb as
<%= javascript_pack_tag 'station' %>
This is the code how I call the javascrpt function from html.erb file :
<%= text_field_tag(:station_text_field, ... ,
onkeyup: "javascript: request_stations(); ") %>
When I try to call a function thats is part of the station.js then I get an error in the browser developmer view: ReferenceError: request_stations is not defined
But I can also see in the brwoser view, under Debugger :
Webpack / app/javascript / packs / station.js
and the javascript function I want to call.
So it seems that this script was loaded by the browser.
In contrast, when I just copy and paste these few lines that represent this javascript function direct into the template view file (...html.erb), something like :
<script>
function request_stations ()
{
alert("calling request_stations");
};
</script>
then - it works as expected !
By default, variables/functions defined inside JavaScript files that are packed by Webpacker will not be available globally.
This is a good thing, because it prevents global naming conflicts. Generally speaking, you don't want to reference javascript functions/variables from your view. You instead want to write JavaScript in a way that attaches functionality to DOM nodes using their id or other attributes.
Here is a basic example based on the code you provided:
# in your rails view
<%= text_field_tag(:station_text_field, ..., id: 'station-text-field') %>
// in your javascript
function request_stations() {
alert("calling request_stations");
};
const stationTextField = document.querySelector("#station-text-field");
stationTextField.addEventListener('keyup', (event) => {
request_stations();
});
Agree with mhunter's answer.
This post helped me get a grounding on this difference in Rails 6: https://blog.capsens.eu/how-to-write-javascript-in-rails-6-webpacker-yarn-and-sprockets-cdf990387463
What I don't see in your question is whether or not you did this in app/javascript/packs/application.js:
require("#rails/ujs").start()
require("turbolinks").start()
require("#rails/activestorage").start()
require("channels")
require("station")
The big difference in Rails 6 is that you have to deliberately:
require a JS file
deliberately export something from that file
deliberately import that something, in the file where you want to use it.
So if there is a function in station.js that you want to use, connect the steps above. Start with a simple function in station.js that fires upon DOMContentLoaded, and add a console.log("hey, station.js is alive and well"). If you don't see it, then something in those 3 steps is not right.
In pre-Rails6, you had a "garden" of JavaScript, just by virtue of being in the asset pipeline. In Rails 6, you have to be more deliberate.
I get this error on load when I try to load the graphiql client with Rails 6, specifically wanting to use the Documentation Explorer.
TypeError: Cannot read property 'types' of undefined
at buildClientSchema (http://localhost:3000/assets/graphiql/rails/application-6f03c7a92432765b0fbe671bfb7a292ee6c37e6704b6e6ac95587e45676bbf72.js:34102:72)
at http://localhost:3000/assets/graphiql/rails/application-6f03c7a92432765b0fbe671bfb7a292ee6c37e6704b6e6ac95587e45676bbf72.js:2795:55
I tried deleting my graphql directory and re-doing the rails generate graphql:install.
I am using
rails 6
graphiql-rails (1.7.0)
graphql (1.10.5)
I originally built it as API only (and removed unnecessary files, including the assets) but then added the necessary configurations to run graphiql in local development, including adding an app/assetts/config/manifest.js with
//= link_tree ../images
//= link_directory ../javascripts .js
//= link_directory ../stylesheets .css
I was able to look into it more - I made a breakpoint in the chrome debugger for line 34,102, which has the following code:
function buildClientSchema(introspection, options) {
// Get the schema from the introspection result.
var schemaIntrospection = introspection.__schema;
// Converts the list of types into a keyMap based on the type names.
var typeIntrospectionMap = (0, _keyMap2.default)(schemaIntrospection.types, function (type) {
return type.name;
});
..... more code ......
The issue is with schemaIntrospection.types, schemaIntrospection is undefined. So above, I inspected the introspection variable which calls introspection.__schema - The introspection variable looked like:
{"Schema":
{"queryType": {"name":"Query"},
"mutationType": {"name":"Mutation"},
"subscriptionType":null,
.... more JSON ...
So, what I ended up doing is instead of having var schemaIntrospection = introspection.__schema;, I set the schemaIntrospection variable using the correct key:
var schemaIntrospection = introspection.Schema;
And it worked! For that specific call only :/ , as I had used the interactive debugger
Does anyone know how I can fix this with ruby-graphql/graphiql more permanently?
I want to be able to use the Documentation Explorer
Thanks!
Circling back, I was migrating from a REST based API to Graphql. My old project had a middleware (https://github.com/vigetlabs/olive_branch) which I had forgotten to disable, so this was causing it to auto change snake case (which it identified __schema as snake case) to CamelCase. My bad about this, but wanted to follow up in case anyone else had issues, maybe check your middlewares.
I'm trying to write Dart code that will generate a rough equivalent of this:
var disposable = vscode['commands'].registerCommand(
'extension.sayHello',
function () {
vscode['window'].showInformationMessage('Hello World!');
}
);
context.subscriptions.push(disposable);
The variables vscode and context are both globals available in the JavaScript which is executing my Dart (which is being compiled to JS with the Dart Dev Compiler).
I'm happy for context/vscode to be completely untyped for now, but I'm struggling to bend the JS package to output code like this (eg. if I put #JS() on a stub vscode, I get dart.global.vscode).
You can use the base dart:js features
Note that context happens to be dart's name for the javascript context.
var disposable = context['vscode']['commands'].callMethod('registerCommand', [
'extension.sayHello',
() {
context['vscode']['window'].callMethod('showInformationMessage', ['Hello World!']);
}]);
);
context['context']['subscriptions'].callMethod('push', [disposable]);
Let me put together a quick example on github with package:js.
Edit: OK, here you go:
https://github.com/matanlurey/js-interop-examples
It took me a couple tries to the package:js syntax correct (we probably need more documentation here and examples), but I ended up creating a "fake" visual studio code API (vscode.js), and interoping with it fine.
Watch out that you need to wrap your functions with allowInterop if you expect your examples to work in Dartium.
I am building Firefox extension, that creates single XMPP chat connection, that can be accessed from all tabs and windows, so I figured, that only way to to this, is to create connection in javascript module and include it on every browser window. Correct me if I am wrong...
EDIT: I am building traditional extension with xul overlays, not using sdk, and talking about those modules: https://developer.mozilla.org/en-US/docs/Mozilla/JavaScript_code_modules
So I copied Strophe.js into js module. Strophe.js uses code like this:
/*_Private_ function that creates a dummy XML DOM document to serve as
* an element and text node generator.
*/
[---]
if (document.implementation.createDocument === undefined) {
doc = this._getIEXmlDom();
doc.appendChild(doc.createElement('strophe'));
} else {
doc = document.implementation
.createDocument('jabber:client', 'strophe', null);
}
and later uses doc.createElement() to create xml(or html?) nodes.
All worked fine, but in module I got error "Error: ReferenceError: document is not defined".
How to get around this?
(Larger piece of exact code: http://pastebin.com/R64gYiKC )
Use the hiddenDOMwindow
Cu.import("resource://gre/modules/Services.jsm");
var doc = Services.appShell.hiddenDOMWindow.document;
It sounds like you might not be correctly attaching your content script to the worker page. Make sure that you're using something like tabs.attach() to attach one or more content scripts to the worker page (see documentation here).
Otherwise you may need to wait for the DOM to load, waiting for the entire page to load
window.onload = function ()
{
Javascript code goes here
}
Should take at least diagnose that issue (even if the above isn't the best method to use in production). But if I had to wager, I'd say that you're not attaching the content script.
I have a few multiselect boxes from the Jquery UI on a page that work perfectly well in Chrome & Safari but not in Firefox for some reason... when I load the Error Console in Firefox I see:
Error: $.widget is not a function
Source File: http://localhost:3000/javascripts/jquery.multiselect.js?1302660373
Line: 563
Any ideas why?
edit: the line itself is within the open function right where it says "// react to option changes after initialization"
// open the menu
open: function(e){
var self = this,
button = this.button,
menu = this.menu,
speed = this.speed,
o = this.options;
widget: function(){
return this.menu;
},
// react to option changes after initialization
_setOption: function( key, value ){
var menu = this.menu;
switch(key){
case 'header':
menu.find('div.ui-multiselect-header')[ value ? 'show' : 'hide' ]();
I am assuming you are using the jQuery Multiselect plugin… which depends on jQuery UI.
Sounds like you have not included enough of the jQuery UI library or just none of it. You need to include the core parts of jQuery UI (including Widget) if you build a custom download. Or just download the whole jQuery UI and include it instead.
For anyone else who is getting this but has the requirements; make sure you are including the Javascript files in the correct order. This error was being caused by my jquery-ui.js being included after the multiselect js file.
This answer is probably unrelated to the situation of the questioner, but I put it here for the sake of others Googling the question.
I got this error using Rails 3.2 and fixed it by deleting (renaming) the public/assets folder. It seems there are a lot of problems with the assets pipeline still. I don't know the details but have had other Javascript failures that are fixed this way.
Actually if you are getting this error then it's either
a) per #andyb answer - you haven't included the correct jQuery UI components
OR
b) your DOM is not loaded yet with the correct $.widget and therefore your function is attempting to call before $.widget has loaded. to fix the problem, ensure $.widget is called BEFORE your function