Comment faire pour Actualiser Jquery Mobile Listview après l'Appel Ajax

Je travaille en Jquery Mobile et je vais avoir des problèmes pour l'actualisation de la listview après le contenu Ajax a été tiré dans une div.

Plus précisément, le contenu Ajax est tirée dans une listview qui réside à l'intérieur d'un réductible bloc de contenu.

Voici mon code 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>

Voici mon appel ajax:

$.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); 
});

Je l'ai fait essayer plusieurs variations: $("#list").listview("refresh"); en vain.

J'ai lu quelque part que peut-être l'aide d'loadUrl est la question. Des idées? Merci!

Mise à JOUR

Ok, à l'aide de Avisek du code comme un point de départ, j'ai été en mesure de venir avec cette. Cela fonctionne bien, sauf qu'il actualise uniquement la première listview dans la première pliable de boîte de contenu. Ultérieure listviews dans la suite du contenu des boîtes de ne pas actualiser. Des idées? Merci!

J'ai utilisé Avisek le point de départ et finalement arrivés à cette solution qui semble fonctionner:

MISE À JOUR II
Ok, il me semble avoir résolu ce problème. J'ai ajouté le code suivant après l'actualisation du code pour effet de détruire la page après l'ajax fonction a été appelée sur chaque élément pliable et par la suite, chaque listview qui a été créé:

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

Vous pouvez voir le code complet ci-dessous:

 $(".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();
}
});

OriginalL'auteur dentalhero | 2011-11-11

ajax jquery

Au lieu de jquery charge; essayez ajax

et sur le succès de remplir le html & sur complet - effectuez une actualisation

pour l'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);
}

OriginalL'auteur Avi C

Appel .listview("refresh") ne fonctionne pas pour moi. Il a créé une liste de base, sans style.

C'est ce qui a fonctionné pour moi:

function updateData()
{
$.ajax({
url: '@Html.Raw(ajaxUrl)',
async: false,
beforeSend: function () { $.mobile.showPageLoadingMsg(); },
complete: function ()
{
$.mobile.hidePageLoadingMsg();
$("ul:jqmData(role='listview')").listview();
},
success: function (data, textStatus, jqXHR)
{
$('#myDiv').html(data);
$('#myDiv').trigger("create"); //*** THIS IS THE KEY ***
}
});
}

Merci pour l'ajout, Eric.
Il a travaillé pour moi aussi. Le facteur clé est "ul:jqmData(role='listview')".
La clé est vraiment l'événement déclencheur sur la div. merci cela a fonctionné pour moi

OriginalL'auteur Eric J.

0

Dans l'espoir que cela va aider quelqu'un d'autre dans l'avenir, voici ce qui se passait dans ma situation. J'ai été en utilisant une (un peu) générique de l'id de la div (#au contenu de la page) et le référencement à travers plusieurs endroits dans l'application. Une fois que j'ai enlevé le code en double, les choses ont commencé à fonctionner comme prévu.

Merci à tout le monde ci-dessus pour les conseils et astuces! (J'ai tout essayé) 🙂

OriginalL'auteur Jim

Vous devez vous connecter pour publier un commentaire.