Loading local files via jQuery - javascript

Spent 3 hours reading reference, but still no effect, so asking here.
OS: Windows 7 (is it relevant?)
Browser: Opera 11.51
jQuery: 1.6.2
Two files on a local machine, main.html and menu.html in the same folder.
main.html:
<html>
<head>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// append contents
$('#menu').load('menu.html');
});
</script>
</head>
<body>
<table>
<tr>
<td id="menu"></td>
</tr>
</table>
</body>
</html>
menu.html:
<html>
<head></head>
<body>
menu tree
</body>
</html>
As I guess, when I open main.html, there should be one table with one cell containing "menu tree" string. And it works, for example, in IE. But Opera doesn't show any result.
I debugged the stuff with optional callback for load(), it shows that result status for load() is "error".
What am I doing wrong?

In Opera you must set the flag Allow File XMLHttpRequest (opera:cofig - User Prefs).
In Google Chrome you must use option parameter --allow-file-access-from-files for run browser, for example: "C:\Documents and Settings\User\Local Settings\Application Data\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files

You probably want to get rid of the <body>, <head> and <html> tags in the Menu.html.
The way you're doing it now is invalid HTML because there is only one <body>, <head>, and <html> tag allowed in a document.
Change Menu.Html to
<p>
Menu
</p>
Try that!

Related

I get "function is not defined" when I move a Javascript function from in-line code, to a separate js file

I am trying to make a very simple thing work:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script src="js/test.js" type="text/js"></script>
<button onclick="test()" type="submit">Test</button>
</body>
</html>
With js/test.js being found by the browser and containing:
function test() {
alert("test");
}
When opening the page and clicking the button, nothing happens and I can see in the console:
Uncaught ReferenceError: test is not defined
at HTMLButtonElement.onclick (test:7)
I have tried to move the script import above or under the button, or in the header.
I have tried to use "window.setlocale = function" in my js file.
I have tried to put nothing in the test method.
I checked for errors with JSLint (there is no error).
When I check the source, I can see the js file and the browser opens it when I click on it.
The only way I can get the Javascript to work is to write it inline...
Maybe the issue is with my environment?
In order to run this, I use an Apache server, and it is configured to serve this on localhost:8077. I works fine so far.
I use Laravel 7.10, PHP 7.4... working fine. To run this I created a simple route, that shows the view (a simple index.blade.php) with the HTML content copy/pasted above. It displays fine on "http://localhost:8077/test", no problem.
I also tried to use the laravel notation
<script src="{{ asset('js/test.js') }}" type="text/js"></script>
but it gives the same result.
I also have the PHP debugbar (a Laravel plugin) active, and it does not show any error. The view is properly loaded and displayed.
Also, I use PHPStorm, and it does not detect any issue.
It's been 2 days and I cannot makes this seemingly extremely basic thing to work, please help me m(_ _)m
Your script type is wrong. Use application/javascript in your script element to make your javascript work - or better yet, remove the type attribute and let browsers auto-detect the type:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script src="js/test.js" type="application/javascript"></script>
<button onclick="test()" type="submit">Test</button>
</body>
</html>
Without type attribute:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script src="js/test.js"></script>
<button onclick="test()" type="submit">Test</button>
</body>
</html>
you can try to add script tag to header tag. like this
<head>
<script type="text/javascript" src="path/to/script.js"></script>
<!--other script and also external css included over here-->
</head>
Try removing the function name in js/test.js
function() {
alert("test");
}
Please add the js file as a reference in the header section of your core file. External referencing.

How do you allow html and Javascript files to function in Atom?

Code on webpageThe button doesn't workSo, I am fairly new to JavaScript and have been looking at tutorials for the language. I downloaded the Atom IDE and began following a video and used the same code as the video to make a web page with a button that reveals a message when clicked. However when I click the button nothing happens, and when I hit inspect element.
It gives me the following error: Failed to load resource: net::ERR_FILE_NOT_FOUND
It appears as though the HTML file is not working with the .js file. However they are in the same directory.
Here's the updated code (still the same error):
<DOCTYPE! html>
<html>
<head>
</head>
<body>
<button onclick="revealMessage()">Click me!</button>
<p id="hiddenMessage" style="display:none">Filosofem</p>
</body>
<script>
function revealMessage() {
document.getElementById("hiddenMessage").style.display = 'block';
}
</script>
</html>
Perhaps, it is the file directory. When you declared <script src="js/script.js"></script>, that means that your script.js file, must be located in a subfolder called "js".
If you want your to be within your file, then you can do
<DOCTYPE! html>
<html>
<head>
</head>
<body>
<button onclick="revealMessage()">Click me!</button>
<p id="hiddenMessage" style="display:none">Filosofem</p>
</body>
<script>
function revealMessage() {
document.getElementById("hiddenMessage").style.display = 'block';
}
</script>
</html>
Finally, you should try resaving the code through atom, and make sure your code is the right version of your code.
By using an external stylesheet you need to make sure your CSS file is saved as said above but with <script scr="filename.js">/script> I still haven't found a way other than having your code internal which is completely fine unless you're making a world wide website then it would be easy to hack.

