Question

I’m working on jQuery Mobile and currently stumbled upon a road block

On render to “task” index page after successfully creating the “Task”(I accordance with rails App) the index page compromise of ul#listview with count bubble some thing of this is kind . On the beneath the page there is the script to to get the count as seen in the bubble example (mention above) but it seem that script never execute.

Here is the Code:

partials => _index.html.erb

<div data-role="page" id="task">
 <div data-role="header">
    <h1>Tasks</h1>
 </div>
<div data-role="content">
  <ul data-role="listview">
    <li>
       <a href="/mytasks"> My Task 
         <span class="ui-li-count" id="my_tasks" ></span>
       </a>
        </li>
    <li>
       <a href="/alltasks"> All Task 
         <span class="ui-li-count" id="all_tasks" ></span>
       </a>
    </li>
</div>
  <script type="text/javascript">
    $("#task").live("pageinit",function() {
       alert("Update the count");
       // The below method fetched the count 
       go_fetch_the_count("mytasks","all_tasks");
     })
  </script>
</div>

I have also tried:

$(document).ready(function() { // above function // }) ,
    $("#task").live("pagecreate",function(){ // above function // })
    $("#task").live("pageshow",function(){ // above function // })
    $("#task").live("pagebeforecreate",function(){ // above function // })

But it seem not even the alert is also not executed.

Regards
Viren Negi

Answer 1

There are 2 solution for above problem I manage to find out

SOLUTIONS

1. Remove the Page from the dom through pagehide event so that there is only one dom in the page with same dom id .
   something like this

$(‘#car_list’).live(‘pagehide’,function() {

      $(this).remove(); 

    });

(The approach has a serious caveat if you have jquery-mobile back functionality enable. It might land you on page whose back page would have been removed by the page hide event living the user in no man land situation . Plus to remove and download a page again just because the bubble count got change in the page is a very hard trade off that where the second solution worked for me)

1. This solution defined the global variable on the page and every time the get_count method is called it check whether the global variable is define if yes update the current page with count just the way the old page is updated

   function get_count() {
      $.ajax( { 
            url:'/get_count.json',
            dataType : "json",
            success : function(result) {
              $.each(['fer','lam','fia','cor','mer'],function(index,value) {
                 console.log(window.reloaded);
                 // the below if statement will only execute for the second time 
                 if (window.reloaded && typeof(window.reloaded) != "undefined") {
                   console.log("hello");
                   $(".ui-page-active").find("#"+value).text(result[value]) 
                 }
                 $("#"+value).text(result[value]);
              })
              window.reloaded = true ;  
            }
        });
      }
   

Update the code with the 2nd solution in heroku app too.

Accepting this as valid answer until some provide more better way to achieve the same