I'm writing write my first RoR application with YUI framework. I tried googling for ror+yui manuals with no success. So I went to YUI site. YUI says:
// Put the YUI seed file on your page.
<script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>
Where it's supposed to be putted in RoR app?
I've tried to app/assert/javascripts/yui-min.js.
As a result i got <html class="yui3-js-enabled"> in every page. Supposing YUI is working now i've tried to copy-paste "Work with the DOM" example from YUI's page to app/public/index.html.
The error I received was:
Uncaught ReferenceError: YUI is not defined.
I tried the info in this link and it was not helpful to me:
https://stackoverflow.com/questions/1452829/tutorial-suggestions-on-yui-with-ruby-on-rails
Your first step in any rails app is to delete app/public/index.html ... then work in your pages inside of rails.
So that means create an app/views/layouts/application.html, and that's where you add your
<html>
<head>
<script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>
Based on the link, you might not have it in your <head> and it needs to be.
UPDATE: (sample javascript code to change h1)
<script>
YUI().use('node', function (Y) {
var headerElement = Y.one('h1');
headerElement.setHTML("I have been updated");
});
</script>
Related
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 :(
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();
I'm still trying to make the invokescriptasync work. I'm trying the following test on facebook.com and it fails with a HRESULT: 0x80020101' which normally means the script has an error in it, but I tried running the simple javascript in Chrome and IE without any problem.
private async void WebView_OnNavigationCompleted(WebView sender, WebViewNavigationCompletedEventArgs args)
{
await _webView.InvokeScriptAsync("eval", new[]
{
"document.getElementById('blueBarDOMInspector').innerHTML = '';"
});
}
Thanks
I have tested your code and the error is thrown only in case the blueBarDOMInspector is not found. I used the following simple HTML:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
<p id="blueBarDOMInspector"></p>
</body>
</html>
You can confirm that the script works as expected with this HTML. So I suspect the problem is rather on HTML side than on side of UWP.
As for ScriptNotify not working - the website must be HTTPS and be added as trusted to appxmanifest. Better solution is web allowed object. A great example was posted in a question yesterday on SO or here as a sample project. Basically you have to create a Windows Runtime Component with a class marked as [WebAllowed] and then inject it in the WebView using AddWebAllowedObject method.
For your invoking JavaScript code issue,I've checked your code, it's simple, the possible issue might be the 'blueBarDOMInspector' object, please make sure that you could get the 'blueBarDOMInspector' object successfully when the OnNavigationCompleted is fired.
For your second question:
I can invoke the script : "window.external.notify('something');" but it doesn't raise the event ScriptNotify which is another problem :-(
Please check the document:
To enable an external web page to fire the ScriptNotify event when calling window.external.notify, you must include the page's Uniform Resource Identifier (URI) in the ApplicationContentUriRules section of the app manifest.
I've included two below scripts in my header and I get the error "You have included the Google Maps API multiple times on this page. This may cause unexpected errors."
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js key=************"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
When I remove either script, I get additional js errors. How can I properly refactor these two scripts in my rails app?
In your example above, you're including the same script twice, but with different parameters. You should be able to solve your issue by including the script once, with all the required parameters like this:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE&libraries=places&sensor=false"></script>
If you're calling google maps via an ajax call, you can use window.google = {} upon exiting the state in which the map was called.
I know that in my case it's not a Rails app but might help to someone else ... I'm working with React and I was getting the same error when I was switching between views/pages.
And like wLc said window.google = {} worked like a charm and was deleting the error in the console but the <script> tag was remaining in the html and was added every time I was revisiting the page that has the map.
On componentWillUnmount I've added some code to remove the tag.
const allScripts = document.getElementsByTagName( 'script' );
[].filter.call(
allScripts,
( scpt ) => scpt.src.indexOf( 'key=googleAPIKEY' ) >= 0
)[ 0 ].remove();
window.google = {};
I have a featured content slider on my homepage here: etiquetteplus.net
That slider loads fine in old versions of IE and FF. But new versions and with chrome it doesnt.
I get theses errors, but I am not sure what they mean.
ui.core.js:179Uncaught TypeError: Cannot read property ':' of undefined
Uncaught TypeError: Cannot read property ':' of undefined
Uncaught TypeError: Object function (E,F){return new o.fn.init(E,F)} has no method 'widget'
I have tried newer versions of jquery but that didnt help either. Any suggestions? Thanks!
there seems to be allot going on here but the most important thing I see off hand is on line 41 of your source code you include jquery and colorbox like so
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript" src="http://www.etiquetteplus.net/wp-content/themes/etiquette/js/jquery.colorbox.js"></script>
then on line 86 you load a really really really old versions of jquery
<script type='text/javascript' src='http://www.etiquetteplus.net/wp-includes/js/jquery/jquery.js?ver=1.3.2'></script>
<script type='text/javascript' src='http://www.etiquetteplus.net/wp-content/plugins/wp-faq/js/wp-faq.js?ver=2.9.2'></script>
<script type='text/javascript' src='http://www.etiquetteplus.net/wp-content/plugins/wp-faq/js/jquery/ui.core.js?ver=2.9.2'></script>
<script type='text/javascript' src='http://www.etiquetteplus.net/wp-content/plugins/wp-faq/js/jquery/ui.accordion.js?ver=2.9.2'></script>
i also see this error
Error: Error calling method on NPObject!
Source File: http://www.etiquetteplus.net/wp-content/themes/etiquette/js/sifr.js
Line: 17
in ff error console
then on your html is not valid
on line 210 you have a closing
</a>
tag with no open you spans a span without close etc...
you need to make sure you are using only one version of jquery and you need to validate your html
i use web devloper addon in firefox to help trouble shoot there are all kinds of cool things to help you get a good working site in order. ff only has a built in error console that will help as well
I am sure that there are more problems that what I have shown here. but if you do diligence and comb your code and html with a fine tooth comb you will get it working correctly. If you get stuck post another question (not duplicate of course) and someone will help.
good luck
mcgrailm