Javascript 仅适用于 jQuery mobile 中的页面刷新答案

【问题标题】：Javascript working only on page refresh in jQuery mobileJavascript 仅适用于 jQuery mobile 中的页面刷新
【发布时间】：2012-08-22 13:33:51
【问题描述】：

我目前正在使用带有 JSP 和 Struts 的 jquery mobile。问题是只有在页面刷新一次后才会调用 javascript 函数。该脚本放置在数据角色“页面”中。但问题仍然存在。目前正在使用 jQuery 1.0 稳定版。这是我的代码..

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

刷新页面后，上面的代码绝对可以正常工作。一旦页面已经加载，我不想重新加载它。请帮忙。

【问题讨论】：

你指的是哪个javascript函数？我看到很多。如何在没有任何事件触发器的情况下触发函数？
@Lokase：在 textarea 的按键上提交、检查计数和 goodchars 时会调用手机号码验证。 getTemplate() 用于填充下拉 onload。选择任何选项时，调用onchange事件以将textarea与下拉列表的值填充。 span>

标签： javascript jsp jquery-mobile

【解决方案1】：

在包含 jQuery 之后，但在调用 jQuery mobile 之前，您需要将所有 javascript 放在 head 部分。

你的头文件应该看起来像这样（第二个文件中的自定义 JS）：

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

更新

在页面链接上，添加属性data-ajax="false"。如果您想在站点范围内禁用 Ajax 导航，请将以下代码放入您的自定义 JS 文件中：

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

这是文档的链接：http://jquerymobile.com/demos/1.1.1/docs/api/globalconfig.html

【讨论】：

：我试过了。遗憾的是，这里是我在头部添加的代码。它只在刷新时调用 javscript 函数。我碰巧引用了这个链接jquerymobile.com/test/docs/pages/page-scripting.html。它谈到通过 Ajax 加载的页面。目前我没有使用 Ajax。如何禁用我的页面的 ajax 调用？
更新了我的答案。另外，我建议使用 jQuery mobile 1.1.1
Adam D：非常感谢您的回答。我解决了这个问题。填写下拉列表的功能不起作用，因为我已经编写了表单 [0]。我将其更改为表单名称并立即对其进行排序。此外，我确实将脚本放在了一个外部文件中，并从头部以及 div data role=page 部分链接了它。它工作得非常好，也让我免于很多问题.. ;)

【解决方案2】：

对我来说，将 data-ajax="false" 放在指向包含脚本的页面的所有链接上。

【讨论】：