Page 1 of 1

JQuery won't work until I refresh the webpage

PostPosted: Tue Feb 17, 2015 5:50 am
by maria.kyselova
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>

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

PostPosted: Tue Feb 17, 2015 10:53 am
by poyel
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

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

PostPosted: Tue Feb 17, 2015 12:07 pm
by jcompagner
besides that, servoy already includes a jquery (for example also for masking) so having 2 of them could be quiet tricky

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

PostPosted: Thu Feb 19, 2015 10:32 am
by juan.cristobo
How can I avoid this (including 2 jquery libs)?

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

PostPosted: Thu Feb 19, 2015 6:39 pm
by jcompagner
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

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

PostPosted: Thu Feb 19, 2015 6:59 pm
by juan.cristobo
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: )

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

PostPosted: Tue Mar 03, 2015 8:08 am
by maria.kyselova
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?

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

PostPosted: Tue Mar 03, 2015 10:26 pm
by david
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.

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

PostPosted: Wed Mar 04, 2015 1:32 am
by maria.kyselova
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 :)