All geek questions in one place

Javascript only works on page refresh in jQuery mobile

I am currently working with jQuery mobile with JSP along with Struts. The problem is that the javascript function is called only after the page is refreshed once. The script is placed in the data role page. But the problem still persists. I am currently using the stable version of jQuery 1.0. Here is my code ..

<body> <div data-role="page" id="webtosms"> <script language="javascript"> function phonenumlen(){ //Mobile no validation var numlen = mobileno.value.length; //alert(numlen); if(numlen==0){ alert('Mobile Number cannot be left blank'); return false; } else if(numlen<10) { alert('Mobile number cannot be less than 10 digits'); return false; } else { //alert('true'); return true; } } function goodchars(e,goods){ // restrict users from entering letters in the mobile number textbox var key, keychar; key = getkey(e); if (key == null) return true; // get character keychar = String.fromCharCode(key); keychar = keychar.toLowerCase(); goods = goods.toLowerCase(); // check goodkeys if (goods.indexOf(keychar) != -1) return true; // control keys if ( key==null || key==0 || key==8 || key==9 || key==13 || key==27 ) return true; return false; } function getkey(e) { if (window.event) return window.event.keyCode; else if (e) return e.which; else return null; } langId = 'EN'; messageLen = 299; message = ""; function checkCount() { //alert('function called'); if(document.webtosms.message.value.length <= messageLen) { message = document.webtosms.message.value; document.webtosms.charcount.value = (messageLen - document.webtosms.message.value.length); }else { document.webtosms.message.value = message; } } function getTemplate(){ // code to populate the drop down and display in the textarea var where_is_mytool=document.forms[0].cboTemplate.value; var mytool_array=where_is_mytool.split("~"); //alert(where_is_mytool); alert(mytool_array); window.document.forms[0].smsa.value=mytool_array[0]; window.document.forms[0].tmplid1.value=mytool_array[1]; window.document.forms[0].title2.value=mytool_array[1]; window.document.forms[0].hidlang.value=mytool_array[2]; window.document.forms[0].hidcreatedbyval.value=mytool_array[5]; } </script> </div>

The above code works absolutely fine after refreshing the page. I do not want to reload the page as soon as it is already loaded. Please, help.

0
source share
2 answers

You need to put all your javascript in the section of the chapter AFTER you enable jQuery, but BEFORE calling jQuery mobile.

Your head file should look something like this (custom JS in the second file):

 <script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script> <script type="text/javascript" src="http://www.example.com/path-to-file/custom-javascript.js"></script> <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>

UPDATE

In the link to the page, add the attribute data-ajax="false" . If you want to disable Ajax navigation throughout the site, enter the following code into your custom JS file:

 $(document).bind("mobileinit", function(){ $.extend( $.mobile , { ajaxEnabled: false }); });

Here's a link to the docs: http://jquerymobile.com/demos/1.1.1/docs/api/globalconfig.html

+2
source

It worked for me to put data-ajax = "false" in all links to the page containing the script.

0
source

Source: https://habr.com/ru/post/1484143/

More articles:


All Articles