2014-02-27 57 views
0

我花了好几个小时试图弄清楚这一点。我使用Jquery mobile输出事件列表。Jquery Mobile在刷新时丢失了listview样式

页面加载和列表视图正常运行。我可以在没有任何问题的情况下遍历我的应用程序,但是当我刷新页面时,许多人发现JM样式会丢失。我已经尝试了大部分(如果不是全部)论坛上提供的解决方案,这可能意味着我没有正确实施建议,或者它们与我的代码无关。我尝试了刷新选项“$(”#vg_list“)。listview(”refresh“);”到无效 和从jQuery文档看起来像这只是使用附加时相对。

我也尝试了document.ready函数的替代方法,但没有成功。 这是我的代码如下。任何帮助将不胜感激。

<div id="mygatherings" 
    data-theme="a" 
    data-role="page" 
      data-title="View Source:mygatherings"> 
    <!-- header: My Gatherings start --> 
      <div data-role="header" 
     data-theme="a" 
     data-position="fixed" 
     data-id="vs_header"> 

     <h1>My Gatherings</h1> 
     <a href="#home" 
      data-icon="home" 
      data-iconpos="notext" 
          data-transition="slide" 
      >Home</a> 
     <a href="#" 
      data-icon="back" 
      data-iconpos="notext" 
          data-rel="back" 
          data-transition="slide" 
      >back</a> 
      </div><!-- My Gatherings : create end --> 

      <!-- Content:My Gatherings start --> 


      <div id="vg" data-role="listview" ></div> 

$(document).ready(function(){ 

$.getJSON("fetch.php", function(data) { 

    var output='<ul data-role="listview">'; 
    $.each(data.result,function(key,val){ 

    output+='<li>'; 
     output+='<h3>Event Name:' + val.name + '</h3>'; 
     output+='<p>Location:' + val.location + '</p>'; 
     output+='<il>Contact:'+ val.email + '</li>'; 
     output+='</li>'; 

      }); 
     output+='</ul>'; 

     $('#vg').html(output); 


    }); 


}); 

回答

0

经过几个小时的敲打我的头靠在墙上,我想到了这一点。查看下面的代码。

$(document).on('pagebeforeshow', '#mygatherings', function(){ 
       update(); 

    }); 
function update(){  
$.getJSON("fetch.php", function(data) { 

    var output='<ul data-role="listview">'; 
    $.each(data.result,function(key,val){ 

    output+='<li>'; 
     output+='<h3>Event Name:' + val.name + '</h3>'; 
     output+='<p>Location:' + val.location + '</p>'; 
     output+='<il>Contact:'+ val.email + '</li>'; 
     output+='</li>'; 
     output+='</ul>'; 
    }); 

    $('#vg').html(output); 
    $("#vg").listview("refresh"); 

}); 

} 
0

使用这样

$.getJSON("fetch.php", function(data) { 

    var output='<ul data-role="listview">'; 
    $.each(data.result,function(key,val){ 

    output+='<li>'; 
     output+='<h3>Event Name:' + val.name + '</h3>'; 
     output+='<p>Location:' + val.location + '</p>'; 
     output+='<il>Contact:'+ val.email + '</li>'; 
     output+='</li>'; 

      }); 
     output+='</ul>'; 

     $('#vg').html(output); 


    }).done(function(){ 
    $("#listviewid").listview().listview("refresh"); 
     });