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.
Related
I'm trying to run the following code, written on my local machine:
http://www.jsfiddle.net/WShdx/3/
Functionality-wise (ignore the broken images in the previous and next buttons, and the wrongly-sized main images) the click/hover function is working properly in jsfiddle. However, on my local machine it's not working at all.
For all intents and purposes the code is identical, except the local copy has this head section to load in the javascript/css files that are contained within the jsfiddle page:
<head>
<title>Jquery Wizard</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="wizard.js" type="text/javascript" ></script>
</head>
Is there some wonderful function of jsFiddle that is making my code magically work, or am I missing something here?
You chose to run the script-code "onload" on jsFiddle, that's the difference.
Without onload it will not find $('area') , because your script is placed inside the <head>, where the elements inside the <body> are still unknown.
I'd also advice anyone who run into such errors to use firebug or any debugging tool debug the script whenever such problems occur. Might be very simple yet frustrating problems like an Uncaught SyntaxError: Unexpected token ILLEGAL error. Debuggers come in very handy!
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 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.
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.