I'm experiencing a conflict in my page with jquery scripts, the features(top menu or image slider) in the page does not open unless the page is reloaded several times.
http://www.in2info.com/leroyalcorporatev2/beirut/restaurants.php?v=4
Can someone help me fix it.
Thank you
Problem:
Uncaught ReferenceError: $ is not defined(anonymous function)
Uncaught TypeError: $ is not a function(anonymous function)
Cause:
Which could mean that wherever you're loading $ from (I'm assuming jQuery), might NOT be loading in time, thus when the site gets hit initially, jQuery isn't ready, and the menu will be broken.
Make sure you're adding jQuery in correctly
Example:
<head>
<script src="jquery-1.11.2.min.js"></script>
</head>
Look at your browser console debug window. I used chrome (press F12)
Jquery is not loaded and hence the issue.
Put your jquery reference under header as below:-
<script src="js/jquery-1.3.2.min.js"></script>
you use
<head>
.....
<script>
$(window).load(function(){
$.getScript("js/jquery-1.3.2.min.js");
});</script>
....
</head>
in your head tag to load jquery
$ is jquery
just put jquery straight into the head
e.g.
<head>
...
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
... //use $ now
</head>
after the script line jquery becomes available ( $ ).
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.
I have a page where I have something like this at the end of the page:
<script src="jquery.js"></script>
<script src="onload-test.js"></script>
</body>
</html>
In my network tab it shows everything being loaded using h2 (http/2) and onload-test.js is loaded before jquery.js causing an error
"Uncaught ReferenceError: $ is not defined"
as I am using $(document).ready() in my script. The network tab shows jquery.js being queued for ~200ms.
Under what circumstances can this happen? and how can it be prevented?
use asycn while loading
<script async src="jquery.js"></script>
<script async src="onload-test.js"></script>
You can add jquery reference inside "<head></head>" section for best practice.
Body must contain only body specific js references.
jquery is a kind of global library which should be loaded in the <head></head> section.
You can refer: https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide
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.
im using this Color Picker Jquery plugin (http://colpick.com/plugin)
Problem is, i tried same simple code in in .html but when i change just extension to .php, the Color Picker doesnt work, while everything else works.
A simple button and added the important scripts like colpick.js and colpick.css.
Example:
index.html
<html>
<head>
<script src="jquery-2.1.3.min.js"></script>
<script src="canvasSettings.js"></script>
<script src="colpick.js" type="text/javascript"></script>
<link rel="stylesheet" href="colpick.css" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<button id="idColor">Show Color Picker</button>
</body>
</html>
canvasSettings.js
$(document).ready(function()
{
alert("First");
$('#idColor').colpick();
alert("Second");
});
So in index.html, when you click on button, it opens the Color Picker and both alert's show up, all good here.
Problem is, when i change index.html to index.php (when using an php server), the site loads up normaly, button shows up and "First" alert shows up.
But when it reaches the $("#idColor").colpick({}) it doesnt process, "Second" alert doesn't show up.
Have in mind that $("idColor").val() works.
Is there any special way to change this .html into .php even tho the html code is the same?
You've misdiagnosed the problem. It has nothing to do with serving up the HTML from PHP instead of a static file.
Here you load jQuery:
<script src="jquery-2.1.3.min.js"></script>
Then you load the plugin which binds itself to jQuery:
<script src="colpick.js" type="text/javascript"></script>
Then you load jQuery again (but a different version):
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
This overwrites the previous jQuery object and the colour picker plugin that you had bound to it.
Decide which version of jQuery you are going to use (the faster 2.x or 1.x with support for old versions of IE).
Load it before you load the plug in (you are currently doing that for 2.x but not 1.x)
Don't load the other version
SOLVED!
The problem was caused by:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
after i removed that, it worked.
Still need to find a bypass around that, why it caused the problem.
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.