my HTML file cant load another file using load function(jquery) - javascript

I found this example on w3schools.com and it should be working(it works on the website) but it doesn't work when I write it on my IDE(Atom).the home page is looking good but when I clicking the button nothing happened and it's not loading the demo_test.txt file. what am I doing wrong? or maybe something is missing?
home.html
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("demo_test.txt");
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<button>Get External Content</button>
</body>
</html>
demo_test.txt
jQuery and AJAX is FUN!!!
This is some text in a paragraph.

To start use Ajax, you must host your website or application on your machine, this called localhost.
There is many FREE applications you can use to create a localhost:
https://www.appserv.org/en/ .
https://www.apachefriends.org/index.html .
IIS *.
Download any of applications above and install it, it's very easy.
After installation, you can access your website with link http://localhost or http://127.0.0.1 .
You can create localhost without using any applications with IIS (Internet Information Services), but it's complicated compared to above applications.

Related

Javascript not executing using XAMPP

In my html document (which is in the xampp/htdocs directory), I'm using an external .js file. The .js file is in the same directory as my html file. I'm simply trying to use document.write() function and it's not printing anything.
I don't understand what I'm doing wrong. Whats the issue?
HTML file
<!DOCTYPE html>
<html>
<head>
<?php include 'include/head_elements.html'?>
<script type="text/javascript" src="register.js"></script>
</head>
<body>
<h1>Company Account creation</h1>
<div id="registration_menu">
<!--Elements are added and removed dynamically using JS-->
</div>
<script>
hello();
load_element_group("email_verification");
</script>
</body>
</html>
JS file
function hello(){
document.write("Hello world")
}
Internet Explorer's security policy may block certain scripts from running on a local machine.
There are ways to avoid this -- such as by adding the XAMPP website as a trusted location -- but often this gets tricky since the default "Intranet Zone" is auto-configured on a PC and modifying that can have other consequences (different zones assume different settings, such as passing NTLM credentials to local websites).
See also https://stackoverflow.com/a/7038775/3196753
A quick fix often is to add the fully qualified domain name (FQDN) to the URL, but depending on the zone settings, this may still cause issues.
A final solution, and one many developers fall back on, is to actually use a registered DNS address, such as http://localtest.me/, which points back to localhost and should use the "Internet Zone".
As Chris G points out in the comments, this isn't typical. Normally localhost can be used without issue so I've provided an example Local Intranet setting which can cause this:

WebStorm There is no locally stored library

I'have been working on a project which totally works on jsfiddle.net . However, when i try to run this project in webStorm, i get two errors.
first :
second :
Before, i post my question here, i searched on stackoverflow but couldn't find any solutions. I already did :
libraries:
and my html codes :
<!DOCTYPE html>
<html>
<head>
<title>Super Mario!</title>
<link rel='stylesheet' type='text/css' href='myMario.css'/>
<script type='text/javascript' src='//code.jquery.com/jquery-1.11.2.min.js'></script>
</head>
<body>
<img src="http://i1061.photobucket.com/albums/t480/ericqweinstein/mario.jpg"/>
</body>
</html>
why did u get these errors although i loaded libraries and succesfully defined source script in my html ? what should i do ?
You need to select this file link and click Alt + Enter to download this file to your library.
Screen from WebStorm:
Seems that you get the error when running your .js file directly, via 'Run file_name.js' in it's right-click menu, right? When doing this you are running it using Node.js. But 'document' can't be used in server-side scripts executed by Node.js. It is only defined in client-side javascript, i.e. when running in the browser via a tag in the rendered HTML, not the Javascript API engine running on the server. BTW, your .js file is not even included in your HTML page, as far as I can see from HTML code snippet...
This is not actually an error... WebStorm can't use remote resources available through CDN links for completion. Once it 'sees' such links, it searches for the corresponding library in ~.WebStorm9\system\extLibs\, and, if matching library is not found, prompts you to download it by showing this warning.
You can either suppress this warning or agree to download the library: hit Alt+Enter and then either hit the right arrow and choose 'Suppress for tag' or hit Enter to download.

jquery get, post not working when trying to create automatic website login

My intention is to make a script to automatically log in to a website instead of having to do the same thing every time i want to get inside..i use it very often.
Before that i am using this code to just check if jquery get is working but its not working..i have index.html file with accompanying jquery library file in desktop and i have checked with all browsers but it doesn't work. Thinking of cross site scripting although i don't fully understand it i tried uploading it to external server and tried running it but still no success. Thanks for your help in advance.
<html>
<head>
<title>jQuery Hello World</title>
<script type="text/javascript" src="jquery-2.0.3.js"></script>
</head>
<body>
<script type="text/javascript">
$.get("http://www.google.com", function (data) {
alert("Data Loaded: " + data);
});
</script>This is Hello World by HTML
<div id="msgid"></div>
</body>
</html>
Javascript can not be used for GET/POST to cross browser. So,
$.get("http://www.google.com", function (data) {
alert("Data Loaded: " + data);
});
this will not work.
This is called same origin policy. An alternative to this is JSONP, but again it depends on the third party server i.e. whether they support it or not. You can use server side scripting language to grab the cross domain page response and display on your own page.

Resource requests from webpages fail, but direct request work

I've installed CentOS and LAMP on an old desktop at home to practice system administration and webadmining, but I'm running into a strange problem.
I have a webpage that's no more than:
<!DOCTYPE html>
<html
<head>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
</body>
</html>
The chrome console is telling me that the request for test.js is failing. When I right click the link it gives and open it in a new tab, it correctly shows.
Is there a setting in apache that I need to set for this to work?
edit: Only thing in the logs is about the favicon
edit:
Some additional details: I'm accessing via the local ip of the machine, external script and stylesheet requests work, and all the files are in the same directory.
edit: Using fiddler, it looks like chrome isn't even sending out the request for the files.
edit: The response headers for the webpage include "Connection: close"
Make sure that file with that HTML code, and test.js are in the same directory.
I suspect that's the problem.
If you double click file on your system it's not opened via apache.
If you are opening html by
http://localhost/test.html
Then chrome will search to test.js in
http://localhost/test.js

JavaScript Ajax calls using YUI

Does anybody know if the order of linked external JavaScript files ever matters?. I've never known so but with YUI it seems to be the case when linking library files.
I am making HTTP get Ajax requests, using YUI and I have this HTML file and these 4 files linked (last is my Ajax file and the first 3 are library files from the framework downloaded from the build folder)...
<html>
<head>
<title>Ajax get page with YUI........</title>
<script src="yahoo-min.js"></script>
<script src="event-min.js"></script>
<script src="connection-min.js"></script>
<script src="ajax.js"></script>
</head>
<body>
<h3>Mike's Wednesday Ajax get page........</h3>
<div id="info">
This text will be replaced by Ajax dynamically........
</div>
</body>
</html>
If I link the library files in any other order, the call fails and I get errors. I'm just wondering as new to Ajax and YUI and as I've said, I've never experienced this before.
Thanks in advance.
If you stick with YUI 2, I would advice you to use the dependency configurator there: http://developer.yahoo.com/yui/articles/hosting/
It will tell you what files to include and in what order.

Categories

Resources