jquerymobile页面,其中ajax内容需要在Android浏览器上刷新

时间:2013-02-14 16:04:40

标签: android jquery jquery-mobile

以下是代码:

<!DOCTYPE html> 
<html> 
    <head> 
    <title>User2</title> 
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>        
        <script>

            $(document).ready(function() {                
                $.support.cors = true;
                //Uses Tasty Pie REST APIs
        $("#user2-adduser2").click(function() {data = JSON.stringify({"username":$("#user2-username").val() === ""? null:$("#user2-username").val(), "product":$("#user2-product").val() === "" || $("#user2-product").val() === "Option(s)"? null:$("#user2-product").val()})
               $.ajax({
               url: 'http://xxxxxxdomainxxxxx/api/v1/user2/?format=json',
        type: 'POST',
                           async: false,
                           contentType: 'application/json',
                           data: data,
                           dataType: 'json',
                           processData: false,
                           success: function(data){
                           alert("Done!")
                           //Goto Next Page

                      },

                      error: function(jqXHR, textStatus, errorThrown){
                          alert("Some Error!")
                          }
                     })
                });

            ////For Dynamically loading dropdown options
            $.ajax({
                type: 'GET',
                url: 'http://xxxxxxdomainxxxxx/api/v1/productapp/?format=json',            
                accepts: 'application/json',
                success: function(data){
                    var options = '<option>Option(s)</option>'
                    for(var i = 0; i < data.objects.length; ++i) {
                        var str =  '<option value="/api/v1/productapp/' + data.objects[i].id + '/">' + data.objects[i].productname + '</option>'
                        options=options+str
                    }
                    $('#user2-product').html(options).selectmenu("refresh");
                },
                dataType: "json"
                });
            });// end of document.ready function

        </script>
    </head>
    <body> 

    <div id="user2">
        <h1>User2</h1>
        <div id="user2-username-div">
            username:
            <input  type="text" id="user2-username">
        </div>
        <div id="user2-product-div">
            Product:
            <select  id="user2-product" data-native-menu="false"></select>
        </div>
        <a id="user2-adduser2" href="#" data-role="button">Add User2</a>      
    </div>

    </body>
</html>

单独的Android浏览器存在问题。 页面的所有静态内容都在加载。但是,在这种情况下,任何动态内容都不会加载来自服务器的下拉选项。如果您只刷新浏览器一次,一切正常。

今天几乎尝试了一切,但没有运气。任何建议/帮助都非常感谢。

1 个答案:

答案 0 :(得分:0)

OK!最后我解决了这个问题。

ajax http GET请求无效,因为它们默认是缓存的。因此,没有请求从移动浏览器发送到服务器。将cache=false放入$.ajax请求后,一切正常。唷!

事实上我有两个问题。 (1)未激活多页模板其他页面的链接 (2)Ajax内容未加载。

问题(1)在我使用data-ajax="false"时得到了解决。 问题(2),正如我在cache=false请求中添加$.ajax时所解释的那样。 希望有一天能帮助某人。感谢