JQuery won't work until I refresh the webpage

Classic Servoy
1

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:

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

<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[/*>]]>*/</script>
2

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

application_server\server\webapps\ROOT\servoy-webclient

and in the dataprovider you can write

...
 <script src="jquery-1.10.2.min.js"></script>
...

Bye bye

3

besides that, servoy already includes a jquery (for example also for masking) so having 2 of them could be quiet tricky

4

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

5

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

6

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: )

7

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

application_server\server\webapps\ROOT\servoy-webclient

and in the dataprovider you can write

...

…



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?

8

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

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

If you wrap this in a function in the html:

'<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:

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.

9

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

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

If you wrap this in a function in the html:

'<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>\
\ \ \ \ ' > ``` > > > > This this is how you trigger the client-side function: > > ``` > 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 :)