Блог

Главная - Вопросы по программированию - Как обновить Jquery Mobile Listview после вызова Ajax

Как обновить Jquery Mobile Listview после вызова Ajax

#jquery #ajax

#jquery #ajax

Вопрос:

Я работаю в Jquery Mobile, и у меня возникли проблемы с обновлением listview после того, как содержимое Ajax было перенесено в div.

В частности, содержимое Ajax извлекается в listview, который находится внутри сворачиваемого блока содержимого.

Вот мой 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?AJAXamp;Action=Close_Kitamp;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>amp;copy; Auer Steel 2011</h4>
</div><!-- /footer -->


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

Вот мой вызов 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?AJAXamp;Action=Open_Kitamp;KitID="  kitid;
$(".kitid").html(ajax_load).load(loadUrl); 
});

Я пробовал несколько вариантов: $ («#list»).listview(«обновить»); безрезультатно.

Я где-то читал, что, возможно, проблема в использовании loadUrl. Есть идеи? Спасибо!

Обновить

Хорошо, используя код Avisek в качестве отправной точки, я смог придумать это. Это работает хорошо, за исключением того, что обновляет только первый listview в первом сворачиваемом окне содержимого. Последующие просмотры списков в последующих полях содержимого не обновляются. Есть идеи? Спасибо!

Я использовал отправную точку Avisek и в конечном итоге пришел к этому решению, которое, похоже, работает:

ОБНОВЛЕНИЕ II Хорошо, я, кажется, решил это. Я добавил следующий код после кода обновления, чтобы фактически уничтожить страницу после вызова функции ajax для каждого сворачиваемого элемента и впоследствии для каждого созданного listview:

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

Вы можете увидеть полный код ниже:

  $(".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?AJAXamp;Action=Open_Kitamp;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();
    }
     });

Ответ №1:

Вместо загрузки jquery попробуйте ajax

и при успешном завершении — заполнить html и по завершении — выполнить обновление

например-

 var url = 'your_url';
var dataString = "Action=Open_Kitamp;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);
}

Ответ №2:

Вызов .listview("refresh") у меня не сработал. Он создал базовый список без оформления.

Это то, что сработало для меня:

 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 ***
        }
    });
}

Комментарии:

1. У меня это тоже сработало. Ключевым фактором является "ul:jqmData(role='listview')" .

2. Ключ на самом деле является триггером события в div. спасибо, у меня это сработало

Ответ №3:

В надежде, что это поможет кому-то еще в будущем, вот что происходило в моей ситуации. Я использовал (несколько) общий идентификатор для div (#PageContent) и ссылался на него в нескольких местах приложения. Как только я удалил этот дублирующий идентификатор, все начало работать так, как задумано.

Спасибо всем, кто был выше, за советы и хитрости! (Я перепробовал их все) 🙂