如何Ajax调用后刷新jQuery Mobile的列表视图 [英] How to Refresh Jquery Mobile Listview after Ajax Call

查看：81
本文介绍了如何Ajax调用后刷新jQuery Mobile的列表视图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的工作在jQuery Mobile的，我有刷新列表视图的问题后，阿贾克斯的内容已经被拉到一个div。

具体而言，阿贾克斯内容被拉到它位于一个可折叠的内容块中的列表视图。

这里是我的html： 

 ＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML＆GT;
＆LT; HEAD＆GT;
＆LT;元的charset =ISO-8859-1＆GT;
＆LT; META NAME =视口内容=WIDTH =装置宽度，初始规模= 1＆GT;
＆LT;标题＆gt;编辑套件与LT; /标题＆GT;
＆LT;链接相对=样式表的href =CSS / jquery.mobile-1.0rc2.css/＆GT;
＆LT;链接相对=样式表的href =主题/ Auer.css/＆GT;
＆LT;链接相对=样式表的href =CSS / custom.css/＆GT;
＆所述;脚本的src =的http：//$c$c.jquery.com/jquery-1.6.4.min.js＆GT;＆所述; /脚本＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =JS / custom.js＆GT;＆LT; / SCRIPT＆GT;
＆所述;脚本的src =的http：//$c$c.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js＆GT;＆所述; /脚本＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; D​​IV数据角色=页面ID =editkits级=类型的内部＆GT;
＆LT; D​​IV数据角色=头＆GT;
＆LT; H1＆gt;编辑套件与LT; / H1＆GT;
＆LT; A HREF =SPI_SearchLink数据图标=家级=UI-BTN-左＆GT;首页＆LT; / A＆GT;
＆LT;一个数据相对=后面的数据图标=后面的类=UI-BTN-权与GT;返回＆LT; / A＆GT;
＆LT; D​​IV CLASS =头子＆GT;
＆LT; D​​IV CLASS =UI酒吧中央的文字＆GT;＆LT; IMG SRC =图像/ logo.pngID =标志ALT =spi_Cname/＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; D​​IV数据角色=导航栏级=导航栏＆GT;
＆LT; UL＆GT;
＆LT;李＆GT;＆LT; A HREF =SPI_TOCLink数据主题=C＆GT; TOC＆LT; / A＆GT;＆LT; /李＆GT;

＆所述;！ -  SPI_HTML_ShowSearchMenu  - ＆GT;
＆LT;李＆GT;＆LT; A HREF =SPI_SearchLink数据主题=C＆GT;搜索＆LT; / A＆GT;＆LT; /李＆GT;
＆所述;！ -  SPI_HTML_ShowSearchMenu  - ＆GT;

＆所述;！ -  SPI_HTML_AllowKits  - ＆GT;
＆LT;李＆GT;＆LT; A HREF =SPI_KitsLink级=UI-BTN-活动的数据主题=C＆GT;套件及LT; / A＆GT;＆LT; /李＆GT;
＆所述;！ -  SPI_HTML_AllowKits  - ＆GT;

＆所述;！ -  SPI_HTML_AllowSales  - ＆GT;
＆LT;李＆GT;＆LT; A HREF =SPI_SalesLink数据主题=C＆GT; SPI_SalesMenuText＆LT; / A＆GT;＆LT; /李＆GT;
＆所述;！ -  SPI_HTML_AllowSales  - ＆GT;

＆所述;！ -  SPI_HTML_AllowOrderPlacement  - ＆GT;
＆LT;李＆GT;＆LT; A HREF =SPI_ShopingCartLink数据主题=C＆GT;车＆LT; / A＆GT;＆LT; /李＆GT;
＆所述;！ -  SPI_HTML_AllowOrderPlacement  - ＆GT;
＆LT; / UL＆GT;
＆LT; / DIV＆GT;＆LT;！ -  /导航栏 - ＆GT;
＆LT; / DIV＆GT;＆LT;！ -  /头 - ＆GT;

＆LT; D​​IV数据角色=内容＆GT;

＆所述;！ -  SPI_No_Kit_Message  - ＆GT;
＆LT; D​​IV CLASS =UI并网一个＆GT;
＆LT; D​​IV CLASS =UI栏UI吧-e中央文本＆GT;
＆LT; BR＆GT;
＆LT; H2＆GT;您没有保存套件与LT; / H＆GT;
＆LT; P＆gt;在创建一个包，将产品添加到您的购物
购物车，然后单击另存为工具包，在显示器底部的菜单上＆LT; / P＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆所述;！ -  SPI_No_Kit_Message  - ＆GT;

