jQuery not working with web2py

Maurice Waka

ongelezen,

31 mrt 2020, 21:14:2431-03-2020

aan 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

ongelezen,

1 apr 2020, 17:56:0701-04-2020

aan 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

ongelezen,

1 apr 2020, 20:54:3801-04-2020

aan web2py-users

What errors are you seeing in your browser console?

-Jim

Maurice Waka

ongelezen,

1 apr 2020, 22:35:4001-04-2020

aan 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

ongelezen,

1 apr 2020, 23:17:3601-04-2020

aan 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

To view this discussion on the web visit https://groups.google.com/d/msgid/web2py/CALkNK55hRxAk%3DkTua3Pi-JC_Ac0ZSS%2BDp6SpSFGsAD4MzAjk9Q%40mail.gmail.com.

Maurice Waka

ongelezen,

1 apr 2020, 23:26:2701-04-2020

aan 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.

To view this discussion on the web visit https://groups.google.com/d/msgid/web2py/7972be54-f400-42f0-83a7-46b7b8fee63f%40googlegroups.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

ongelezen,

2 apr 2020, 10:42:1902-04-2020

aan 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

ongelezen,

2 apr 2020, 10:55:4002-04-2020

aan 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

ongelezen,

2 apr 2020, 11:07:1102-04-2020

aan 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

ongelezen,

2 apr 2020, 12:59:1602-04-2020

aan 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.

To view this discussion on the web visit https://groups.google.com/d/msgid/web2py/91e9fdda-76d6-4dcd-8d63-07cf110fccb4%40googlegroups.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.

To view this discussion on the web visit https://groups.google.com/d/msgid/web2py/CAAcHJF8LLK2TNR%2Bf3G52Ru36Y8PeNCtVni-DNTZe7xe4m38fvw%40mail.gmail.com.

Jim Steil

ongelezen,

2 apr 2020, 13:45:3202-04-2020

aan 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

ongelezen,

2 apr 2020, 13:49:2102-04-2020

aan 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

ongelezen,

2 apr 2020, 14:04:4202-04-2020

aan web...@googlegroups.com

Yes

Thanks a lot

Regards

To view this discussion on the web visit https://groups.google.com/d/msgid/web2py/CAERBpoBQbRap6AE3_QXjqfKtB7UwwMaFMCb6UR2zUx2AjWYJug%40mail.gmail.com.

Maurice Waka

ongelezen,

2 apr 2020, 14:06:0402-04-2020

aan 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.

Allen beantwoorden

Auteur beantwoorden

Doorsturen