I've read a similar question here, but can't seem to get around it in this case, so would appreciate any clarification. I have a page in php that runs several instances of JavaScript that work on cue on localhost. However one particular instance of JavaScript (that makes an arrow hide when it scrolls beyond 10px) does not run, but when i run the same from an html version of the same php page, the arrow action works as desired. Why is this the case? Here is the code of the page in jsfiddle (exactly the same is used for respective sections in the php page.)
To clarify i have added this bit of JavaScript in the following manner at the end (after footer, before body end) of the index.php file (along with other blocks of JavaScript which work as desired for their respective targets):
<script type="text/javascript">
$(window).scroll(function () {
if ($(this).scrollTop() > 10)
document.getElementById('arr_downpoint').style.visibility = 'hidden';
else
document.getElementById('arr_downpoint').style.visibility = 'visible';
});
</script>
I have added jquery as follows (and it works for all other instances on the php page except for the arrow):
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
Lastly, there are no console errors. Would like to know why only this block of JavaScript isn't working from php, but works from HTML (while the other JavaScript instances work fine on both php and HTML), and how to find out what's wrong?
RESOLUTION: Just found that I'd erroneously added # while assigning arrowpoint id. That's why the script couldn't do anything with the arrowpoint, since <a> now had a # as part of its name. sorry about that careless oversight, for the time it may have taken to consider.
If you are trying to load the page directly from the file (your page url start with 'file://...') the problem is that the browser is trying to load jquery using the same protocol (file instead of http) because you didn't specify a protocol for the external files (the src attribute starts with '//', which mean something like "use the same protocol of the current page"). You can verify if this is the reason behind your problem, opening the browser console looking for errors like:
GET file://code.jquery.com/jquery-1.11.3.min.js net::ERR_FILE_NOT_FOUND
GET file://code.jquery.com/jquery-migrate-1.2.1.min.js net::ERR_FILE_NOT_FOUND
Uncaught ReferenceError: $ is not defined
To fix this problem, you should always run you html from a server (like Apache with PHP, as you already did) or you can write the external scripts url including the protocol (but this can cause other problems if you will run your page under https)
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
Related
I need your help with a strange problem.
The company I work for has a company website.
I have been updating pages on their website the last couple of days.
After updating, I decided to upload the website,
but suddenly the javascript doesn't work anymore.
I get the following error when I press f12
Uncaught SyntaxError: Invalid or unexpected token
base.js:1 Uncaught ReferenceError: $ is not defined
at base.js:1
On the test server (my own server) it works without any problems.
On the main server (company server) it doesn't work.
What could be the issue for this?
It's not on just one page, it's on every single page that the Javascript doesn't work.
[update]
I know about the different versions of Javascript.
This is already fixed in the testing environment of the company website.
This still doesn't fix the current problem.
Thank you
Wesley
On the test site you use jQuery 3.3.1:
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
On the main site you use jQuery 1.10.1:
<script src="https://www.aska-ltd.jp/js/jquery-1.10.1.min.js"></script>
Please both use v3 if you don't have specific needs.
It looks like you are using jQuery for your JavaScript code.
The header of the first page contains a tag for loading jQuery:
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
But on the second page, you never load jQuery.
As I don't know how the file structure of your server is, I cannot tell you the exact path, but you need to make sure you load jQuery in a similar way on your company website.
EDIT:
I noticed that you load jQuery from https://www.aska-ltd.jp/js/jquery-1.10.1.min.js. However, this file is not the original file (compared to https://code.jquery.com/jquery-1.10.1.min.js using MD5). If you want to use this old version (not recommended), you can try to re-download it or simply load jQuery in its latest version from its official server (recommended).
As #NoobTW and #SapuSeven have said, there is an error in the jQuery script on the production site.
On the production site, try replacing this <script src="https://www.aska-ltd.jp/js/jquery-1.10.1.min.js"></script>
with this <script language="JavaScript" type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
Also, if you load jQuery from a CDN, it may help simplify things. Here is one option for jQuery 3: <script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
crossorigin="anonymous"></script>
See here for more options: https://code.jquery.com/
JQuery never loads at all on the main server. I tried taking the code from the file on the server and evaluating it, but discovered some sort of corruption in the JQuery file your server is returning:
If the same thing happens with an updated version of JQuery, check whether it’s also corrupted. It may be some sort of transformation the server is incorrectly performing.
I am getting problem in referencing Javascript file.
My all js files reside in my js folder:MyProject/Js/*.js
Now on my master page i am refering my file like this:
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-1.9.0.min.js" type="text/javascript"></script>
Error showing in console:
SyntaxError: expected expression, got '<'.
On searching i have found that this issue comes due to inappropriate referencing of js files so i have resolve this error by doing this:
<script src="../js/jquery-1.9.1.js"></script>
<script src="../js/jquery-1.9.0.min.js" type="text/javascript"></script>
This above solution works when my .aspx page would be like this:
MyProject/Admin/Abc.aspx //This will work
But problem will occur when any of my .aspx page would be like such:
MyProject/Admin/Subfolder/Abc.aspx // This will not work
My Abc.aspx page contains master page but now in this case this will not load my js files due to ../
So can anybody tell me whats the correct way to reference js files which will work in both the cases??
Note:I am referencing all js files in to my master page and my master page is in:
MyProject/MasterPage.Master
I think you can give a try:
1) Use Bundling to reduce the loading time (Your script will be shorter as well)
2) Use ~/ instead of ../ to make your script/code work even if you relocate the pages.
You can easily find the scripts and codes of jquery bundle if you create a new ASP.NET application in Visual Studio.
In PHP there's a function called stream_wrapper_register. With that i can get the file contents of every PHP file that is about to be included. So that basically gives me control over the 'code' that will get parsed.
I was wondering if there's something like this in javascript too? So suppose i include my file:
<script type="text/javascript" src="js/myfile.js"></script>
My code in that file then sets up the stream wrapper (suppose this is available in JS too). Now i want to be able to get the file contents of every other javascript file that will be included:
<script type="text/javascript" src="js/somefile.js"></script>
<script type="text/javascript" src="js/someotherfile.js"></script>
But this ofcourse must happen before before the browser actually executes those files.
So is there a way to intercept that somehow?
$.ajax("/path/to/javascript.js").done(function(source) {
eval(transmogrifySourceCode(source));
});
I used the jQuery syntax because AJAX-style gets are much easier that way, and you'll have to provide your own transmogrifySourceCode function to edit the source before you load it.
I do wonder why you'd want to do, that, though. You should be in full control over your input source, so why not just excise the code you don't want on the server?
No, you can't. Alone for security reasons you won't be allowed to get every script's content.
For Opera, there is a special BeforeScript event which can be listened to from local user scripts.
So there is no (good) way to detect (dynamically added) <script> elements in a page and prevent them from loading and executing a script. Yet you could load the script files by ajax, respecting the same-origin-policy (!), and evaling their modified contents as #DavidEllis suggested.
Elsewise, you need to proxy all script inclusions over your server and modify them there.
I have an HTML page generated by an objective-C application and I want to load and open it in a local directory (not in a web server). The javascripts jquery.js and jquery.plot.js are stored in the same directory before the page is loaded.
I made the HTML page by following closely the examples available on http://flot.googlecode.com/
The scripts are declared in the HTML page as follows :
<script src="jquery.js" language="javascript" type="text/javascript"></script>
<script src="jquery.flot.pack.js" language="javascript" type="text/javascript"></script>
When I open the page, the expected graph (generated by the scripts) doesn't show up and I have the following syntax error in the javascript console :
Uncaught SyntaxError: Unexpected token ILLEGAL
The script source in the javascript console is made of strange (chinese ?) ideograms which are obviously "unexpected token" if it is what the browser sees.
I have the same problem with Chrome, Firefox and Safari.
The problem is not systematic because sometimes, it works !.
I have made tests with files prepared manually and again it works sometimes only.
I have also copied the same file which didn't work in another directory where the jquery scripts were present and, surprise, it worked ! but not always...
I have exhausted all my ideas on this problem and your help will be very much appreciated
Did you copy the JavaScript from an external source? I know I have had problems when copying from JSFiddle for example. Try removing any whitespace and see if that will get rid of the illegal token error.
I just had this problem and it was because the server on which my javascript was being hosted wasn't configured to send the javascript file with the correct MIME type. See this question.
Instead of fixing my server, I just opted to use a CDN path from cdnjs.com:
//cdnjs.cloudflare.com/ajax/libs/flot/0.7/jquery.flot.min.js
I'm JavaScript newbie. What I'd like to be able to do is to call a function from .js file sitting in ASP.NET MVC project's scripts folder.
The function is:
function myfunction() {
alert("HELLO");
}
...and it resides in file brfix.js
On a viewpage I call it like this:
<script src="../../Scripts/brfix.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
myfuntion();
});
</script>
But the code doesn't work. However, if I place js-code directly onto the viewpage, it works, like this:
<script type="text/javascript">
$(document).ready(function() {
alert("HELLO");
});
</script>
How to call a file-based js function? Could some JavaScript-Big-Kahuna help me out? =)
If that code is pasted directly from your source code, you have a typo so that'd be why it doesn't work!
your function is called myfunction(), but you're calling myfuntion()
you should enable js errors in your browser when developing. You don't say which browser you're using. For IE it's in Tools - Options - Advanced. Uncheck the "disable script debugging" options. In firefox I'd use something like FireBug as Dror says, if memory serves there are things that appear in the event of a javascript error. If you are still having problems I would try installing Fiddler2 (in IE) and building a request for the js file and see what comes back.
Another option would be to put a debugger; call just before you call your function, you should then be able to step through the javascript.
It may be that the reference to the external file is wrong:
<script src="../../Scripts/brfix.js" type="text/javascript"></script>
Make sure the reference is correct.
You can try by using view source to see the actual location ../../Scripts/brfix.js gets translated to in the final page.
You can also try with FireBug of FireFox.
If your mvc site is the root site in iis you can start the script src with a slash to get to the scripts. otherwise you can use an asp:ScriptManager to include the scripts
As other posters have mentioned, there is a typo. However...
Check out the Url.Content() method for referencing your site content. (images, scripts, etc...) Using ../.. isn't reliable, especially if you have varying levels of depth in your URLs or your application lives in a subdirectory.
Here's a helper I use in most of my projects, for example:
public static string Script(this HtmlHelper Html, string url)
{
UrlHelper Url = new UrlHelper(new RequestContext(Html.ViewContext.HttpContext, Html.ViewContext.RouteData));
string html = "<script type=\"text/javascript\" src=\"{0}\"></script>";
return string.Format(html, Url.Content(url));
}
And here it is being called:
<%= Html.Script("~/public/js/blah.js") %>
I had the same problem and it turned out that I had a few js files that weren't being found. If your MVC project structure is the default VS setup and your View page is in Home for example, then I think below will find the file:
<script src="../Scripts/brfix.js" type="text/javascript"></script>
But even if that one is found other js files not being found caused my $(document).ready not to work. Check your page in Firefox's Firebug, if a file isn't found you will see html markup with a message saying a resource could not be found, located underneath the offending reference. Once I resolved all the js references then my $(document).ready worked.
Strangely VS was telling me it couldn't find the js files when the references were correct, and wasn't flagging the problem when the references were incorrect.