＆所述;！ -  SPI_HTML_HdrOnlyKit  - ＆GT;
＆LT; D​​IV数据角色=可折叠级=工具箱ID =SPI_KitId数据崩溃=真正的数据内容主题=D＆GT;
＆LT; H3＆GT; SPI_KitName SPI_KitNote＆LT; / H3＆GT;
＆LT; D​​IV CLASS =kitid＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆所述;！ -  SPI_HTML_HdrOnlyKit  - ＆GT;

＆所述;！ -  SPI_HTML_Kit  - ＆GT;
＆其中; H3＆GT;＆所述; A HREF =WebCatPageServer.exe AJAX＆安培;行动= Close_Kit＆安培; KitID = SPI_KitId＆GT; SPI_KitName SPI_KitNote＆所述; / a取代;＆所述; / H3＆GT;
＆LT;表格名称=SPI_KitFormName方法=邮报行动=WebCatPageServer.exe＆GT;
＆LT;输入名称=动作类型=隐藏值=Not_Set/＆GT;
＆LT;输入名称=IsAjax类型=隐藏值=是/＆GT;
＆LT;输入名称=KitId类型=隐藏值=SPI_KitId/＆GT;
＆LT;输入名称=搜索关键词类型=隐藏值=Not_Set/＆GT;
＆LT; UL数据角色=列表视图ID =清单数据插入=真正的数据分割图标=删除的数据分割主题=D＆GT;
＆所述;！ -  SPI_HTML_Kit_Product1  - ＆GT;
＆LT;李＆GT;＆LT;一href="javascript:document.ShoppingCart.Action.value='ItemLookup';document.ShoppingCart.SearchTerm.value='SPI_CartLookupPartNum';document.ShoppingCart.submit();">
＆所述;！ -  SPI_KitProdItemNum  - ＆GT;
＆LT; H2＆GT; SPI_KitProdPartNum＆LT; / H＆GT;
＆所述;！ -  SPI_KitProdItemNum  - ＆GT;
＆其中，P类=描述＆GT; SPI_KitProdDesc＆LT; / P＆GT;
＆LT; P＆GT;＆LT;输入类型=文本名称=SPI_KitOrdQtyFieldName的onblur =clickrecall（这一点，'0'）的tabindex =SPI_KitOrdQtyTabIndex值=SPI_KitProdQ​​ty onfocus="document.SPI_KitFormName.Action.value='Recalc_Kit';SPI_KitOrdQtyFieldName.select()"/></p>
＆LT; P＆GT;单价：SPI_KitProdPrice＆LT; / P＆GT;
＆LT; P＆GT;分机。价格：＆LT;跨度类=价格＆GT; SPI_KitProdExtPrice＆LT; / SPAN＆GT;＆LT; / P＆GT;
＆所述; / a取代;
＆LT;一href="javascript:document.SPI_KitFormName.SPI_KitOrdQtyFieldName.value='DEL';document.SPI_KitFormName.Action.value='Recalc_Kit';document.SPI_KitFormName.submit();">Delete</a>
＆LT; /李＆GT;
＆所述;！ -  SPI_HTML_Kit_Product1  - ＆GT;
＆所述;！ -  SPI_HTML_Kit_Product2  - ＆GT;
＆LT;李＆GT;＆LT;一href="javascript:document.ShoppingCart.Action.value='ItemLookup';document.ShoppingCart.SearchTerm.value='SPI_CartLookupPartNum';document.ShoppingCart.submit();">
＆所述;！ -  SPI_KitProdItemNum  - ＆GT;
＆LT; H2＆GT; SPI_KitProdPartNum＆LT; / H＆GT;
＆所述;！ -  SPI_KitProdItemNum  - ＆GT;
＆其中，P类=描述＆GT; SPI_KitProdDesc＆LT; / P＆GT;
＆LT; P＆GT;＆LT;输入类型=文本名称=SPI_KitOrdQtyFieldName的onblur =clickrecall（这一点，'0'）的tabindex =SPI_KitOrdQtyTabIndex值=SPI_KitProdQ​​ty onfocus="document.SPI_KitFormName.Action.value='Recalc_Kit';SPI_KitOrdQtyFieldName.select()"/></p>
＆LT; P＆GT;单价：SPI_KitProdPrice＆LT; / P＆GT;
＆LT; P＆GT;分机。价格：＆LT;跨度类=价格＆GT; SPI_KitProdExtPrice＆LT; / SPAN＆GT;＆LT; / P＆GT;
＆所述; / a取代;
＆LT;一href="javascript:document.SPI_KitFormName.SPI_KitOrdQtyFieldName.value='DEL';document.SPI_KitFormName.Action.value='Recalc_Kit';document.SPI_KitFormName.submit();">Delete</a>
＆LT; /李＆GT;
＆所述;！ -  SPI_HTML_Kit_Product2  - ＆GT;
＆LT; / UL＆GT;
＆LT; /形式GT;
＆所述;！ -  SPI_HTML_Kit  - ＆GT;

