Link to home
Start Free TrialLog in
Avatar of Overthere
Overthere

asked on

Jquery Plugin not working

I am trying to execute a jquery plugin in a php 5.5 page that I downloaded from this source:
http://www.jqueryscript.net/loading/jQuery-Plugin-For-Creating-Loading-Overlay-with-CSS3-Animations-waitMe.html

Open in new window


I created a simple page, using their instructions and can not get the plugin to work.
Step 2 and 3 of their instructions were the same so, I just used those once.
I downloaded the plugin, unzipped it and placed in a folder "jqueryplugins" in my web site. I adjusted the path to the css, .js  and img .   (jqueryplugins is the folder.)
I decided to construct just a simple page first before trying to ingratiate in my php page.
But it isn't working. Their demo works fine, both at their site and the page you download locally to demo, works fine. But the one I constructed does not.
I am using Windows 10, Wamp and IE 11.
Can someone tell me what I am doing wrong??
<!DOCTYPE html>
<head>
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link type="text/css" rel="stylesheet" href="jqueryplugins/waitMe.css">

</head>
<body>
<form>
<button type="button" id="demo">Submit</button>
</form>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="jqueryplugins/waitMe.js"></script>


<script>

$(function(){

var current_effect = 'ios'; 
$('#demo').click(function(){
run_waitMe(current_effect);
});

function run_waitMe(effect){
$('#SELECTOR').waitMe({
//none, rotateplane, stretch, orbit, roundBounce, win8,
//win8_linear, ios, facebook, rotation, timer, pulse,
//progressBar, bouncePulse or img
effect: 'ios',
//place text under the effect (string).
text: 'Calculating',
//background for container (string).
bg: 'rgba(255,255,255,0.7)',
//color for background animation and text (string).
color: '#000', 
//change width for elem animation (string).
sizeW: '',
//change height for elem animation (string).
sizeH: '',
// url to image
source: 'jqueryplugins/img.svg',
// callback
onClose: function() {}
});
}
});
</script>
</body>
</html>

Open in new window

Avatar of Robert Granlund
Robert Granlund
Flag of United States of America image

<script src="jqueryplugins/waitMe.js"></script>

Make sure the address is correct.
Try running it with the Chrome browser, and use Chrome Dev Tools.  The Tools really give you a lot of insight into what's going on under the covers of the browser.
https://developer.chrome.com/devtools
https://www.codeschool.com/courses/discover-devtools
Avatar of Overthere
Overthere

ASKER

