JQuery won't work until I refresh the webpage

Questions and answers on developing, deploying and using plugins and JavaBeans

JQuery won't work until I refresh the webpage

Postby maria.kyselova » Tue Feb 17, 2015 5:50 am

Hi All,

I've got a html area on my Servoy form (webclient solution) with the dataprovider set to the following string of code.
I expect the text field to be displayed on the page having a mask 'dd/mm/yyyy'.
Instead, the mask '99/99/9999' is displayed in the field and I cannot type in it.

If I hit F5 to refresh the page, the mask turns on and acts properly.

Is there a way to make it work from the first go?

Original html code:

Code: Select all
'<html>
          <head>\
      <script src="http://twitter.github.io/typeahead.js/js/jquery-1.10.2.min.js"></script>\
      <script type="text/javascript" src="http://digitalbush.com/wp-content/uploads/2014/10/jquery.maskedinput.js"></script>\
      <script type="text/javascript" src=\'http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js\'></script>\
       <script>\
             jQuery(function($){\
               $("#date").mask("99/99/9999",{placeholder:"dd/mm/yyyy"});\
         });\
       </script>\
   </head>\
   <body>\
   <input id="date" tabindex="1" type="text">\
   </body>\
   </html>'


Below is the source of the page after the form is shown. The extract below is the same before and after refreshing the page, so not sure what else influences it.

Code: Select all
<script type="text/javascript" src="http://twitter.github.io/typeahead.js/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://digitalbush.com/wp-content/uploads/2014/10/jquery.maskedinput.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" id="js_id5632419924"><!--/*--><![CDATA[/*><!--*/
             jQuery(function($){               $("#date").mask("99/99/9999",{placeholder:"dd/mm/yyyy"});         });      
/*-->]]>*/</script>
Cheers,
Maria
maria.kyselova
 
Posts: 172
Joined: Thu Aug 09, 2012 12:56 am

Re: JQuery won't work until I refresh the webpage

Postby poyel » Tue Feb 17, 2015 10:53 am

Hi,
you can try to put libraries in the root directory of the webserver and link it direclty from there insted of from the url.
I think that servoy doesn't load the library because the page is ready on the application server and when is pushed on client the browser not ask for the libraries.
You have to put libraries under
Code: Select all
application_server\server\webapps\ROOT\servoy-webclient


and in the dataprovider you can write
Code: Select all
...
<script src="jquery-1.10.2.min.js"></script>
...

Bye bye
Marco Alessio Milazzo
- freelance programmer -
Web Developer
Servoy
poyel
 
Posts: 49
Joined: Wed Aug 31, 2011 4:35 pm

Re: JQuery won't work until I refresh the webpage

Postby jcompagner » Tue Feb 17, 2015 12:07 pm

besides that, servoy already includes a jquery (for example also for masking) so having 2 of them could be quiet tricky
Johan Compagner
Servoy
User avatar
jcompagner
 
Posts: 8849
Joined: Tue May 27, 2003 7:26 pm
Location: The Internet

Re: JQuery won't work until I refresh the webpage

Postby juan.cristobo » Thu Feb 19, 2015 10:32 am

How can I avoid this (including 2 jquery libs)?
Juan
Madrid (Spain)

Servoy 7.4.x - MySQL / SQL Server 2008-2016
Windows 10 Pro
juan.cristobo
 
Posts: 186
Joined: Thu Apr 19, 2012 9:12 am

Re: JQuery won't work until I refresh the webpage

Postby jcompagner » Thu Feb 19, 2015 6:39 pm

the thing is what you seem to include is already everything that is provided by servoy
For example of you would give the form a textfield with a mask we already include also the jquery.maskedinput as far as i know

so i would say just don't include it..

But it could be a problem that some or all of the js are not really there yet until you add the textfield with mask

Maybe webclient utils plugin can help you a bit, that one has pointers to our libs
Johan Compagner
Servoy
User avatar
jcompagner
 
Posts: 8849
Joined: Tue May 27, 2003 7:26 pm
Location: The Internet

Re: JQuery won't work until I refresh the webpage

Postby juan.cristobo » Thu Feb 19, 2015 6:59 pm

Web Client Utils has a constant (SERVOY_WEB_RESOURCES.JQUERY), to include Servoy lib, but Developer marks it as deprecated (I create this issue in Servoy Forge, with no replies :cry: :cry: )
Juan
Madrid (Spain)