＆LT; / DIV＆GT;＆LT;！ -  /内容 - ＆GT;

＆LT; D​​IV数据角色=页脚ID =页脚数据位=固定＆GT;
＆LT; H4＆GT;＆安培;复印件;奥尔钢2011＆LT; / H4＆GT;
＆LT; / DIV＆GT;＆LT;！ -  /页脚 - ＆GT;


＆LT; / DIV＆GT;＆LT;！ -  /页 - ＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;

这是我的ajax调用： 

  $。ajaxSetup（{
缓存：假的
}）;
VAR ajax_load =＆LT; IMG SRC =图像/ load.gifALT =正在加载.../＆gt;中;
$（包）。点击（函数（）{
VAR kitid = this.id;
VAR使用loadURL =htt​​p://68.188.40.182/WebCat/WebCatPageServer.exe?AJAX&Action=Open_Kit&KitID=+ kitid;
$（kitid。）HTML（ajax_load）.load（使用loadURL）。
}）;

我也尝试了几个变化：$（＃列表）列表视图（刷新）。无济于事。

我读的地方，可能使用使用loadURL是问题。有任何想法吗？谢谢！

更新

OK，请用Avisek的code为起点，我能想出这个。这种运作良好，但它只是刷新第一个可折叠的内容框中的第一个列表视图。在随后的内容框随后的列表视图不会刷新。有任何想法吗？谢谢！

我用Avisek的出发点，并最终得到了该解决方案，似乎工作：

更新II 好吧，我似乎已经解决了这个。我增加了以下code后刷新code，以有效破坏页面的AJAX函数被调用每一个可折叠的元素，并随后创建的每个列表视图后：

 的jQuery（＃editkits）网页（消灭）网页（）。;

您可以看到完整的$ C $低于C：

  $（包）。点击（函数（）{
    $（kitid）空（）的HTML。（'＆LT; IMG SRC =图像/ load.gif/＆GT;'）;
    VAR kitid = this.id;
    VAR URL ='http://68.188.40.182/WebCat/WebCatPageServer.exe?AJAX&Action=Open_Kit&KitID='+ kitid;
    $阿贾克斯（{
         网址：网址，
         数据类型：HTML，
         缓存：假的，
         成功：ajaxCallDone，
         完成：函数（）{
          }，
          错误：函数（XMLHtt prequest，textStatus，errorThrown）{
          警报（错误类型：+ errorThrown +错误信息：+ XMLHtt prequest.responseXML +textStatus：+ textStatus）;
          }
        }）;
    函数ajaxCallDone（数据）
    {
      $（。kitid）的HTML（数据）。
      尝试 {
        $（'＃列表）列表视图（刷新）;
    }赶上（五）{
         $（'＃名单）的列表视图（）。
    }
  jQuery的（'＃editkits）网页（消灭）网页（）。;
    }
     }）;

解决方案

而不是jQuery的负荷;尝试AJAX

和对成功 - 填充HTML和放大器;上的进修执行刷新

有关例如 - 

  VAR URL ='your_url';
VAR dataString =行动= Open_Kit和放大器; KitID =+ kitid;

$阿贾克斯（{
        网址：网址，
        数据：dataString，
        成功：ajaxCallDone，
        完成：函数（）{
                 $（＃列表）列表视图（刷新）。
        }
        错误：函数（XMLHtt prequest，textStatus，errorThrown）{
            警报（错误类型：+ errorThrown +错误信息：+ XMLHtt prequest.responseXML +textStatus：+ textStatus）;
        }
    }）;



函数ajaxCallDone（数据）
{
  //填充HTML
  $（。kitid）的HTML（数据）。
}