Before I had posted, I had tried it with IE developer tools and Chrome tools but no errors showed.
Are you sure it is not:
<script src="SITE URL/jqueryplugins/waitMe.js"></script>
I FINALLY did get an error but I have coded it exactly as they show in the link
The error I received was on this line for the :
$('#SELECTOR').waitMe({

Open in new window



Error Message: "Object doesn't support property or method 'waitMe'"
Should "SELECTOR" be replaced with the id of the html  - in this case demo?
I tried it and received same error...

If you look at the link I provided for the instructions for the plugin,  it will show it as:

 
<script src="waitMe.js"></script> 

Open in new window


And this is the link:
http://www.jqueryscript.net/loading/jQuery-Plugin-For-Creating-Loading-Overlay-with-CSS3-Animations-waitMe.html

Open in new window

Any chance you can post the script with fully qualified URLs for the JS, CSS, and SVG files?  Then others can test, too. These lines would help us remove the "guessing" part of this exercise:
 4. <link type="text/css" rel="stylesheet" href="jqueryplugins/waitMe.css">
13. <script src="jqueryplugins/waitMe.js"></script>
42. source: 'jqueryplugins/img.svg',
It looks like SELECTOR should be the id= attribute of something in the HTML document, right?
Well, that's what I thought too. So I changed it the id of the button and the result is the same. It really doesn't make sense because the page that I download locally and that they provided in the zip file for the plugin, works great.  
I have compared them, and its different in the sense they demo all the various effects etc. SO the coding isn't really comparable.
Any chance you can post the script with fully qualified URLs for the JS, CSS, and SVG files?  Then others can test, too. These lines would help us remove the "guessing" part of this exercise:
 4. <link type="text/css" rel="stylesheet" href="jqueryplugins/waitMe.css">
13. <script src="jqueryplugins/waitMe.js"></script>
42. source: 'jqueryplugins/img.svg',
here you go....I can now get the test message to display but not the effect nor can I turn it off (hide)

<!DOCTYPE html>
<head>
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link type="text/css" rel="stylesheet" href="jqueryplugins/waitMe.css">

</head>
<body class="waitMe_body">
  <div id="test" align="center" class=".waitMe_progress.bouncePulse" style="background:#fff">
  </div>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="jqueryplugins/waitMe.js"></script> 


<script>
$(function(){
var current_effect = 'bouncePulse'; 
$('#test').click(function(){
run_waitMe(current_effect);
});

function run_waitMe(effect){
$('#test').waitMe({
//none, rotateplane, stretch, orbit, roundBounce, win8,
//win8_linear, ios, facebook, rotation, timer, pulse,
//progressBar, bouncePulse or img
effect: 'bouncePulse',
//place text under the effect (string).
text: 'Loading...',
//background for container (string).
bg: 'rgba(255,255,255,0.7)',
//color for background animation and text (string).
color: '#000', 
//change width for elem animation (string).
sizeW: '',
//change height for elem animation (string).
sizeH: '',
// url to image
//source: 'jqueryplugins/img.svg',
source: '' ,
// callback
onClose: function() {}
});
}
});
</script>
<script>
//$(container).waitMe("hide");
</script>
</body>
</html>

Open in new window

Let's try this one more time...

This is a tag with a relative URL.  It's relative to the existing directory that contains the HTML document.  The JavaScript source cannot be found unless you know the fully qualified URL of the HTML document.

<script src="jqueryplugins/waitMe.js"></script>

This is a tag with a fully qualified URL.  It can be found by following the link because it starts with HTTP.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

Please refer to this comment.
https://www.experts-exchange.com/questions/28928661/Jquery-Plugin-not-working.html?anchorAnswerId=41480023#a41480023
hmm, I am rather surprised. Here is why: I use relative path for my images, includes and so forth and they are readily found by my pages. This plugin, when unzipped, contains the waitMe.js and the css etc. creating its own local folder.
 
If you visit the link where I downloaded it, and download it yourself,  unzip it, you will see it contains the necessary scripts and provides them locally. And in following the provided instructions,  It contains all the necessary components except for the ones referencing at ajax.googleapis.com - why would I need to have a fully qualified url then for the waitMe.js when it is local?

And in view of the instructions, and following the instructions, the only fully qualified url are the two referencing  ajax.googleapis.com
See what I mean? The css file contains different classes for the different effects.

I have attached a screen shot of the folder it creates and the files contained within it....
Capture.PNG
Avatar of leakim971
replace :
jqueryplugins/waitMe.js
by :
//vadimsva.github.io/waitMe/waitMe.js

and
jqueryplugins/waitMe.css
by :
//vadimsva.github.io/waitMe/waitMe.css

ONCE it work, be sure you provide right to your server to access to the jqueryplugins
still does not work...
ASKER CERTIFIED SOLUTION
Avatar of Member_2_248744
Member_2_248744
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
good deal, I will try this tonight and see how it goes...
Have any thoughts as to what event I can use to hide it? I want it to only to display while my page is executing some calculations, and then stop....
No I do not have any Ideas about that, because the event you would need to have stop the overlay animation, is when your calculations are finished. So whenever the JS code or AJAX is finished, and you are ready to display the results of the calc , just add the -
     $('#waitForm').waitMe('hide');

to that code block that displays the calc on the screen.