在Ajax中打开一个Popup

时间:2015-07-31 09:37:39

标签: javascript jquery ajax popup

您好我有一个登录按钮,之后如果登录顺利,我必须关闭登录弹出窗口并打开另一个。这是我的代码:

<div data-role="popup" id="login" class="popupCenter" data-theme="a">
    <ul data-role="listview" data-inset="true" style="min-width:300px;" data-theme="a">
        <li data-role="divider" data-theme="b">Login</li>
        <li>
            <label for="user">User:</label>
            <input type="text" name="User" id="user" data-mini="true" class="myClass" />
        </li>
        <li>
            <label for="password">Password:</label>
            <input type="password" name="Password" id="password" data-mini="true" class="myClass" />
        </li>
    </ul>
    <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-icon-delete ui-btn-icon-notext ui-btn-right" />
    <p id="labelError" style="visibility: hidden; color: red">Username o Password errati</p>
    <a id="loginBtn" data-role="button" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-btn-icon-left ui-icon-check" data-theme="b">Login</a>
</div>

<div data-role="popup" id="infoParticelle" class="popupCenter" data-theme="a">
    <ul data-role="listview" data-inset="true" style="min-width:300px;" data-theme="a">
        <li data-role="divider" data-theme="b">Info particelle</li>
    </ul>
    <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-icon-delete ui-btn-icon-notext ui-btn-right" />
</div>


$('#loginBtn').click(function () {
    var user = $('#user').val();
    var password = $('#password').val();

    $.ajax({
        url: "api/login",
        dataType: "json",
        async: false,
        data: {
            dir: "tokens",
            usr: user,
            pswd: password
        },
        success: function (data) {
            token = data;
            if (token == null) {
                document.getElementById("labelError").style.visibility = "visible";
            }
            else {
                console.log('Token: ' + data);
                $('#login').popup('close');
                $('#infoParticelle').popup('open');
            }
        }
    });
});

我的所有$('#infoParticelle').popup('open')都不起作用,但在点击按钮之外它可以正常工作。有趣的是,关闭弹出窗口$('#login').popup('close')有效..谢谢

1 个答案:

答案 0 :(得分:0)

当我尝试你的代码时,我得到一个错误,说popup()不是一个函数。 所以我去了jquery ui文档并发现要创建弹出窗口,你必须使用.dialog方法:https://jqueryui.com/dialog/#default。例如:

$("#infoParticelle").dialog();

这是一个工作小提琴http://jsfiddle.net/W4Km8/5764/ 你只需要再次进行ajax调用,事情就可以了。