jQuery not working with web2py

82 views
Skip to first unread message

Maurice Waka

unread,
Mar 31, 2020, 9:14:24 PM3/31/20
to web2py-users
I have this code below that works well on the demo site: http://jsfiddle.net/Lhg914dc/


{{extend 'layout.html'}}
<html>
 
<head>
 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/3.4.1/jquery-ui.min.js"></script>
 
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/3.4.1/themes/base/jquery-ui.css" type="text/css">
 
<style>
 
/*QuickReset*/
 
*{margin:0;box-sizing:border-box;} html,body{height:100%;font:14px/1.4 sans-serif;}


 article
{
   height
: 150vh;
 
}
 
</style>
 </
head>
 
<!--button onclick="goTo(selector, timeout, cb)">Click me</button-->
 <body>
 <article style="background:#0bf;" id="top">WELCOME (waits
3 sec)</article>
 
<article style="background:#f0b;" id="about">{{=me}}</article>
 
<article style="background:#b0f;" id="work">{{=work}}</article>
 
<article style="background:#0fb;" id="testimonials">{{=love}}</article>
 
<article style="background:#fb0;" id="contact">
 CONTACT
<a href="#top">TO TOP</a>
 </
article>


 
<script type="text/javascript" src="https://code.jquery-3.4.1.min.js">


 
function goTo(selector, timeout, cb) {
 
var $el = $(selector);
 
if (!$el[0]) return;
 
var $par = $el.parent();
 
if ($par.is("body")) $par = $("html, body");
 setTimeout
(() => {
 $par
.stop().animate({scrollTop: $el.offset().top}, 1000, cb && cb.call($el[0]));
 
}, timeout || 0);
 
}


 
// USE LIKE:
 goTo
("#testimonials", 3000, function() {
 
// You can use `this` to reference #testimonials! yey
 $
(this).append("<br>Going to #contact in 3sec!");
 goTo
("#contact", 3000);
 
});
 
// Alternatively, without using callbacks you can do
 
//goTo("#testimonials", 3000);


 
//goTo("#contact", 6000);
 
// Reuse function for elements click!
 $
("[href^='#']").on("click", function(e) {
 e
.preventDefault();
 goTo
($(this).attr("href"));
 
});
</script>
</
body>
</html>


When I try it on web2py I don't see any js/jQuery effects.

I want to see the page scroll  in stages down to specific DIVs, how can I do this? where could the error be?

Kind regards

Maurice Waka

unread,
Apr 1, 2020, 5:56:07 PM4/1/20
to web2py-users
Any help on this?
I can't get the code to work with jQuery

{{extend 'layout.html'}}


<!DOCTYPE html>


<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


 
<meta name="viewport" content="width=device-width, initial-scale=1">


 
<script src="{{=URL('static','js/jquery-1.10.1.js')}}"></script>
 
   
 
<style id="compiled-css" type="text/css">

     
/*QuickReset*/
 
*{margin:0;box-sizing:border-box;} html,body{height:100%;font:14px/1.4 sans-serif;}


 article
{
   height
: 150vh;
 
}
 
<
/style>




<body style="">
    <article style="background:#0bf;" id="top">WELCOME (wait 3 sec)</
article>
 
<article style="background:#f0b;" id="about">ABOUT</article>
 <article style="background:#b0f;" id="work">OUR WORK</
article>
 
<article style="background:#0fb;" id="testimonials">TESTIMONIALS<br>Going to #contact in 3sec!</article>

 
<article style="background:#fb0;" id="contact">
   CONTACT
<a href="#top">TO TOP</a>
 </
article>



 
<script type="text/javascript" src="{{=URL('static','js/jquery-1.10.1.js')}}">







 
function goTo(selector, timeout, cb) {
 
var $el = $(selector);
 
if (!$el[0]) return;
 
var $par = $el.parent();
 
if ($par.is("body")) $par = $("html, body");
 setTimeout
(() => {

 $par
.stop().animate({scrollTop: $el.offset().top}, 500, cb && cb.call($el[0]));

 
}, timeout || 0);
 
}


 
// USE LIKE:
 goTo
("#testimonials", 3000, function() {
 
// You can use `this` to reference #testimonials! yey
 $
(this).append("<br>Going to #contact in 3sec!");

 goTo
("#contact", 3500);

 
});
 
// Alternatively, without using callbacks you can do
 
// goTo("#testimonials", 3000);

 
// goTo("#contact", 6000);

 
// Reuse function for elements click!
 $
("[href^='#']").on("click", function(e) {
 e
.preventDefault();
 goTo
($(this).attr("href"));
 
});






 
</script>


</
body></html>

Jim S

unread,
Apr 1, 2020, 8:54:38 PM4/1/20
to web2py-users
What errors are you seeing in your browser console?

-Jim

Maurice Waka

unread,
Apr 1, 2020, 10:35:40 PM4/1/20
to web...@googlegroups.com
On page reload it should ;
... Slide to testimonials then after 3 seconds
.... Slide to contact. 