Servoy 7.4.x - MySQL / SQL Server 2008-2016
Windows 10 Pro
juan.cristobo
 
Posts: 186
Joined: Thu Apr 19, 2012 9:12 am

Re: JQuery won't work until I refresh the webpage

Postby maria.kyselova » Tue Mar 03, 2015 8:08 am

poyel wrote:Hi,
you can try to put libraries in the root directory of the webserver and link it direclty from there insted of from the url.
I think that servoy doesn't load the library because the page is ready on the application server and when is pushed on client the browser not ask for the libraries.
You have to put libraries under
Code: Select all
application_server\server\webapps\ROOT\servoy-webclient


and in the dataprovider you can write
Code: Select all
...
<script src="jquery-1.10.2.min.js"></script>
...

Bye bye


All right, I moved the libs to the application server and replaced the source links like you advised.
I tried to exclude all sources to avoid double inclusion, thus only one reference was left to jquery.maskedinput.js (doesn't work without it at all).
Still, the same problem is there.

If I call location.reload() via the WebClientUtils, then my page is loaded fine and the mask works, however it flickers while reloading, so it's not really an acceptable solution.

Any other ideas?
Cheers,
Maria
maria.kyselova
 
Posts: 172
Joined: Thu Aug 09, 2012 12:56 am

Re: JQuery won't work until I refresh the webpage

Postby david » Tue Mar 03, 2015 10:26 pm

If the resources are included, a separate call like this will work (form onShow event probably):

Code: Select all
plugins.WebClientUtils.executeClientSideJS('jQuery(function($){ $("#date").mask("99/99/9999",{placeholder:"dd/mm/yyyy"}); })')


If you wrap this in a function in the html:

Code: Select all
'<html>\
    <head>\
      <script src="http://twitter.github.io/typeahead.js/js/jquery-1.10.2.min.js"></script>\
      <script type="text/javascript" src="http://digitalbush.com/wp-content/uploads/2014/10/jquery.maskedinput.js"></script>\
      <script type="text/javascript" src=\'http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js\'></script>\
       <script>\
        function maskApply() {\
             jQuery(function($){\
               $("#date").mask("99/99/9999",{placeholder:"dd/mm/yyyy"});\
            });\
         }\
       </script>\
   </head>\
   <body>\
   <input id="date" tabindex="1" type="text">\
   </body>\
   </html>'


This this is how you trigger the client-side function:

Code: Select all
plugins.WebClientUtils.executeClientSideJS('maskApply()')


You don't need to include jquery as Servoy already has it. Just need the jquery UI and masked input resources.
David Workman, Kabootit

Image
Everything you need to build great apps with Servoy
User avatar
david
 
Posts: 1727
Joined: Thu Apr 24, 2003 4:18 pm
Location: Washington, D.C.

Re: JQuery won't work until I refresh the webpage

Postby maria.kyselova » Wed Mar 04, 2015 1:32 am

david wrote:If the resources are included, a separate call like this will work (form onShow event probably):

Code: Select all
plugins.WebClientUtils.executeClientSideJS('jQuery(function($){ $("#date").mask("99/99/9999",{placeholder:"dd/mm/yyyy"}); })')


If you wrap this in a function in the html:

Code: Select all
'<html>\
    <head>\
      <script src="http://twitter.github.io/typeahead.js/js/jquery-1.10.2.min.js"></script>\
      <script type="text/javascript" src="http://digitalbush.com/wp-content/uploads/2014/10/jquery.maskedinput.js"></script>\
      <script type="text/javascript" src=\'http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js\'></script>\
       <script>\
        function maskApply() {\
             jQuery(function($){\
               $("#date").mask("99/99/9999",{placeholder:"dd/mm/yyyy"});\
            });\
         }\
       </script>\
   </head>\
   <body>\
   <input id="date" tabindex="1" type="text">\
   </body>\
   </html>'


This this is how you trigger the client-side function:

Code: Select all
plugins.WebClientUtils.executeClientSideJS('maskApply()')


You are a magician.
Thanks mate, the above is just slightly different from what I had but it made everything work like a charm. Phew, one down :)
Cheers,
Maria
maria.kyselova
 
Posts: 172
Joined: Thu Aug 09, 2012 12:56 am


Return to Plugins and Beans

Who is online

Users browsing this forum: No registered users and 13 guests