librelist archives

« back to archive

unable to properly embed and execute jQuery into flask app template

unable to properly embed and execute jQuery into flask app template

From:
Uday Choudhary
Date:
2013-07-21 @ 08:52
Hi...

I have a basic html template with jQuery which has a initial loader which
would show till the page loads fully.
It works well in the basic .html templates. The jQuery is as:
/////////////////////////////////////////////////////////////////////////////
<script src="../static/js/jquery.colorbox-min.js"></script>
<script src="../static/js/custom.js"></script>
<script src="../static/js/jquery.ui.totop.min.js"></script>
<script
type="text/javascript">if($(window).width()>1024){document.write("<"+"script
src='../static/js/jquery.preloader.js'></"+"script>");}  </script>
<script>
     jQuery(window).load(function() {
     $x = $(window).width();
  if($x > 1024)
  {
  jQuery("#textfade .row").preloader();    }
    jQuery('.spinner').animate({'opacity':0},1000,'easeOutCubic',function
(){jQuery(this).css('display','none')});
        });

  </script>
  <script type="text/javascript">
    $(document).ready(function() {

      $().UItoTop({ easingType: 'easeOutQuart' });

    });
  </script>

</body>
</html>

///////////////////////////////////////////////////////////////////////////////////////////

The jquery.preloader.js loads and then next script is executed which
creates a <div class="preloader"></div> for the loader.gif to appear.

......................

I need to use same functioning into my flask app which has following
directory strucutre
/static
...../css
...../js
...../img
/templates
......index.html

so changed the code in *templates/index.html* for flask app into:


///////////////////////////////////////////////////////////////////////////////////////////////////

<script src="{{ static('js/custom.js') }}"></script>
<script src="{{ static('js/jquery.ui.totop.min.js') }}"></script>
<script
type="text/javascript">if($(window).width()>1024){document.write("<"+"script
src='/static/js/jquery.preloader.js'></"+"script>");}  </script>

<script type="text/javascript">
     jQuery(window).load(function() {
     $x = $(window).width();
  if($x > 1024)
  {
  jQuery("#textfade .row").preloader();    }
    jQuery('.spinner').animate({'opacity':0},1000,'easeOutCubic',function
(){jQuery(this).css('display','none')});
        });

  </script>
  <script type="text/javascript">
    $(document).ready(function() {

      $().UItoTop({ easingType: 'easeOutQuart' });

    });
  </script>

</body>
</html>


///////////////////////////////////////////////////////////////////////////////////////////////////

Scripts file loads well, except that this part of script doesn't executes (
i hope)
jQuery("#textfade .row").preloader();    }
    jQuery('.spinner').animate({'opacity':0},1000,'easeOutCubic',function
(){jQuery(this).css('display','none')});

which is responsible for loading jquery.preloader() and creating a <div
class="preloader"></div> element below <body> in the same index.html file.

I don't know why its not executing or able to create that .

Code for preloader.js is here: http://pastebin.com/qDheQSNC

Please suggest or help.

Re: [flask] unable to properly embed and execute jQuery into flask app template

From:
Shiv Shankar Dayal
Date:
2013-07-21 @ 08:56
You do not write ../static for inclusion of css and js but /static. The
convention of flask picks that up automatically.


On Sun, Jul 21, 2013 at 2:22 PM, Uday Choudhary <mobulite@gmail.com> wrote:

> Hi...
>
> I have a basic html template with jQuery which has a initial loader which
> would show till the page loads fully.
> It works well in the basic .html templates. The jQuery is as:
>
> /////////////////////////////////////////////////////////////////////////////
> <script src="../static/js/jquery.colorbox-min.js"></script>
> <script src="../static/js/custom.js"></script>
> <script src="../static/js/jquery.ui.totop.min.js"></script>
> <script
> type="text/javascript">if($(window).width()>1024){document.write("<"+"script
> src='../static/js/jquery.preloader.js'></"+"script>");}  </script>
> <script>
>      jQuery(window).load(function() {
>      $x = $(window).width();
>   if($x > 1024)
>   {
>   jQuery("#textfade .row").preloader();    }
>     jQuery('.spinner').animate({'opacity':0},1000,'easeOutCubic',function
> (){jQuery(this).css('display','none')});
>         });
>
>   </script>
>   <script type="text/javascript">
>     $(document).ready(function() {
>
>       $().UItoTop({ easingType: 'easeOutQuart' });
>
>     });
>   </script>
>
> </body>
> </html>
>
> 
///////////////////////////////////////////////////////////////////////////////////////////
>
> The jquery.preloader.js loads and then next script is executed which
> creates a <div class="preloader"></div> for the loader.gif to appear.
>
> ......................
>
> I need to use same functioning into my flask app which has following
> directory strucutre
> /static
> ...../css
> ...../js
> ...../img
> /templates
> ......index.html
>
> so changed the code in *templates/index.html* for flask app into:
>
>
> 
///////////////////////////////////////////////////////////////////////////////////////////////////
>
> <script src="{{ static('js/custom.js') }}"></script>
> <script src="{{ static('js/jquery.ui.totop.min.js') }}"></script>
> <script
> type="text/javascript">if($(window).width()>1024){document.write("<"+"script
> src='/static/js/jquery.preloader.js'></"+"script>");}  </script>
>
> <script type="text/javascript">
>      jQuery(window).load(function() {
>      $x = $(window).width();
>   if($x > 1024)
>   {
>   jQuery("#textfade .row").preloader();    }
>     jQuery('.spinner').animate({'opacity':0},1000,'easeOutCubic',function
> (){jQuery(this).css('display','none')});
>         });
>
>   </script>
>   <script type="text/javascript">
>     $(document).ready(function() {
>
>       $().UItoTop({ easingType: 'easeOutQuart' });
>
>     });
>   </script>
>
> </body>
> </html>
>
>
> 
///////////////////////////////////////////////////////////////////////////////////////////////////
>
> Scripts file loads well, except that this part of script doesn't executes
> ( i hope)
> jQuery("#textfade .row").preloader();    }
>     jQuery('.spinner').animate({'opacity':0},1000,'easeOutCubic',function
> (){jQuery(this).css('display','none')});
>
> which is responsible for loading jquery.preloader() and creating a <div
> class="preloader"></div> element below <body> in the same index.html file.
>
> I don't know why its not executing or able to create that .
>
> Code for preloader.js is here: http://pastebin.com/qDheQSNC
>
> Please suggest or help.
>



-- 
Best regards,
Shiv Shankar Dayal

Re: [flask] unable to properly embed and execute jQuery into flask app template

From:
Uday Choudhary
Date:
2013-07-21 @ 09:13
Hello Shiv,
I earlier tried /static instead of ../static but no effect.

Any other suggestions.

Regards


On Sun, Jul 21, 2013 at 2:26 PM, Shiv Shankar Dayal <
shivshankar.dayal@gmail.com> wrote:

> You do not write ../static for inclusion of css and js but /static. The
> convention of flask picks that up automatically.
>
>
> On Sun, Jul 21, 2013 at 2:22 PM, Uday Choudhary <mobulite@gmail.com>wrote:
>
>> Hi...
>>
>> I have a basic html template with jQuery which has a initial loader which
>> would show till the page loads fully.
>> It works well in the basic .html templates. The jQuery is as:
>>
>> /////////////////////////////////////////////////////////////////////////////
>> <script src="../static/js/jquery.colorbox-min.js"></script>
>> <script src="../static/js/custom.js"></script>
>> <script src="../static/js/jquery.ui.totop.min.js"></script>
>> <script
>> type="text/javascript">if($(window).width()>1024){document.write("<"+"script
>> src='../static/js/jquery.preloader.js'></"+"script>");}  </script>
>> <script>
>>      jQuery(window).load(function() {
>>      $x = $(window).width();
>>   if($x > 1024)
>>   {
>>   jQuery("#textfade .row").preloader();    }
>>     jQuery('.spinner').animate({'opacity':0},1000,'easeOutCubic',function
>> (){jQuery(this).css('display','none')});
>>         });
>>
>>   </script>
>>   <script type="text/javascript">
>>     $(document).ready(function() {
>>
>>       $().UItoTop({ easingType: 'easeOutQuart' });
>>
>>     });
>>   </script>
>>
>> </body>
>> </html>
>>
>> 
///////////////////////////////////////////////////////////////////////////////////////////
>>
>> The jquery.preloader.js loads and then next script is executed which
>> creates a <div class="preloader"></div> for the loader.gif to appear.
>>
>> ......................
>>
>> I need to use same functioning into my flask app which has following
>> directory strucutre
>> /static
>> ...../css
>> ...../js
>> ...../img
>> /templates
>> ......index.html
>>
>> so changed the code in *templates/index.html* for flask app into:
>>
>>
>> 
///////////////////////////////////////////////////////////////////////////////////////////////////
>>
>> <script src="{{ static('js/custom.js') }}"></script>
>> <script src="{{ static('js/jquery.ui.totop.min.js') }}"></script>
>> <script
>> type="text/javascript">if($(window).width()>1024){document.write("<"+"script
>> src='/static/js/jquery.preloader.js'></"+"script>");}  </script>
>>
>> <script type="text/javascript">
>>      jQuery(window).load(function() {
>>      $x = $(window).width();
>>   if($x > 1024)
>>   {
>>   jQuery("#textfade .row").preloader();    }
>>     jQuery('.spinner').animate({'opacity':0},1000,'easeOutCubic',function
>> (){jQuery(this).css('display','none')});
>>         });
>>
>>   </script>
>>   <script type="text/javascript">
>>     $(document).ready(function() {
>>
>>       $().UItoTop({ easingType: 'easeOutQuart' });
>>
>>     });
>>   </script>
>>
>> </body>
>> </html>
>>
>>
>> 
///////////////////////////////////////////////////////////////////////////////////////////////////
>>
>> Scripts file loads well, except that this part of script doesn't executes
>> ( i hope)
>> jQuery("#textfade .row").preloader();    }
>>     jQuery('.spinner').animate({'opacity':0},1000,'easeOutCubic',function
>> (){jQuery(this).css('display','none')});
>>
>> which is responsible for loading jquery.preloader() and creating a <div
>> class="preloader"></div> element below <body> in the same index.html file.
>>
>> I don't know why its not executing or able to create that .
>>
>> Code for preloader.js is here: http://pastebin.com/qDheQSNC
>>
>> Please suggest or help.
>>
>
>
>
> --
> Best regards,
> Shiv Shankar Dayal
>

Re: [flask] unable to properly embed and execute jQuery into flask app template

From:
Shiv Shankar Dayal
Date:
2013-07-21 @ 09:57
Can you please paste output of tree command in your root directory if it is
not big.


On Sun, Jul 21, 2013 at 2:43 PM, Uday Choudhary <mobulite@gmail.com> wrote:

> Hello Shiv,
> I earlier tried /static instead of ../static but no effect.
>
> Any other suggestions.
>
> Regards
>
>
> On Sun, Jul 21, 2013 at 2:26 PM, Shiv Shankar Dayal <
> shivshankar.dayal@gmail.com> wrote:
>
>> You do not write ../static for inclusion of css and js but /static. The
>> convention of flask picks that up automatically.
>>
>>
>> On Sun, Jul 21, 2013 at 2:22 PM, Uday Choudhary <mobulite@gmail.com>wrote:
>>
>>> Hi...
>>>
>>> I have a basic html template with jQuery which has a initial loader
>>> which would show till the page loads fully.
>>> It works well in the basic .html templates. The jQuery is as:
>>>
>>> /////////////////////////////////////////////////////////////////////////////
>>> <script src="../static/js/jquery.colorbox-min.js"></script>
>>> <script src="../static/js/custom.js"></script>
>>> <script src="../static/js/jquery.ui.totop.min.js"></script>
>>> <script
>>> type="text/javascript">if($(window).width()>1024){document.write("<"+"script
>>> src='../static/js/jquery.preloader.js'></"+"script>");}  </script>
>>> <script>
>>>      jQuery(window).load(function() {
>>>      $x = $(window).width();
>>>   if($x > 1024)
>>>   {
>>>   jQuery("#textfade .row").preloader();    }
>>>
>>> jQuery('.spinner').animate({'opacity':0},1000,'easeOutCubic',function
>>> (){jQuery(this).css('display','none')});
>>>         });
>>>
>>>   </script>
>>>   <script type="text/javascript">
>>>     $(document).ready(function() {
>>>
>>>       $().UItoTop({ easingType: 'easeOutQuart' });
>>>
>>>     });
>>>   </script>
>>>
>>> </body>
>>> </html>
>>>
>>> 
///////////////////////////////////////////////////////////////////////////////////////////
>>>
>>> The jquery.preloader.js loads and then next script is executed which
>>> creates a <div class="preloader"></div> for the loader.gif to appear.
>>>
>>> ......................
>>>
>>> I need to use same functioning into my flask app which has following
>>> directory strucutre
>>> /static
>>> ...../css
>>> ...../js
>>> ...../img
>>> /templates
>>> ......index.html
>>>
>>> so changed the code in *templates/index.html* for flask app into:
>>>
>>>
>>> 
///////////////////////////////////////////////////////////////////////////////////////////////////
>>>
>>> <script src="{{ static('js/custom.js') }}"></script>
>>> <script src="{{ static('js/jquery.ui.totop.min.js') }}"></script>
>>> <script
>>> type="text/javascript">if($(window).width()>1024){document.write("<"+"script
>>> src='/static/js/jquery.preloader.js'></"+"script>");}  </script>
>>>
>>> <script type="text/javascript">
>>>      jQuery(window).load(function() {
>>>      $x = $(window).width();
>>>   if($x > 1024)
>>>   {
>>>   jQuery("#textfade .row").preloader();    }
>>>
>>> jQuery('.spinner').animate({'opacity':0},1000,'easeOutCubic',function
>>> (){jQuery(this).css('display','none')});
>>>         });
>>>
>>>   </script>
>>>   <script type="text/javascript">
>>>     $(document).ready(function() {
>>>
>>>       $().UItoTop({ easingType: 'easeOutQuart' });
>>>
>>>     });
>>>   </script>
>>>
>>> </body>
>>> </html>
>>>
>>>
>>> 
///////////////////////////////////////////////////////////////////////////////////////////////////
>>>
>>> Scripts file loads well, except that this part of script doesn't
>>> executes ( i hope)
>>> jQuery("#textfade .row").preloader();    }
>>>
>>> jQuery('.spinner').animate({'opacity':0},1000,'easeOutCubic',function
>>> (){jQuery(this).css('display','none')});
>>>
>>> which is responsible for loading jquery.preloader() and creating a <div
>>> class="preloader"></div> element below <body> in the same index.html file.
>>>
>>> I don't know why its not executing or able to create that .
>>>
>>> Code for preloader.js is here: http://pastebin.com/qDheQSNC
>>>
>>> Please suggest or help.
>>>
>>
>>
>>
>> --
>> Best regards,
>> Shiv Shankar Dayal
>>
>
>


-- 
Best regards,
Shiv Shankar Dayal

Re: [flask] unable to properly embed and execute jQuery into flask app template

From:
Shiv Shankar Dayal
Date:
2013-07-21 @ 09:59
Also, I do not see main jQuery being loaded. Is it somewhere else?
Typically you put that in a base template.


On Sun, Jul 21, 2013 at 3:27 PM, Shiv Shankar Dayal <
shivshankar.dayal@gmail.com> wrote:

> Can you please paste output of tree command in your root directory if it
> is not big.
>
>
> On Sun, Jul 21, 2013 at 2:43 PM, Uday Choudhary <mobulite@gmail.com>wrote:
>
>> Hello Shiv,
>> I earlier tried /static instead of ../static but no effect.
>>
>> Any other suggestions.
>>
>> Regards
>>
>>
>> On Sun, Jul 21, 2013 at 2:26 PM, Shiv Shankar Dayal <
>> shivshankar.dayal@gmail.com> wrote:
>>
>>> You do not write ../static for inclusion of css and js but /static. The
>>> convention of flask picks that up automatically.
>>>
>>>
>>> On Sun, Jul 21, 2013 at 2:22 PM, Uday Choudhary <mobulite@gmail.com>wrote:
>>>
>>>> Hi...
>>>>
>>>> I have a basic html template with jQuery which has a initial loader
>>>> which would show till the page loads fully.
>>>> It works well in the basic .html templates. The jQuery is as:
>>>>
>>>> /////////////////////////////////////////////////////////////////////////////
>>>> <script src="../static/js/jquery.colorbox-min.js"></script>
>>>> <script src="../static/js/custom.js"></script>
>>>> <script src="../static/js/jquery.ui.totop.min.js"></script>
>>>> <script
>>>> type="text/javascript">if($(window).width()>1024){document.write("<"+"script
>>>> src='../static/js/jquery.preloader.js'></"+"script>");}  </script>
>>>> <script>
>>>>      jQuery(window).load(function() {
>>>>      $x = $(window).width();
>>>>   if($x > 1024)
>>>>   {
>>>>   jQuery("#textfade .row").preloader();    }
>>>>
>>>> jQuery('.spinner').animate({'opacity':0},1000,'easeOutCubic',function
>>>> (){jQuery(this).css('display','none')});
>>>>         });
>>>>
>>>>   </script>
>>>>   <script type="text/javascript">
>>>>     $(document).ready(function() {
>>>>
>>>>       $().UItoTop({ easingType: 'easeOutQuart' });
>>>>
>>>>     });
>>>>   </script>
>>>>
>>>> </body>
>>>> </html>
>>>>
>>>> 
///////////////////////////////////////////////////////////////////////////////////////////
>>>>
>>>> The jquery.preloader.js loads and then next script is executed which
>>>> creates a <div class="preloader"></div> for the loader.gif to appear.
>>>>
>>>> ......................
>>>>
>>>> I need to use same functioning into my flask app which has following
>>>> directory strucutre
>>>> /static
>>>> ...../css
>>>> ...../js
>>>> ...../img
>>>> /templates
>>>> ......index.html
>>>>
>>>> so changed the code in *templates/index.html* for flask app into:
>>>>
>>>>
>>>> 
///////////////////////////////////////////////////////////////////////////////////////////////////
>>>>
>>>> <script src="{{ static('js/custom.js') }}"></script>
>>>> <script src="{{ static('js/jquery.ui.totop.min.js') }}"></script>
>>>> <script
>>>> type="text/javascript">if($(window).width()>1024){document.write("<"+"script
>>>> src='/static/js/jquery.preloader.js'></"+"script>");}  </script>
>>>>
>>>> <script type="text/javascript">
>>>>      jQuery(window).load(function() {
>>>>      $x = $(window).width();
>>>>   if($x > 1024)
>>>>   {
>>>>   jQuery("#textfade .row").preloader();    }
>>>>
>>>> jQuery('.spinner').animate({'opacity':0},1000,'easeOutCubic',function
>>>> (){jQuery(this).css('display','none')});
>>>>         });
>>>>
>>>>   </script>
>>>>   <script type="text/javascript">
>>>>     $(document).ready(function() {
>>>>
>>>>       $().UItoTop({ easingType: 'easeOutQuart' });
>>>>
>>>>     });
>>>>   </script>
>>>>
>>>> </body>
>>>> </html>
>>>>
>>>>
>>>> 
///////////////////////////////////////////////////////////////////////////////////////////////////
>>>>
>>>> Scripts file loads well, except that this part of script doesn't
>>>> executes ( i hope)
>>>> jQuery("#textfade .row").preloader();    }
>>>>
>>>> jQuery('.spinner').animate({'opacity':0},1000,'easeOutCubic',function
>>>> (){jQuery(this).css('display','none')});
>>>>
>>>> which is responsible for loading jquery.preloader() and creating a <div
>>>> class="preloader"></div> element below <body> in the same index.html file.
>>>>
>>>> I don't know why its not executing or able to create that .
>>>>
>>>> Code for preloader.js is here: http://pastebin.com/qDheQSNC
>>>>
>>>> Please suggest or help.
>>>>
>>>
>>>
>>>
>>> --
>>> Best regards,
>>> Shiv Shankar Dayal
>>>
>>
>>
>
>
> --
> Best regards,
> Shiv Shankar Dayal
>



-- 
Best regards,
Shiv Shankar Dayal