I have a webpage that I have the JavaScript in a separate file from my HTML file. I have imported
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
in my HTML file but when I attempt to work in my js file to make some updates after a while away I get the following error
ERROR: '$' is not defined.[no-undef]
ERROR: 'document' is not defined. [no-undef]
Example where the above errors are references in my js code:
$(document).ready(function () {
$("#screenNum").hide();
...
}
The document Renders in the browser with no issues and the JS functions as designed and when I look at the developer tools in the browser there are no errors. I would like to get rid of these errors so that I can focus on actual errors.
It has been a couple years since I have worked on this document and I wanted to make some enhancements to it and am just now getting back to it. I do not recall this error when I last worked in it in Dreamweaver and do not know what I am missing.
All the similar questions I have looked at similar to this seem to deal with when the JavaScript is in the HTML document and not in a separate file.
Thank you, Tim Hunter, adding the below code worked perfectly.
/* global $, document*/
Related
specifically, I would like to test that the logo appears on the home page of the app. I guess I am not sure what I should use to look for the image.
I tried
it('has a logo', function () {
cy.visit('http://localhost:3000')
cy.get('img').should('contains' , 'My-Logo.png')
})
instead of cy.get I also tried to just use
cy.contains('My-Logo.png')
but it also fails.
I wasn't sure what element I should use or if I should be using get, but it fails. When I look at the source code for the web page, the logo is hidden within the javascript (nodeJS, vueJS,and expressJS application) and I noticed the javascript seems to add a sequence of numbers and letters to the image when I go to the image page even though the image name in the assets folder does not have it on there. My-Logo.d63b7f9.png.
I figured out the solution on my own.
cy.get('form').find('img').should('have.attr', 'src').should('include','My-Logo')
I inspected the element and found the <img src... line was embedded within a <form>. I could do a cy.get('form') and pass, but could not do a cy.get('img') to pass. So then I chained them together and it passed. I am not sure why I cannot just simply add the second should statement, but it failed when I tried to just run:
cy.get('form').find('img').should('include','My-Logo')
I am not entirely sure why, but it needed the first "should" statement. I got around VUE adding the sequence of numbers and letters by just asking for the name of the file without the extension. I hope this maybe helps someone else as the documentation did not seem to cover this.
you can use only one should statement like:
cy.get('form').find('img').should('have.attr', 'src', 'My-Logo')
the third arg of should is the value to match with the element attribute.
I've tried all the troubleshooting suggestions, and I've got iFrameResizer working on other sites without any issues, but it's snagging on this one and I can't fathom out why. Weirdly, it works on the details page, but not on the listing page. Logging returns the
"hasn't responded in 5 seconds" message.
I've also tried all the various triggers ('max' etc.) none of them make a difference.
Example page where it doesn't work:
http://www.homesinfocus.co.uk/properties-to-let/
But on the details page, it does work:
http://www.homesinfocus.co.uk/property-details-let/?ID=790&LB=Let
I've made sure all the iFrames have unique IDs, and the listing page works okay for other sites, just can't see where the issue is with this one.
Any pointers would be much appreciated.
David, thanks for your help. CheckOrigin seems to have fixed it.
Seems to work fine with the following:
<script>
$(window).on('load', function (e) {
$('iframe').iFrameResize({checkOrigin:false});
});
</script>
The most common reason for that, is that the iframe hasn't loaded it's js file.
Also check that your using the very latest version, as the error message gives a bit more detail.
I'm currently following this Jade tutorial https://www.youtube.com/watch?v=l5AXcXAP4r8 (I know Jade is Pug now but I'm watching jade tutorials to get familiar with it since many don't exist for pug) and at 24:25 the instructor places an 'extends filename' in the middle of his index.jade file. This works fine for him but this does not work for me when executing with pug. I get an error in my terminal saying "Declaration of template inheritance ("extends") should be the first thing in the file." Is it not possible in pug to put an extends in the middle of a file and it used to be possible with jade? Is there any way to make it possible? Thank you in advance for your help!
This is not possible with pug. The error message is fairly clear, extendsmust be the first thing in the file, it cannot be placed in the middle. Without any code (or idea of what you're trying to achieve), it is difficult to tell if you could find a workaround for this (using mixins perhaps?).
I've been trying to make blueimp-image-gallery work with Jade on my Node.js server.
I've followed the instructions and came up with this .jade page:
extends layout
block content
h1 Test
div(id='blueimp-gallery-dialog', data-show='fade', data-hide='fade')
div(class='blueimp-gallery blueimp-gallery-carousel blueimp-gallery-controls')
div(class='slides')
a(class='prev') ‹
a(class='next') ›
a(class='play-pause')
div(id='links')
a(href='http://mypage.com/1.jpg' title='Frente' data-dialog)
img(src='http://mypage.com/2.jpg' alt='Frente')
a(href='http://mypage.com/6.jpg' title='Piscina' data-dialog)
img(src='http://mypage.com/6.jpg' alt='Piscina')
a(href='http://mypage.com/0.jpg' title='Garagem' data-dialog)
img(src='http://mypage.com/0.jpg' alt='Garagem')
script(src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js')
script(src='//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js')
script(src='http://blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js')
script(src='js/blueimp-gallery.min.js')
For some reason all I see are static links to the pictures referenced above. When I click them, instead of see the galery as the example show I get redirected to the image link itself.
Blueimp-image-gallery pages states a few requirements, but I'm not sure if I need them or how to install them.
Can you help me to make it work?
Check your javascript console to see if there are any javascript errors on the page. If there are, they should give you a place to start when looking for a fix!
Putting this code in
$('#hello').click ->
alert 'hello'
in posts.js.coffee in vanilla Rails 3.1 app does not work. The javascript is compiled and loaded before the page so the function isn't bound to its element. There are easy solutions, like manually loading the js on the page rather than using the asset pipeline, or using JQuery .live functions, but it seems like this code should work out of the box. Am I missing something??
I might be pointing out the obvious here, but have you (in jQuery) tried this:
$(function(){
//your code
$('#hello').click(function(){
alert("hello");
});
});
or
$(document).ready(function(){ [...] });
These (atleast under normal circumstances) should prevent any javascript inside from doing anything until the DOM has been loaded.
Hope this helps