【问题标题】:how to display jquery page(inside a div) using javascript?如何使用 javascript 显示 jquery 页面(在 div 内)?
【发布时间】:2012-05-31 05:49:47
【问题描述】:

这是我的问题,我称之为这个方法,它的作用是

使用 jQuery 在服务器上发布一些数据,我想使用从服务器收到的结果显示页面

我的页面 index.html

<div data-role="page" id="login">
    // other page content
            <div id="divrightButton">

            <!-- calling loginSubmit which calls loginPostData-->   
            <a class="bluebutton" href="#" onclick="loginSubmit(); return false;">Login</a>

            </div>
        </form>
</div>

<!--main page-->
<div data-role="page" id="mainMenu">

     Main menu
</div>

这是一段来自 javascript 的代码,快速的 loginSubmit() 调用 loginPostData ,loginSubmit 创建一个 json 对象并将其传递给 loginPostData

function loginPostData(jsonRequest)
{
    $.post("http://localhost:8080/edserve/MobileServlet", 
            JSON.stringify( jsonRequest), 
            function(data) 
            {
                var obj = JSON.stringify(data);
                //var object = JSON.parse(json_text);
                //alert(obj);
                alert(obj);
                if(data.status=="success")
                {
                    //display main page
                    //$('#mainMenu').show(); <-- this does not give desired result
                }
                else
                {
                    if(data.message=="user not verified")
                    {
                        //display verification page
                    }   
                    if(data.message=="no user exist with this usname")
                    {
                        //set focus to username
                        $("#username").focus();
                    }   
                }   
        }, "json");
}

成功时如何显示主菜单,html的整个代码在不同div的单个文件中


使用此代码重定向/显示特定的 div 标签/元素

$.mobile.changePage("#mainMenu",{allowSamePageTransition: true });

还可以下载下面的css文件,它是页面/div元素之间转换的必要条件

jquery.mobile.transitions.css

【问题讨论】:

    标签: jquery jquery-ui jquery-mobile


    【解决方案1】:

    试试这个代码

     $.mobile.changePage( "#mainMenu", { allowSamePageTransition: true }); 
    

    并检查此链接

    http://jquerymobile.com/test/docs/api/methods.html

    【讨论】:

    • 我试过这个方法,效果很好,它指向我想要的地方,但我必须刷新它才能加载页面
    • 我听不懂你说什么。你能再解释一下吗?
    • 我说页面 url 改变了,成功后进入主菜单http://localhost:8080/edserve/mclient/index.html#mainMenu 但是,问题是什么都没有显示,它只是空白页面,只有当我刷新时才会显示内容跨度>
    • 非常感谢@stay_hungry 是 Firefox 的问题,您的解决方案在 Google Chrome 上运行良好,非常感谢 :)
    【解决方案2】:

    你可以试试这个http://api.jquery.com/load/的jquery加载函数

    【讨论】:

    • 我试过这个网站$('#result').load('index.html#mainMenu');的方法,效果很好,它指向我想要的地方,但我必须刷新它才能加载页面
    【解决方案3】:

    试试这个..

    function loginPostData(jsonRequest)
        {
            $.post("http://localhost:8080/edserve/MobileServlet", 
                    JSON.stringify( jsonRequest), 
                    function(data) 
                    {
                        var obj = JSON.stringify(data);
                        //var object = JSON.parse(json_text);
                        //alert(obj);
                        alert(obj);
                        if(data.status=="success")
                        {
                            $.mobile.changePage( "#mainMenu"); // main menu div id..
                        }
                        else
                        {
                            if(data.message=="user not verified")
                            {
                                //display verification page
                            }   
                            if(data.message=="no user exist with this usname")
                            {
                                //set focus to username
                                $("#username").focus();
                            }   
                        }   
                }, "json");
        }
    

    【讨论】:

    • 我试过这个方法,效果很好,它指向我想要的地方,但我必须刷新它才能加载页面
    • 试试这个.. window.location = 'filename#mainMenu';
    • 同样的事情我必须刷新页面,然后我才能看到页面内容
    猜你喜欢
    • 2013-10-09
    • 1970-01-01
    • 1970-01-01
    • 2013-11-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2010-10-14
    • 1970-01-01
    相关资源
    最近更新 更多