JQM嵌套彈出框

我很難與JQM的新Alpha版本不顯示嵌套彈出窗口。例如，我顯示一個用戶應該填寫的彈出窗體，如果服務器端驗證失敗，我想顯示一個錯誤彈出窗口。我發現沒有顯示錯誤彈出窗口。我懷疑它顯示在原始彈出窗口下方。JQM嵌套彈出框

function bindSongWriterInvite() { 

    // Bind the click event of the invite button 
    $("#invite-songwriter").click(function() { 
     $("#songwriter-invite-popup").popup("open"); 
    }); 

    // Bind the invitation click event of the invite modal 
    $("#songwriter-invite-invite").click(function() { 
     if ($('#songwriter-invite').valid()) { 
      $('#songwriter-invite-popup').popup('close'); 
      $.ajax({ 
       type: 'POST', 
       async: true, 
       url: '/songwriter/jsoncreate', 
       data: $('#songwriter-invite').serialize() + "&songName=" + $("#Song_Title").val(), 
       success: function (response) { 
        if (response.state != "success") { 
         alert("Should be showing error dialog"); 
         mobileBindErrorDialog(response.message); 
        } 
        else { 
         mobileBindErrorDialog("Success!"); 
        } 
       }, 
       failure: function() { 
        mobileBindErrorDialog("Failure!"); 
       }, 
       dataType: 'json' 
      }); 
     } 
    }); 

    // Bind the cancel click event of the invite modal 
    $("#songwriter-invite-cancel").click(function() { 
     $("#songwriter-invite-popup").popup("close"); 
    }); 
} 

function mobileBindErrorDialog(errorMessage) { 
    // Close all open popups. This is a work around as the JQM Alpha does not 
    // open new popups in front of all other popups. 
    var error = $("<div></div>").append("<p>" + errorMessage + "</p>") 
           .popup(); 
    $(error).popup("open"); 
}

所以，你可以看到，我試圖顯示錯誤對話框不管AJAX職位是成功還是失敗。它從來沒有出現。

任何人有任何想法？

邁克

來源

2012-09-03 mcottingham

有趣的是，我試圖添加一個JavaScript警報到匿名div，這是我的錯誤對話框和顯示的警報。只是沒有顯示對話框。 – mcottingham

你不能嵌套彈出窗口嗎？查看[jQuery手冊頁的彈出窗口]的底部（http://jquerymobile.com/demos/1.2.0-alpha.1/docs/pages/popup/）。 – Jeemusu

好的。但是，我不能關閉打開的彈出窗口並顯示一個新窗口嗎？ – mcottingham

我找到了解決辦法！

我在bindErrorPopup函數上設置了一個延遲，等待彈出關閉動畫完成。

function mobileBindErrorDialog(errorMessage, delay) { 
    var error = $("<div></div>").attr({ 
     'data-rel': "popup", 
     'data-theme': "a" 
    }); 

    $(error).append("<p>" + errorMessage + "</p>") 
      .popup({ 
       overlayTheme: "a", 
       positionTo: "window", 
       theme: "a" 
      }); 

    setTimeout(function() { 
     $(error).popup("open"); 
    }, delay); 
}

Works awesome！

來源

2012-09-03 23:57:20 mcottingham

JQM嵌套彈出框

回答

相關問題