I'm working in Jquery Mobile and I'm having problems refreshing the listview after Ajax content has been pulled into a div.

Specifically, the Ajax content is being pulled into a listview which resides within a collapsible content block.

Here is my html:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="iso-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>Edit Kits</title> 
<link rel="stylesheet" href="css/jquery.mobile-1.0rc2.css" />
<link rel="stylesheet" href="themes/Auer.css" />
<link rel="stylesheet" href="css/custom.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
</head> 
<body> 
<div data-role="page" id="editkits" class="type-interior">
<div data-role="header">
<h1>Edit Kits</h1>
<a href="SPI_SearchLink" data-icon="home" class="ui-btn-left">Home</a>
<a data-rel="back" data-icon="back" class="ui-btn-right">Back</a>
<div class="header-sub">
<div class="ui-bar center-text"><img src="images/logo.png" id="logo" alt="spi_Cname"/></div>
</div>
<div data-role="navbar" class="navbar">
<ul>
<li><a href="SPI_TOCLink" data-theme="c">TOC</a></li>

<!-- SPI_HTML_ShowSearchMenu -->
<li><a href="SPI_SearchLink" data-theme="c">Search</a></li>
<!-- SPI_HTML_ShowSearchMenu -->

<!-- SPI_HTML_AllowKits -->
<li><a href="SPI_KitsLink" class="ui-btn-active" data-theme="c">Kits</a></li>
<!-- SPI_HTML_AllowKits -->

<!-- SPI_HTML_AllowSales -->
<li><a href="SPI_SalesLink" data-theme="c">SPI_SalesMenuText</a></li>
<!-- SPI_HTML_AllowSales -->

<!-- SPI_HTML_AllowOrderPlacement -->
<li><a href="SPI_ShopingCartLink" data-theme="c">Cart</a></li>
<!-- SPI_HTML_AllowOrderPlacement -->
</ul>
</div><!-- /navbar -->
</div><!-- /header -->

<div data-role="content">

<!-- SPI_No_Kit_Message -->
<div class="ui-grid-a">
<div class="ui-bar ui-bar-e center-text">
<br>
<h2>You have no saved Kits.</h2>
<p>To create a kit, add products to your shopping
cart and click "save as kit" on the menu at the bottom of your display.</p>
</div>
</div>
<!-- SPI_No_Kit_Message -->

<!-- SPI_HTML_HdrOnlyKit -->
<div data-role="collapsible" class="kit" id="SPI_KitId" data-collapsed="true" data-content-theme="d">
<h3>SPI_KitName SPI_KitNote</h3>
<div class="kitid"></div>
</div>
<!-- SPI_HTML_HdrOnlyKit -->

<!-- SPI_HTML_Kit -->
<h3><a href="WebCatPageServer.exe?AJAX&Action=Close_Kit&KitID=SPI_KitId">SPI_KitName SPI_KitNote</a></h3>
<form name="SPI_KitFormName" method="post" action="WebCatPageServer.exe">
<input name="Action" type="hidden" value="Not_Set" />
<input name="IsAjax" type="hidden" value="Yes" />
<input name="KitId" type="hidden" value="SPI_KitId" />
<input name="SearchTerm" type="hidden" value="Not_Set" />
<ul data-role="listview" id="list" data-inset="true" data-split-icon="delete" data-split-theme="d">
<!-- SPI_HTML_Kit_Product1 -->
<li><a href="javascript:document.ShoppingCart.Action.value='ItemLookup';document.ShoppingCart.SearchTerm.value='SPI_CartLookupPartNum';document.ShoppingCart.submit();">
<!-- SPI_KitProdItemNum -->
<h2>SPI_KitProdPartNum</h2>
<!-- SPI_KitProdItemNum -->
<p class="description">SPI_KitProdDesc</p>
<p><input type="text"  name="SPI_KitOrdQtyFieldName" onBlur="clickrecall(this,'0')" tabindex="SPI_KitOrdQtyTabIndex" value="SPI_KitProdQty"  onfocus="document.SPI_KitFormName.Action.value='Recalc_Kit';SPI_KitOrdQtyFieldName.select()"/></p>
<p>Unit Price: SPI_KitProdPrice</p>
<p>Ext. Price: <span class="price">SPI_KitProdExtPrice</span></p>
</a>
<a href="javascript:document.SPI_KitFormName.SPI_KitOrdQtyFieldName.value='DEL';document.SPI_KitFormName.Action.value='Recalc_Kit';document.SPI_KitFormName.submit();">Delete</a> 
</li>
<!-- SPI_HTML_Kit_Product1 -->
<!-- SPI_HTML_Kit_Product2 -->
<li><a href="javascript:document.ShoppingCart.Action.value='ItemLookup';document.ShoppingCart.SearchTerm.value='SPI_CartLookupPartNum';document.ShoppingCart.submit();">
<!-- SPI_KitProdItemNum -->
<h2>SPI_KitProdPartNum</h2>
<!-- SPI_KitProdItemNum -->
<p class="description">SPI_KitProdDesc</p>
<p><input type="text"  name="SPI_KitOrdQtyFieldName" onBlur="clickrecall(this,'0')" tabindex="SPI_KitOrdQtyTabIndex" value="SPI_KitProdQty"  onfocus="document.SPI_KitFormName.Action.value='Recalc_Kit';SPI_KitOrdQtyFieldName.select()"/></p>
<p>Unit Price: SPI_KitProdPrice</p>
<p>Ext. Price: <span class="price">SPI_KitProdExtPrice</span></p>
</a>
<a href="javascript:document.SPI_KitFormName.SPI_KitOrdQtyFieldName.value='DEL';document.SPI_KitFormName.Action.value='Recalc_Kit';document.SPI_KitFormName.submit();">Delete</a> 
</li>
<!-- SPI_HTML_Kit_Product2 -->
</ul>
</form>
<!-- SPI_HTML_Kit -->

