How to Refresh Jquery Mobile Listview after Ajax Call

Question

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

Avisek Chakraborty · Accepted Answer · 2011-11-11 09:08:29Z

2

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

answered Nov 11, 2011 at 9:08

Avisek Chakraborty

8,32910 gold badges52 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Eric J. · Accepted Answer · 2012-04-20 07:17:22Z

1

Calling .listview("refresh") did not work for me. It created a basic list, without styling.

This is what worked for me:

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

answered Apr 20, 2012 at 7:17

Eric J.

151k65 gold badges353 silver badges563 bronze badges

2 Comments

Nicolás Ozimica Over a year ago

It worked for me too. The key factor is "ul:jqmData(role='listview')".

Sven Over a year ago

The key is really the event trigger on the div. thanks it worked for me

Jim · Accepted Answer · 2013-10-09 20:52:43Z

0

In the hopes this will help someone else in the future, here's what was happening in my situation. I was using a (somewhat) generic id for the div (#pageContent) and referencing it across several places in the app. Once I removed that duplicate id, things started working as designed.

Thanks to everyone above for the tips and tricks! (I tried them all) :)

answered Oct 9, 2013 at 20:52

Jim

162 bronze badges

Collectives™ on Stack Overflow

How to Refresh Jquery Mobile Listview after Ajax Call

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related