This issue has been driving me crazy!
I am relatively new to web design. I started to learn coding on codecademy.com. Everything worked perfectly! html, css and JavaScript went smooth. However, this is not the case when I start coding with Sublime Text or DreamWeaver on my machine. Whenever I try to run my website, the scripts that I linked doesn't work. I copy-pasted the codes from a Codecadamy tutorial(html, css, JavaScript) into a completely new file in DreamWeaver(index.html, stylesheet.css and script.css), I did this to make sure my code isn't faulty. When I ran the code in the built-in Codecadamy browser, it works perfectly. But whenever I save the files with DreamWeaver or sublime text, the website seems to "ignore" the external .js file.. I tested the website on 4 different browsers(Chrome, IE, Firefox, Opera) but found no luck!
I have no idea what might be causing this problem..
I tried to copy my code into the built-in Codecadamy but it still didn't work
Heres my simple javascript code(just to test out whether its working on my machine):
$(document).ready(function() {
$('#openDialog').click(function() {
$('.container').css('display', 'none');
});
});
Here is my website, I hosted it in a public folder on my DropBox account;
https://dl.dropboxusercontent.com/u/33331786/xbox/index.html
Look at your browser's JavaScript console:
Uncaught ReferenceError: $ is not defined global.js:2
This is your source code:
<script type='text/javascript' src='global.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
You are trying to use jQuery before you load it!
Are you using a local running server or are you using the file:// 'protocol' in your URL's? If you're not running a server then that 's the problem. Because of security constraints browsers do not run local JS files except when you explicitly enable the browser to do so.
See here for more info on how to do that: How to launch html using Chrome at "--allow-file-access-from-files" mode?
Do you ever reference the jQuery library? You could do it like this
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
Related
i have a web project which works find in web. I want to transfer it into phonegap windows phone project .
Everything works fine but in a search option whenever i click in the search option it shows nothing showing a message "We are having trouble to display this message". N:B: this search option works properly in the web.
here is my search code:
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/materialize.min.js"></script>
<script src="js/init.js"></script>
<script>
var c=getCatalogue();
var bestNew=getBestNew();
$("#recherche").click(function(){
var v=$("#search").val();
window.localStorage.setItem("search",v);
if(v!="") routePage("recherche.html?search="+v);
});
</script>
I think problem is when i pass the value to another page that is "search="+v".
When i use if(v!="") routePage("recherche.html); instead of if(v!="") routePage("recherche.html?search="+v); then it works.
Try downloading and using JavaScript imports locally instead of fetching a remote version if not strictly necessary.
See:
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
Also phonegap.js should be included:
<script type="text/javascript" src="phonegap.js"></script>
You will need to move the JQuery source to a local file and update your script tag, like you have with materialize.min.js. Loading library JS from the network is not a good idea as it slows your app's startup down and also will cause it to fail when started in a situation where there is no network access.
Additionally Cordova/PhoneGap's Content Security Policy may be blocking remote script loads for security reasons - you don't state which PhoneGap/Cordova version you are using, but this may be a problem for you in Cordova 5. There's a tutorial on dealing with that here. You can configure around this by adjusting the Content Security Policy meta tag to allow script-src from other than "self" but I wouldn't recommend this.
When running in Cordova/PhoneGap you should also wait for the "deviceready" event before trying to do anything, to make sure that the framework is fully initialized and that you have access to call plugins.
Also instead of loading new pages you should architect your app so that it is a single page app and generates page fragments from templates as needed. Try looking at something like Handlebars for this unless you have another preferred solution. I have a complete demo app that uses this approach that you can look at the source for here.
I am having a problem with my JavaScript where it runs into problems on the Mac version of Firefox only. The only console errors are
TypeError: $.tweets.tweet is not a function
TypeError: $.smartbanner is not a function
Using these plugins:
http://forsmo.me/jquery.tweet.js/
https://github.com/jasny/jquery.smartbanner
However, when I try to access other Javascript functions that are defined in other scripts through the console, they are almost all undefined.
If I copy and paste the source code from the functions or plugins into the console, then try recalling them, the code can be executed without problem.
Has anybody got any tips on how I can identify the source of the problem? It seems to me like there is probably one or two errors in the JavaScript that are then trickling down and breaking everything else, but I see no way of identifying where those problems are happening.
There are no errors on Firefox for Windows, or any other browsers that I am aware.
The Mac is running OSX 10.9.5 and Firefox 38.0.1.
Any help would be appreciated. Thanks.
! UPDATE:
I am including the code in the page with this big script element:
<script type="text/javascript" src="/javascript_combine/?file%5B%5D=ls_core_jquery&file%5B%5D=%2Fthemes%2Frapanui%2Fresources%2Fjs%2Fjquery-ui-1.10.2.custom.js&file%5B%5D=%2Fthemes%2Frapanui%2Fresources%2Fjs%2Fjquery.easing-1.3.min.js&file%5B%5D=%2Fthemes%2Frapanui%2Fresources%2Fjs%2Fbootstrap.js&file%5B%5D=%2Fthemes%2Frapanui%2Fresources%2Fjs%2Fjquery.isotope.min.js&file%5B%5D=%2Fthemes%2Frapanui%2Fresources%2Fjs%2Fjquery.tdautocomplete.js&file%5B%5D=%2Fthemes%2Frapanui%2Fresources%2Fjs%2Fjquery.sharrre-1.3.4.js&file%5B%5D=%2Fthemes%2Frapanui%2Fresources%2Fjs%2Fjquery.tweet.js&file%5B%5D=%2Fthemes%2Frapanui%2Fresources%2Fjs%2Fimagesloaded.js&file%5B%5D=%2Fthemes%2Frapanui%2Fresources%2Fjs%2Finfinite_scroll.js&file%5B%5D=%2Fthemes%2Frapanui%2Fresources%2Fjs%2Fmega_menu.js&file%5B%5D=%2Fthemes%2Frapanui%2Fresources%2Fjs%2Fjquery.thumbnailslider.js&file%5B%5D=%2Fthemes%2Frapanui%2Fresources%2Fjs%2Floadproductimage.js&file%5B%5D=%2Fthemes%2Frapanui%2Fresources%2Fjs%2Fhighlight_selected_colour.js&file%5B%5D=%2Fthemes%2Frapanui%2Fresources%2Fjs%2Fjquery.smartbanner.js&file%5B%5D=%2Fthemes%2Frapanui%2Fresources%2Fjs%2Fsizechartswitch.js&file%5B%5D=%2Fthemes%2Frapanui%2Fresources%2Fjs%2Fhelperwindow.js&file%5B%5D=%2Fthemes%2Frapanui%2Fresources%2Fjs%2Ffield_validate.js&file%5B%5D=%2Fmodules%2Fflynsarmyslideshow%2Fresources%2Fnivo-slider3.2%2Fjquery.nivo.slider.js&file%5B%5D=%2Fthemes%2Frapanui%2Fresources%2Fjs%2Fla_boutique.js&file%5B%5D=%2Fthemes%2Frapanui%2Fresources%2Fjs%2Fcolour_squares.js&file%5B%5D=%2Fthemes%2Frapanui%2Fresources%2Fjs%2Fjquery.elevatezoom.js&ver=1.33"></script>
Which is a merged version of all of our javascript files (to reduce the number of files loaded in the page). The two plugin files are included in this file.
The scripts are then called via inline script elements:
<script type="text/javascript">
$(function() { $.smartbanner() } )
</script>
<script src="/themes/main/resources/js/loadtwitter.js" async=""></script>
the contents of the loadtwitter.js file:
(function() {
$tweets = $('#tweets');
$tweets.tweet({
username: $tweets.data('username'),
favorites: false,
retweets: false,
count: 3,
avatar_size: 60,
template: '<div class="tweet"><div class="avatar">{avatar}</div><div class="text">{text}{time}</div></div>'
});
})();
Interestingly, when I look in the 'debugger' window in Firefox's inspector, the large file with all of our JS in does not appear in the list of resources, even though it does appear in the pages HTML.
Does this mean that the file is not being loaded in for some reason, despite being in the page itself?
In Firefox for Windows, the js file appears in the list of sources.
I updated a JavaScript file then uploaded it to my server. The changes was effective on all browsers except Firefox. Firefox see the old version file which returns an error. I opened the file on the web console and still the same old version of the file. I also tried the clear refresh with no success.
I hope any body can help to fix this problem
Clear your cache. For example, if you're using windows, press CTRL+R or CTRL+F5.
Alternatively, for testing, you can do something like this with PHP:
<script src="js/barfoo.js?v=<?=rand(1,99999);?>"></script>
(...which is, by the way, especially nice if used with favicons!)
We're testing out pdf.js and while it seems like an awesome project we can't get it working in Safari.
(Tested on PDF.JS version = 0.8.229 (latest) / Safari 5.1.9 - 6.0.4 / Mac OSX 10.6.8 - 10.8.3)
EXAMPLE:
This is an example of the demo code served from our server with a sample PDF that works on Chrome/FFox but not Safari:
http://test.appgrinders.com/pdf_js/test.html
Console output:
Warning: Setting up fake worker.
Error: Invalid XRef stream (while reading XRef):
Error: Invalid XRef stream pdf.js:850undefined
Warning: Indexing all PDF objects
Error: Invalid XRef stream (while reading XRef):
Error: Invalid XRef stream pdf.js:850undefined
More tests:
The following is a list of sample PDFs we tested (They were all served from our server, and all worked in Chrome/FFox/Android). The only one that worked with Safari was the PDF file served from the pdf.js project itself:
FAILS IN SAFARI:
http://samplepdf.com/sample.pdf
http://forums.adobe.com/servlet/JiveServlet/previewBody/2041-102-1-2139/Sample.pdf
https://github.com/prawnpdf/prawn/raw/master/data/pdfs/form.pdf
WORKS IN SAFARI:
http://cdn.mozilla.net/pdfjs/helloworld.pdf
(NOTE: This is a sample PDF from the pdf.js project and the only one we ever got working)
We've submitted a bug report, but the developers do not seem to have an answer, so I'm hoping someone here might...
How can we get pdf.js working with Safari?
I've figured out how to get things working on Mac Safari (without necessarily understanding why)...
compatibility.js must be included.
PDFJS.workerSrc must be assigned.
The demo code I had been testing (from the JS Bin demos here)
does not do this, though some other online examples do (including
the hello world example and the examples provided by
#AndrewBenjamin – thanks). Other browsers don't seem to require this,
but Safari won't work without it.
<script type="text/javascript" src="compatibility.js"></script>
<script type="text/javascript" src="pdf.js"></script>
<!-- NEED THIS for Safari Mac to render work -->
<script type="text/javascript">
// Specify the main script used to create a new PDF.JS web worker.
// In production, change this to point to the combined `pdf.js` file.
PDFJS.workerSrc = 'pdf.worker.js';
</script>
Again, can't explain why, but this is how we got it working for us.
I've got PDF.js working fine in Safari on my local server, but when I put it on the remote server, the goofy error comes back:
Warning: Setting up fake worker.
Unhandled rejection: Error: INVALID_STATE_ERR: DOM Exception 11
It will also show this error on my local computer if I happen to have the developer console open. Close the console, PDF displays in Safari; open the console, and it doesn't work anymore.
The question is: what do the developer tools and the remote server change versus running on a local server? Is this still a range-checking problem?
I got PDF.js to work, though! I've modified so much stuff I don't know what part of what I did worked. Here's a list of stuff I did.
Added compatibility.js – modified the last function in it to read like this:
(function checkRangeRequests() {
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
if (!isSafari) {
return;
}
document.addEventListener('DOMContentLoaded', function (e) {
if (isSafari) {
PDFJS.disableRange = true;
}
});
})();
Changed the order of xhr.open() calls in pdf.js so that xhr.setRequestHeader() occurs after xhr.open()
Removed all 'use strict'; lines
Added xhr.setRequestHeader("Cache-control", "no-cache"); after xhr.open on lines 37272 and 41262
Minified pdf.js and it all works all the time!
PDFJS.getDocument() will accept either a string link or a Uint8Array. In my client side version I pass PDFJS.getDocument() a Uint8Array, but if I want an existing file rendered, I just pass the path to the file:
jspdf line 965:
PDFJS.getDocument('..files/pdf/sample.pdf').then(function(pdf) {
I don't know what makes your safari browser fail, but if you can see sample.pdf on my test site, you have to be very close to solving this.
I've figured out how to get things working on Mac Safari & iPad
I removed the 'strict mode' at the beginning of
1. pdf.js/src/core/worker.js
2. pdf.js/web/download_manager.js
And worked!!
if you're going to support versions below Safari 14, from what I understood PDFjs doesn't support that.
you will need to use an external viewer in an object tag:
<object data="https://drive.google.com/viewerng/viewer?embedded=true&url=https://researchtorevenue.files.wordpress.com/2015/04/1r41ai10801601_fong.pdf&embedded=true"></object>
I had the same problem with Safari Mobile... Can't open more than 1 Mb PDF's... I solved fragmenting the file in parts of 900 kb, join them in local and then injecting to pdf.js as Uint8Array() object. I think it's a no documented limitation.
I was looking through some pages when I stumbled across this open source JavaScript date library: Datejs. Now I've been trying to use it but everytime I try any function like:
$(function() { Date.today().toLongDateString() } );
or even only
Date.today().toLongDateString()
withing tags, I get errors when the webpage loads, it tells me Date.today() is not a function but it appears as such in the documentation I've been at this for like almost 2 hours now xD it's driving me crazy and I know I just probably overlooked something...
I loaded the:
<script type="text/javascript" src="assets/js/dia_hora/date_es-MX.js"></script>
Are your script path and filename correct? You wrote:
<script type="text/javascript" src="assets/js/dia_hora/date_es-MX.js"></script>
But according to the "Getting Started" page of the project, it should be:
<script type="text/javascript" src="assets/js/dia_hora/date-es-MX.js"></script>
There are two hyphens in the original file: "date-es-MX.js", not an underscore. Or did you rename the file?
Check if the file correctly loads using Firefox Firebug (network tab) or FiddlerTool if you're using Internet Explorer.
Sounds like the script is not getting loaded. Put an alert('hello'); at the beginning of the script and see if you get that popup when the page loads.
Your path to the javascript file is incorrect.
OR
You have a syntax error in a Javascript file that is being loaded before this one. I believe the browser will stop trying to interpret the rest of the Javascript as soon as an error occurs.
Try having the JS Console open in Chrome or Firefox or Safari - you will get a much better idea of what the error is. JS Console has saved me hours or even days - I remember how I used to get frustrated about not being able to tell what happened when JS silently failed.
But with JS Console it's never a silent fail - you get some hint in the error message however small.