</div><!-- /content -->

<div data-role="footer" id="footer" data-position="fixed">
<h4>&copy; Auer Steel 2011</h4>
</div><!-- /footer -->


</div><!-- /page -->
</body>
</html>

Here's my ajax call:

$.ajaxSetup ({
cache: false
});
var ajax_load = "<img src='images/load.gif' alt='loading...' />";
$(".kit").click(function(){
var kitid = this.id;
var loadUrl = "http://68.188.40.182/WebCat/WebCatPageServer.exe?AJAX&Action=Open_Kit&KitID=" +kitid;
$(".kitid").html(ajax_load).load(loadUrl); 
});

I did try several variations of: $("#list").listview("refresh"); to no avail.

I read somewhere that perhaps using loadUrl is the issue. Any ideas? Thanks!

UPDATE

Ok, using Avisek's code as a starting point, I was able to come up with this. This works well, except it only refreshes the first listview within the first collapsible content box. Subsequent listviews in subsequent content boxes do not refresh. Any ideas? Thanks!

I used Avisek's starting point and eventually got to this solution that seems to work:

UPDATE II Ok, I seem to have solved this. I added the following code after the refresh code to in effect destroy the page after the ajax function was called on each collapsible element and subsequently each listview that was created:

jQuery('#editkits').page("destroy").page();

You can see the complete code below:

 $(".kit").click(function(){
    $(".kitid").empty().html('<img src="images/load.gif" />');
    var kitid = this.id;
    var url = 'http://68.188.40.182/WebCat/WebCatPageServer.exe?AJAX&Action=Open_Kit&KitID=' +kitid;
    $.ajax({
         url : url,
         dataType: "html",
         cache: false,
         success : ajaxCallDone,
         complete: function() {
          },
          error : function(XMLHttpRequest, textStatus, errorThrown) {
          alert("Error type :" + errorThrown+ " Error message :" + XMLHttpRequest.responseXML+ " textStatus: "+textStatus);
          }
        });
    function ajaxCallDone(data)
    {
      $(".kitid").html(data);
      try {
        $('#list').listview('refresh');
    } catch(e) {
         $('#list').listview();
    }
  jQuery('#editkits').page("destroy").page();
    }
     });

解决方案

Instead of jquery load; try ajax

and on success- populate html & on complete- do a refresh

for e.g-

var url = 'your_url';
var dataString = "Action=Open_Kit&KitID=" +kitid;

$.ajax({
        url : url,
        data: dataString,
        success : ajaxCallDone,
        complete: function() {
                 $("#list").listview("refresh");
        }
        error : function(XMLHttpRequest, textStatus, errorThrown) {
            alert("Error type :" + errorThrown+ " Error message :" + XMLHttpRequest.responseXML+ " textStatus: "+textStatus);
        }
    });



function ajaxCallDone(data)
{
  //populate the html
  $(".kitid").html(data);
}

这篇关于如何Ajax调用后刷新jQuery Mobile的列表视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