Javascript working only on page refresh in jQuery mobile

Question

I am currently working with jquery mobile with JSP along with Struts. The problem is the javascript function gets called only after the page is refreshed once. The script is placed within the data-role 'page'. But the problem still persists. Currently am using jQuery 1.0 stable version. 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 once the page is refreshed. I do not want to reload the page once it has already been loaded. Please help.

Which javascript function are you referring to? I see many. How is a function getting fired without any event trigger? — Lowkase, Aug 22 '12 at 13:41
@Lokase:The mobile number validation is being called on submit, checkcount and goodchars on keypress of textarea. The getTemplate() is for populating the drop down onload. When any option is chosen the onchange event is called to fill the textarea with the value of the dropdown. — Silver, Aug 23 '12 at 04:45

adamdehaven · Accepted Answer · 2012-08-23T15:18:02.107

2

You need to put all of your javascript in the head section AFTER you include jQuery, but BEFORE you call jQuery mobile.

Your head file should look similar to this (custom JS in 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

On the link to the page, add the attribute data-ajax="false". If you'd like to disable Ajax navigation site-wide, put the following code in 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

edited Aug 23 '12 at 15:18

answered Aug 22 '12 at 19:40

adamdehaven

5,890
10
61
84

:I tried it..Sadly din work here's the code I added in the head section. It calls the javscript function only on refresh.I happened to refer this link http://jquerymobile.com/test/docs/pages/page-scripting.html. It speaks of pages being loaded via Ajax. Currently am not using Ajax. How do I disable the ajax call for my page? – Silver Aug 23 '12 at 05:21
Updated my answer. Also, I'd recommend using jQuery mobile 1.1.1 – adamdehaven Aug 23 '12 at 15:18
Adam D : Thank you so much for ur answer. I figured out the problem. The function to fill the dropdown did not work as I had written forms[0]. I changed it to the forms name and had it sorted immediately. Moreover I did place the script in an external file and linked it from the head as well the div data role=page section. It works absolutely fine and saved me from a lot of problems as well.. ;) – Silver Aug 25 '12 at 06:18

score 0 · Answer 2 · answered Feb 16 '14 at 08:10

0

For me worked put data-ajax="false" on all the links to the page that contains the script.

answered Feb 16 '14 at 08:10

ste.cape

45
11

Javascript working only on page refresh in jQuery mobile

2 Answers2

Linked