Path of a Javascript file inside an iframe with null src

Let's consider this situation.
I have a folder called /jscript, inside which there are two files called my_js_file1.js and my_js_file2.js.
I've also a page, /index.html, like this:
<html>
<head>
<script type='text/javascript' src='jscript/my_js_file1.js'></script>
</head>
<body>
<iframe src=''/>
</body>
</html>
Now, let's assume that, via the my_js_file1.js, I want to add to the <head> tag of the iframe, the following tag:
<script type='text/javascript' src='my_js_file2.js'></script>
Is the above src correct? If yes, it means that the document inside the iframe refers to the "working directory" of the javascript file.
If the previous is not, does the following solution work?
<script type='text/javascript' src='jscript/my_js_file2.js'></script>
(Working of this last one means that the "working directory" is the same of the html file)
Regardless of the result, is there someone is able to explain the correct behaviour?
jscript/my_js_file2.js should be correct.
Documents and elements do have a so-called "base URI". It is used for resolving relative links such as yours.
The base URL of a document defaults to the document's address (as
displayed by the browser and available in window.location), but can
change from the default:
• When an HTML <base> tag is found in the document;
• When this is a new document created dynamically.
— Node.baseURI - Mozilla Developer Network (MDN)
Under the assumption that your HTML file does not contain any <base> tags, the base URI is /index.html.
You can prove this behavior by verifying the value of document.baseURI:
<!doctype html>
<html>
<head>
<script src="subdir/include.js"></script>
</head>
<body>
</body>
</html>
include.js:
alert(document.baseURI);

jcors-loader.js not working in IE7

Index.html
<html>
<head>
<script type="text/javascript" src="/js/jcors-loader.js"></script>
<script>
JcorsLoader.load(
"js/jquery-1.8.0.js",
"/js/alertme.js",
function() {
$("#result").text("TEST OK");
}
);
</script>
</head>
<body>
<h1 id="result"></h1>
</body>
</html>
alertme.js
alert("Loaded");
This works fine in chrome and firefox it displays "TEST OK" and popup...But no message or alert in IE(7,8,9)...Any help will be appreciated.
I wrote that library, remember these three tips to use it.
Not invoke a script add the inline content.
Put the script tag after the .
IE7 works but blocks onload.
First thing to check is that you're not using console.log anywhere in your javascript as this can cause funny issues with IE.
The next thing to do is check the documentation on the library you're using as it may not be compatible with IE 9 and below (have you tried it with IE 10?)

Javascript function not recognized in CRM 2011 HTML Web resource

Following up from my solved [previous issue][1], I'm having trouble building a simple HTML Web resource containing some basic javascript, page is rendered correctly but script doesn't seem to work properly.
My HTML resource is very basic:
<html>
<head>
<script src="ClientGlobalContext.js.aspx" />
<script type="text/javascript" src="new_jquery_1.7.2.min" />
<script type="text/javascript">
function buttonClick() { alert('Yo !'); }
</script>
</head>
<body>
<input type="button" value="Test" onclick="javascript: buttonClick();" />
</body>
</html>
Although the page shows up fine, clicking the button yields The value of the property is null or undefined not a function object error like the functions wasn't there, but I checked via F12 console that the code is rendered correctly.
I also tried invoking the web resource via the direct url, in the form of
http://mycrmserver/myorg/WebResources/new_myResource
But (as I expected) the behavior of the page was the same.
I checked Google, I surfed a couple of other SO questions and MSDN and all state this is the right way to do it, what's wrong with my code ?
Other (not sure if useful) details:
If the F12 tool is open the error comes up as a SCRIPT5007 javascript runtime error in the console. If it's not, I get the usual script error notify popup if I browse to the webresource direct url, or nothing happens at all if I try to open the resource inside the CRM.
The CRM environment is updated to Rollup 3 (updating it is not an option unfortunately)
I'm using IE 9 (Remember: Dynamics CRM can't be used in non-IE browsers yet)
UPDATE
Shorthand tags confuse the CRM.
Basically this syntax sometimes gets messed up:
<script src="ClientGlobalContext.js.aspx" />
But this works perfectly:
<script src="ClientGlobalContext.js.aspx"></script>
Root cause is a missing script tag, despite the code you posted being correct.
CRM does some messing about with the HTML you post into the script editor window. What is rendered in the browser is this (note that the ClientGlobalContext.js.aspx tag is not closed in the same way as your pasted code):
<HTML><HEAD>
<SCRIPT src="ClientGlobalContext.js.aspx">
<script type="text/javascript" src="new_jquery_1.7.2.min" />
<script type="text/javascript">
function buttonClick() { alert('Yo !'); }
</SCRIPT>
<META charset=utf-8></HEAD>
<META charset=utf-8></HEAD>
<BODY><INPUT onclick=javascript:buttonClick(); value=Test type=button></BODY></HTML>
Resolution:
Add full "close" tags to each opening script tag (rather than using "/>").

Categories

Resources