I found this javascript plugin that allows to visualize STL files in 3D:
https://www.viewstl.com/plugin/
The example works very well, the problem is that I can not find how to put that into a rails template. I took all the javascript files to my assets/javascript, then I added the respective '// = require' in aplication.js, I took the small script with the div:
<div id="stl_cont" style="width:500px;height:500px;margin:0 auto;"></div>
<script>
var stl_viewer=new StlViewer(
document.getElementById("stl_cont"),
{ models: [ { filename:"viewstl_plugin.stl" } ] }
);
</script>
and put them in my template but it does not work. Watching the console of my browser I found the following error: ReferenceError: importScripts is not defined. I saw that it has to do with web workers and that an importScripts only works inside them but this problem does not appear in the test.html so I guess something I'm doing wrong when putting them in rails that blocks or prevents the correct operation of importScripts.
I apologize for my lack of fluency in English.
Help :(
Related
For the sake of debugging the javascript-part of a Rails 6 (version 6.0.0.rc1) web application I want to use my custom javascript functions also in the Chrome console (aka. Inspect).
Back when I used just static HTML files to build a website (as opposed to using a web-framework like Rails as of right now) you would simply embed the JS file in the DOM like this
<!-- custom JS -->
<script src="js/custom.js"></script>
and could instantly access and execute all custom functions that were placed in this file.
Background:
The JS file is placed at the correct rails 6 specific directory as provided in this article: How to require custom JS files in Rails 6
Note:
The rails 6 application also uses the JS file already, since the browser shows the console log message.
Here is the full content of the JS file:
// app/javascript/packs/custom.js
console.log("loaded custom.js successfully")
function sayHello () {
console.log("Hello good Sir or Madam!")
}
Expectation: I am expecting to open the browser's (Chrome) console and be able to use the sayHello() function in the console.
However, when I do so, I get an error message in the console stating:
Uncaught ReferenceError: sayHello is not defined
Try something like
sayHello = ()=>{
console.log("Hello good Sir or Madam!");
}
then you can evoke in console:
>sayHello();
This question already has answers here:
Mismatched anonymous define() module
(8 answers)
Closed 5 years ago.
Let's say I have 2 files: test1.ts and test2.ts. This is the content of test1:
export const x = 1
This is the content of test1:
import { x } from './test2'
alert(x);
When I run the application, I get this error: Uncaught ReferenceError: exports is not defined at test1.js:2.
According to other posts, this error is caused by the fact that web browsers don't support export, and require(...). To solve it, one of the solution would be to use something like RequireJs.
So I've done some readings. This article has been the easiest for me to understand.
I've added this line in the _Layout.cshtml file.
<script src="~/Scripts/require.js"></script>
Create a config file.
requirejs.config({
baseUrl: '/Scripts/js'
});
I've put test1 and test2 in the /Scripts/js folder.
Run the application, but still get the same error: Uncaught ReferenceError: exports is not defined at test1.js:2.
How to fix the error using RequireJs?
Thanks for helping.
EDIT
The solution doesn't have to be RequireJs but anything the fix the problem. There are so many great tutorial on typescript, but they all assume that people are using node or angularjs. All I need is to add some typescript to my asp.net mvc app. As long it was one file, things were fine. Now I'd like to re-use some of the code, thus I organized them in different files. Unfortunately, I can't move forward because of that error. I've been sitting there for 3 days now.
EDIT 2
I've added commonJs to amd as you suggested by #artem,
{
"compilerOptions": {
"module": "amd",
"noImplicitAny": true,
"removeComments": true,
"preserveConstEnums": true,
"sourceMap": true
}
}
now I'm getting this error.
Uncaught Error: Mismatched anonymous define()
module: function (require, exports, CommonTypes_1) {
//...
It seems like this question is dealing with the same issue. Should I put this code in a new file?
I know this is a little old, but just ran into this problem. Here's how I solved it.
This post was very helpful: https://volaresystems.com/blog/post/2014/05/27/Adding-RequireJS-to-an-ASPNET-MVC-project
First, add require.js to your BundleConfig.cs. Mine looks like this:
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/require.js"));
Next, make sure _Layout.cshtml renders "scripts" section after your bundles. Mine looks like this:
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
Then in your view, render the scripts section like below. My Index.cshtml looks like this:
#section scripts
{
<script>
require(["Scripts/Init"],
function (Init) {
Init.Start();
}
);
</script>
}
My ~/Scripts/Init.ts file looks like this:
import * as DataBind from "./DataBind"
export function Start() {
DataBind.SetAllDatabinds(null);
}
From there, you can load in all your modules as needed. The important thing I found is to not have any "loose code" in your TypeScript files (i.e. the "alert(x)" in the example). Everything should be exported.
Running into a bit of a headache with some Coffeescript and/or Rails behaviour. Everything works fine when run in development (non-compiled JS) but once I pushed to production I started getting:
Uncaught InvalidValueError: initMap is not a function
Here's the coffeescript I am using (stripped down to basics):
jQuery ->
#map = null
new googleMap()
class googleMap
window.initMap = ->
#map = new (google.maps.Map)(document.getElementById('map-overlay'))
And it is being called as per the Google Maps API V3 documentation with the follow script loaded at the bottom just below the </body> tag on my page.
<script async="async" defer="defer" src="https://maps.googleapis.com/maps/api/js?key=*snip*&callback=initMap"></script>
I'm guessing it has something to do with the way the JS is compiled and gets wrapped in an unnamed function but I've spent a bit of time trying to figure it out and am not getting any further.
Any help would be appreciated.
A nice trick for using google maps asynconously without globals is to use jQuery.deferred together with the Google API loader.
apiLoaded = jQuery.Deferred()
mapInit = jQuery.Deferred()
google.load 'maps', '3',
other_params: 'sensor=false'
callback: ->
apiLoaded.resolve google
apiLoaded.done (google) ->
mapInit.resolve(
new (google.maps.map)(document.getElementById('map-overlay'))
)
google
mapInit.done (map) ->
# do something with the map here for example add a marker.
new (google.maps.Marker)(
position:
lat: -25.363
lng: 131.044
map: map
title: 'Hello World!')
map
There was nothing wrong with my Coffeescript, in the end it turns out bootstrap.min.js inside my vendors folder was breaking it. Works once that file is removed.
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'm working on jRuby on Rails app in Eclipse. I recently install Aptana to better support the rails files. This provides reasonable highlighting and support for most file types includes "html.erb" files but not for other *.erb files.
It's driving me insane their must be some editor that doesn't give me a damn syntax error when I use ruby tags in js.erb files. It seems like such a basic function.
Any advice is appreciated. I am open to pretty much anything I just want some way to write javascript in erb files without a million syntax errors after every ruby tag.
This example give me a syntax error in the editor despite working perfectly fine when I run the app:
<%= render :partial => 'qunit/frame_wrapper_top' -%>
module("Carousel");
asyncTest('Slider Right Button', 1, function() {
setTimeout(function() {
var center_image = frame.find('.carouselContainer li img.current').attr('id');
var e = $q.Event("click");
$('.navButton_right').trigger( e );
setTimeout(function(){
start();
var current_center = frame.find('.carouselContainer li img.current').attr('id');
notEqual( current_center, center_image, "New item is in center");
}, 1000);
},1000);
});
I'm also looking for an editor or IDE that can handle .js.erb. Aptana (3.0.9 or 3.2.0) only seems to recognise the ERB part, the JS does not get highlighted. Maybe Emacs+nXhtml will work.
Update: nXhtml does do the job for emacs. Load the file in your ~/.emacs as described in the README, then M-x eruby-javascript-mumamo-mode !