I am trying to create a small, simple JS framework for education purposes, but now I've got a problem I'm unable to solve.
Directory structure
/
/framework
jquery.js
init.js
/content
home.html
style.css
index.html
The problem
I'm obviously not pasting the jQuery file and stylesheet here, but here are index.html and init.js:
index.html
<!DOCTYPE html>
<head>
<script src="framework/jquery-1.5.min.js"></script>
<script src="framework/init.js"></script>
<title>My website</title>
</head>
<body>
<div id="content">
</div>
</body>
</html>
init.js
$(document).ready(function(){
if(!window.location.hash) {
$("#content").load("../content/home.html", function() {
alert("Load was performed.");
});
}
});
The home.html file contains some sample text, nothing special. I expect jQuery to load the contents of home.html into the content div, but nothing happens when I load the page. The alert with the message "Load was performed" is fired, however.
This task seems quite trivial to me so the mistake I made is probably quite silly, but any help is nevertheless very much appreciated.
Thank you!
Update:
It works when I use this on my server, but in localhost it fails. I can't use the Firebug trick now, because it shows nothing when I use it locally.. Any ideas?
The load function is broken in jquery 1.5 release. You can find the bug ticket at http://bugs.jquery.com/ticket/8125. This is fixed in version 1.5.1 which is not yet released to google and microsoft cdn. You can find the very latest jquery release with all the latest fixes including load() at http://code.jquery.com/jquery-git.js
I tested and confirmed that your code works in 1.5.1
If you're using Firebug, open the NET tab. It allows you to see the ajax response.
Chances are you should be using: /content/home.html, not ../content/home.html
The path is in context to the page, not where the JS file resides.
The base location for the executing script is the location of index.html, so the relative path to home.html is "content/home.html", and not "../content/home.html".
just try it with ./
$(document).ready(function(){
if(!window.location.hash) {
$("#content").load("./content/home.html", function() {
alert("Load was performed.");
});
}
});
that is working for me at least.
Related
I worked with moodle and I created a plugin in it. In this one I used the library select2.
In my view.php file of the plugin, I have:
foreach((array) $jsFiles as $path) {
$PAGE->requires->js(new moodle_url($CFG->wwwroot . '/mod/exam/subplugins/'.$path));
}
?>
<!DOCTYPE html>
<!-- Essential to activate bootstrap -->
<html>
<head>
<link rel="stylesheet" type="text/css"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="select2/select2.min.css" rel="stylesheet" />
<script src="select2/select2.full.js"></script>
<link href="select2/chart.min.css" rel="stylesheet" />
<script src="select2/chart.min.js"></script>
<title></title>
</head>
<?php
?>
</html>
<?php
echo $OUTPUT->footer();
So, I load the library here.
And I use it in the javascript file:
$(document).ready(function() {
var script = $.getScript("../../mod/exam/select2/select2.min.js");
init();
});
The first time, I loaded the script just in the ready function, but now I load it also in the init function and by doing this, it works more often.
And I also have a button to add a select2 field. And I loaded the script with the $.getScript function in the top of this function to make it works more often. If I don't do that when I click on the button, the most of the time, it doesn't work and I have something like that:
In my local machine on windows 10 it works 9 times on 10 with all browsers (chrome, firefox...)
I tested it on another machine on ubuntu, and it worked really not often with all browsers.
And I also tested it on a virtual machine on linux and it's like in localhost. When I access it from my machine on windows 10, it works 9 times on 10 and on the machine on ubuntu, it worked really rarely.
When it doesn't work, I have this error: Uncaught Error: Mismatched anonymous define() module: function(u){var e=function... from require.min.js and after, this one: createexam.js:98 Uncaught TypeError: $(...).select2 is not a function from my javascript file.
I also tried to load the library in other way provided by moodle like $this->page->requires->js(...) or without $.getScript function. But each time, it works less often than now.
So, do you have an idea why it doesn't work each time on all machines? Or do I load the library not in the good way ?
I never worked with Moodle but I worked with RequireJS. Your site uses RequireJS and select2 does support RequireJS. So you have to load it via RequireJS. Otherwise it will not work when RequireJS loads as first - so from time to time :)
Use RequireJS:
require(['select2/select2.full.js', 'select2/chart.min.js'], function () {
$(document).ready(function() {
var script = $.getScript("../../mod/exam/select2/select2.min.js", function () {
init()
});
});
});
Apparently moodle js caching is the reason.
Administration->appearence->ajax and javascript->turn off caching.
UPD: so my select2 was working during page initial rendering, but once document was ready select2 never registered again with that 'select2 is not a function' message.
I checked several times if jquery loads twice, the order of my scripts etc.
$.noConflict(true)
Helped me finally. I put it before select2 calls, jquery resovles its inner issues and the error is gone.
So, I have this really weird error. I am trying to link to an external JS file from my HTML file. Whatever I do, the functions in that external JS file can not be called.
This is my HTML code:
<html>
<head>
<meta charset="UTF-8">
<script src="cookies.js"></script>
<script type="text/javascript">
//some other JavaScript...
function test() {
extTest();
}
</script>
</head>
<body>
<button type="button" onclick="test();">Test</button>
</body>
</html>
And this is my external JavaScript file:
function extTest() {
alert("Hello world");
}
(I simplified both code blocks to contain only the necessary lines.)
So, whenever I click the button, the function extTest() is supposed to open a popup saying "Hello world". But extTest() is not called. Instead, I get a ReferenceError saying "extTest is not defined". The problem occurs in Firefox as well as Chrome and Edge.
Both files (HTML and JS) are in the same directory on my laptop. I tried linking to the JS file with a relative link (as shown in the code above), a relative link using . for current directory (./cookies.js), and an absolute link (/C:/...). I also tried putting the JS file in its own folder and linking to it, it didn't work.
I'd consider myself rather a beginner when it comes to JavaScript, but I already used external JS files and it worked. Do you guys have any idea where this error comes from? I mean, I could put all the code from the external file into the script in the HTML file, but I'm really curious why it's not working the other way.
Any hints are highly appreciated, thank you in advance.
You can use just like this, you don't need to make another function inside because i suppose you make the js code in cookies.js
<html>
<head>
<meta charset="UTF-8">
<script src="cookies.js"></script>
</head>
<body>
<button type="button" onclick="extTest();">Test</button>
</body>
</html>
I'd say initially it looks like you are declaring your function test but not invoking it. Try putting a line below that just has:
test ();
A question, if you similarly invoke your extTest function at the bottom of your external .js file, by which I mean again putting a line that says
extTest(); does it work as intended? If it doesn't, then there may be another issue at hand.
I'm a newbie to web dev, so please stick with me. I know this question has come up a lot (or a similar deviation), but after a couple of hours of searching I have not found an answer that works for me.
I've made sure the JQuery file is loaded first, and tried multiple versions to no avail. Whenever I try to load the Magnific Popup script, I get (TypeError: $ is not a function) on line 50. I've had a look and tried to change $ to JQuery to no avail, so it's back to normal now.
Here's the Magnific Popup code block:
var mfp,
MagnificPopup = function(){},
_isJQ = !!(window.jQuery),
_prevStatus,
_window = $(window), <<<<<< ERROR HERE
_document,
_prevContentType,
_wrapClasses,
_currPopupType;
And the relevant html:
<head>
<link rel="stylesheet" href="css/magnific-popup.css">
</head>
<body>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.magnific-popup.js"></script>
</body>
looks like its not picking your jquery library from CDN..
make sure that you have the network in your system or have access to jquery CDN url
if all above is fine then you try with http in CDN url like below. this is working for me
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Try to load your jquery file from your own (local) machine. Hopefully, this will work well.
Also, it would be helpful for me if you please let me know that you are not getting 404 for the JQuery file from the CDN.
I'm very new to html and trying to make a website. So far, I've got an html file that has the header for my site and I would like to use it in all the pages I create for the site using jQuery's load function.
So basically what I want to do is load Header.html into Page.html.
This is the code in Page.html:
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Hello</title>
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#Header").load("Header.html");
});
</script>
</head>
<body>
Hi
<div id="Header"></div>
</body>
</html>
Header.html looks something like this:
<div id="Header_Name">Adabelle Combrink</div>
<div id="Header_GameProgrammer">Game Programmer</div>
The only thing that comes up on the screen is "Hi" at the moment.
Looks good, apart from the backslashes in the src attributes should be forward slashes.
Is there any particular error you are getting?
Also, as has been pointed out, PHP would be better suited to this job.
<?php include 'header.php'; ?>
Aside from the accessibility question, there might also be a negative SEO impact.
Edit:
Assuming your path to jQuery is correct, then the code you posted should work (it does for me).
Things to try / be sure of:
You are running this on a server (i.e. not just opening the file in your browser, as this will fall foul of the same origin policy). Check that the address in your address bar doesn't start with file://
Make sure that the path to the jQuery library is correct
Make sure that Page.html and Header.html are in the same folder
Check your broswer's error console. Instructions.
you can use iframe for including html file into the div.
Otherwise you have to follow some server side include method.
like, in php <?php include("includes/header.php"); ?>
your code looks fine.
are you running the site on a web server, such as out of visual studio (iis express) ?
You can't run it locally. Ajax wont work that way.
Open your page in chrome, and press f12 to open up dev tools.
go to the network tab.
do you see the ajax request being fired on the load function?
by the way, regarding the header div,
a div is not a self-closing tag. Its a container. Its best that you close it using a closing tag.
Otherwise you might get unpredictable results in some browsers. ( I have not checked in a while, but it was that way a few years ago, probably in explorer 8)
jQuery(document).ready(function(){
jQuery.ajax({
url: 'header.html',
type: 'get',
success:function(data){
jQuery('#header_container').html(data);
}
});
});
<div id="header_container">....</div>
The content returned by the request will go inside the header_container div
Div elements require a closing div tag like so <div></div>.
there is no need to call small pieces of code from another js file, just write your code in the head element like so:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello</title>
<script type="text/javascript" src="../Scripts/jQuery.js"></script>
<script>
$(document).ready(function() {
$("#Header").load("../Templates/Header.html");
});
</script>
</head>
<body>
<div id="Header"></div>
</body>
</html>
Don't be afraid to ask for more info.
$.load() http://api.jquery.com/load/
I'm just starting to playing around on a Mac for the first time and I have created a very simple HTML page that uses jQuery to do a simple text swap when an h1 tag is clicked.
When I don't view the page through the webserver and just open it directly in Safari (file:///Applications/xampp/xamppfiles/htdocs/test/mypage.html) it works as expected. However, when I try to view through Apache (http://localhost/test/mypage.html) it doesn't work.
Here's the code:
<html>
<head>
<title>My Awesome Page</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" charset="utf-8">
function sayHello()
{ $('#foo').text('Hi there!');
}
</script>
</head>
<body>
<h1 id="foo" onclick="sayHello()">Click me!</h1>
</body>
</html>
Am I missing something on the Mac? Wouldn't be an Apache setting since its client-side code.. right?
I should probably also mention that I loaded XAMPP to run Apache and MySQL. I have tested Apache to ensure its working using a simple PHP file.
Steve
Use Firebug and access the page. One things that might be a culprit is that the web server cannot open jquery.js file because of file permission. Firebug will show if the jquery loaded in page, even you can add the jQuery code on-the-fly in the Console tab.
If you access it using Safari, use Web Inspector and see the if any error showed in Console tab.
One last thing, make a habit to avoid onclick, do this instead:
<script type="text/javascript" charset="utf-8">
function sayHello()
{
$('#foo').text('Hi there!');
}
//wait DOM loaded
jQuery(function($){
$('#foo').click(function(){
sayHello();
});
});
</script>
Also, it's better to put the js code near the page end, before </body>, so it would not block concurrent page element's loading.