In Web2py nothing happens.
When I do it from the folder it works. 
Do the error is that it doesn't slide as normal 
Regards 

--
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
---
You received this message because you are subscribed to a topic in the Google Groups "web2py-users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/web2py/AE0mb8FtMM4/unsubscribe.
To unsubscribe from this group and all its topics, send an email to web2py+un...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/web2py/7972be54-f400-42f0-83a7-46b7b8fee63f%40googlegroups.com.

Jim Steil

unread,
Apr 1, 2020, 11:17:36 PM4/1/20
to web...@googlegroups.com
But have you looked at the browser JavaScript console to see what it is telling you?

In Firefox press F12 and then click on the console tab. That will tell you what JavaScript errors are occurring in the browser. 

Jim


Maurice Waka

unread,
Apr 1, 2020, 11:26:27 PM4/1/20
to web2py-users
I don't have firefox but on opera & chrome it gives this:

web2py-bootstrap3.js:2 Uncaught TypeError: Cannot set property 'ajax_fields' of undefined
    at web2py-bootstrap3.js:2
    at web2py-bootstrap3.js:82
To unsubscribe from this group and all its topics, send an email to web...@googlegroups.com.

--
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
---
You received this message because you are subscribed to a topic in the Google Groups "web2py-users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/web2py/AE0mb8FtMM4/unsubscribe.
To unsubscribe from this group and all its topics, send an email to web...@googlegroups.com.

Jim S

unread,
Apr 2, 2020, 10:42:19 AM4/2/20
to web2py-users
You are including layout.html at the top of your code snippet.

I would suggest that you test this all by itself (remove the include of layout.html) before trying to integrate with web2py.  Create one html file with the code you need, get that working and then take what you learned there and pull it in to your web2py application.

Does that make sense?

-Jim

Lovedie JC

unread,
Apr 2, 2020, 10:55:40 AM4/2/20
to web...@googlegroups.com
I did that, without the layout.html but still getting the same effects. 
Regards 

You received this message because you are subscribed to the Google Groups "web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to web2py+un...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/web2py/91e9fdda-76d6-4dcd-8d63-07cf110fccb4%40googlegroups.com.

Jim Steil

unread,
Apr 2, 2020, 11:07:11 AM4/2/20
to web...@googlegroups.com
What is your browser console showing for errors?  Can you post the entire .html file with no web2py requirements?

-Jim

To unsubscribe from this group and all its topics, send an email to web2py+un...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/web2py/CAAcHJF8LLK2TNR%2Bf3G52Ru36Y8PeNCtVni-DNTZe7xe4m38fvw%40mail.gmail.com.

Maurice Waka

unread,
Apr 2, 2020, 12:59:16 PM4/2/20
to web2py-users
My biggest apology.

I edited a wrong html file (the one outside web2py)  by removing the {{extend 'layout.html'}}

So with the right file edited, it now works.

But I also need the top navbar....

Kind regards
To unsubscribe from this group and stop receiving emails from it, send an email to web...@googlegroups.com.

--
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
---
You received this message because you are subscribed to a topic in the Google Groups "web2py-users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/web2py/AE0mb8FtMM4/unsubscribe.
To unsubscribe from this group and all its topics, send an email to web...@googlegroups.com.

Jim Steil

unread,
Apr 2, 2020, 1:45:32 PM4/2/20
to web...@googlegroups.com
Same effects, yes, but what error messages are you seeing in the console?

-Jim

On Thu, Apr 2, 2020 at 9:55 AM Lovedie JC <lbjc...@gmail.com> wrote:
To unsubscribe from this group and all its topics, send an email to web2py+un...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/web2py/CAAcHJF8LLK2TNR%2Bf3G52Ru36Y8PeNCtVni-DNTZe7xe4m38fvw%40mail.gmail.com.

Jim Steil

unread,
Apr 2, 2020, 1:49:21 PM4/2/20
to web...@googlegroups.com
Whoops, I read the wrong post.

So, if you need the top navbar, then you'll need to rework this html file.  If you notice how the include works, your respecifying the html, head and body tags in your new html file.  They're already specified in your layout.html.  

If it were me, I'd put the jquery include in layout.html.  Then I'd remove the html, head and body tags from this html file and only add the necessary script and style tags.

Make sense?

-Jim

Lovedie JC

unread,
Apr 2, 2020, 2:04:42 PM4/2/20
to web...@googlegroups.com
Yes
Thanks a lot 
Regards 

Maurice Waka

unread,
Apr 2, 2020, 2:06:04 PM4/2/20
to web...@googlegroups.com
Thanks team.
Take care 
Regards 

To unsubscribe from this group and all its topics, send an email to web2py+un...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/web2py/30a99012-045e-46a8-a650-4252439c2e83%40googlegroups.com.
Reply all
Reply to author
Forward
0 new messages