动态JQuery手机弹出Ajax JSON [英] Dynamic JQuery mobile popup with Ajax JSON

问题描述

我有一个MVC 4手机网站。第一页有一个弹出窗口，需要通过AJAX请求显示来自控制器的大量文本。

在控制器中：

  [HttpPost] 
 public ActionResult GetLongText（）
 {
 return Json（OurState.GetLongText）; 
} 
  

哪些只会返回jsfiddle上的错误功能：
http://jsfiddle.net/TyhnV/28/

按钮的第一次点击将会弹出弹出窗口，第二次点击会使其正确地居中。
我需要知道如何动态地创建弹出窗口，以便按钮的第一次单击将获得弹出窗口的正确窗口位置，而不是由于放置文本的大小而错误放置。 p>

解决方案

这是一个关于如何动态创建弹出窗口的一点基础教程。

  //关闭按钮
 var closeBtn = $（'< a href =＃data-rel =backdata-role =button data-theme =adata-icon =deletedata-iconpos =notextclass =ui-btn-right>关闭< / a>'）。 
 
 //从Ajax获得的文本
 var content =< p> Lorem ipsum dolor sit amet，consectetur adipiscing。Morbi convallis sem et dui sollicitudin tincidunt。< / p> ; 
 
 //弹出窗体 - 设置宽度是可选的 - 附加按钮和Ajax msg 
 var popup = $（< div />，{
data-role ：popup
}）。css（{
width：150px
}）。append（closeBtn）.append（content） 
 
 //将其附加到活动页面
 $（。ui-page-active）。append（popup）; 
 
 //创建它并添加监听器，一旦关闭就删除
 //添加监听器以更改其位置，如果你想要
 $（[data-role = popup ]on（popupafterclose，function（）{
 $（this）.remove（）; 
}）。on（popupafteropen，function（）{
 $这个）.popup（重新定位，{
positionTo：window
 / *或设置自定义的位置* / 
x：150，
y：200 
 }）; 
 //加强弹出窗口并打开它
}）弹出（）弹出（打开）; 
  

您不需要使用 .trigger（create）因为每个单个元素都在增强。还有其他高级选项来操纵弹出窗口小部件。

  $（。selector）弹出（{
主题：a，
overlayTheme：e，
history：false，
可解除：false，
transition：fade 
}）; 
  

演示

I have an MVC 4 mobile website. The first page has a popup that needs to display a large amount of text coming from the controller via an AJAX request.

In the controller:

[HttpPost]
public ActionResult GetLongText()
{
    return Json(OurState.GetLongText);
}

Which will just return what is in the error function on the jsfiddle: http://jsfiddle.net/TyhnV/28/

The first click of the button will show the popup off to the side, the second click will properly center it to the window. I need to know how to create the popup dynamically so that the first click of the button will get the right window position for the popup, rather than misplacing it because of the size of the text being placed in it.

解决方案

Here is a little basic tutorial on how to create a popup dynamically on the fly.

// close button
var closeBtn = $('<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>').button();

// text you get from Ajax
var content = "<p>Lorem ipsum dolor sit amet, consectetur adipiscing. Morbi convallis sem et dui sollicitudin tincidunt.</p>";

// Popup body - set width is optional - append button and Ajax msg
var popup = $("<div/>", {
    "data-role": "popup"
}).css({
    "width": "150px"
}).append(closeBtn).append(content);

// Append it to active page
$(".ui-page-active").append(popup);

// Create it and add listener to delete it once it's closed
// add listener to change its' position if you want
$("[data-role=popup]").on("popupafterclose", function () {
    $(this).remove();
}).on("popupafteropen", function () {
    $(this).popup("reposition", {
        "positionTo": "window"
        /* or set custom position */
        x: 150,
        y: 200
    });
// enhance popup and open it
}).popup().popup("open");

You don't need to use .trigger("create") because every single element is enhanced ahead. There are other advanced options to manipulate popup widget.

$(".selector").popup({
    "theme" : "a",
    "overlayTheme" : "e",
    "history" : false,
    "dismissible" : false,
    "transition" : "fade"
});

Demo

这篇关于动态JQuery手机弹出Ajax JSON的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！