Jquery mobile获取listview选择项并将其发送到另一页

时间:2014-03-01 11:07:44

标签: javascript jquery listview jquery-mobile

我制作了具有listwiew的JQM应用程序,我想将选择的项目文本发送到另一个页面,以使用此文本通过ajax从服务器获取数据

第一页

`<div data-role="page" id="hteacher" >
<div data-role="header" data-position="fixed">
<h1>Welcome teacher 1</h1>
 <div data-role="navbar">
  <ul>
    <li><a href="#hteacher" data-icon="home">Home</a></li>
    <li><a href="#t_addclass" data-icon="plus" data-rel="dialog">ADD Class</a></li>
    <li><a href="#msg_page" data-icon="star" data-rel="dialog">MSG</a></li>`<div data-      role="page" id="hteacher" >

       <div data-role="header" data-position="fixed">
    <h1>Welcome teacher 1</h1>
    <div data-role="navbar">
     <ul>
    <li><a href="#hteacher" data-icon="home">Home</a></li>
    <li><a href="#t_addclass" data-icon="plus" data-rel="dialog">ADD Class</a></li>
    <li><a href="#msg_page" data-icon="star" data-rel="dialog">MSG</a></li>
    </ul>
   </div>
  </div>
 <div data-role="content">
   <p></p>
  <h2>list of classes </h2>
 <ul data-role="listview" id="classes_list" data-autodividers="true" data-inset="true"   data-filter="true">
 <script>
$( document ).delegate("#hteacher", "pagecreate", function() {
 $.post("teacher_login.php", { teacher_user:teacher_user ,  get_classes:"1"} ,        function(data ,status){


  var obj = jQuery.parseJSON( data );
$.each(obj,function(){
 var str =this['class_un'];
 var  html =  ' <li><a href="#" ><img src="class1.jpg">'+ str + '</a></li>';
 $("#classes_list").append (html).listview("refresh");
          });
 });
$('#classes_list').on('click','li', function () {
 teacher_choose_class = $(this).text();
 $.mobile.changePage("#teacher_classes");
});  
 });                      
</script>
 </ul>
 </div>

 <div data-role="footer" data-position="fixed">
<h1>Welcome To .....</h1>
 </div>

想要将所选项目文本发送给它的第二页

<div data-role="page" id="teacher_classes" >
<div data-role="header" data-position="fixed">
<h1>Welcome to class A</h1>
   <div data-role="navbar">
  <ul>
    <li><a href="#hteacher" data-icon="home">Home</a></li>
    <li><a href="#attend" data-icon="check" data-rel="dialog">Take Attendance</a></li>
  </ul>
</div>
</div>

 <div data-role="content">
 <p></p>
<h2>class student </h2>
<ul data-role="listview"  id="student_list_class" data-autodividers="true" data-inset="true" data-filter="true">
 <script>
 $("#teacher_classes").live("pageshow",function(event){
   alert(teacher_choose_class);
  $.post("teacher_login.php", { class_un:teacher_choose_class ,  get_students:"1"} ,      function(data ,status){
var obj = jQuery.parseJSON( data );
$.each(obj,function(){
 var str =this['child_name'];
 var  html =  ' <li><a href="#put_grade"><img src="student1.jpg">'+ str + '</a></li>';
  $("#student_list_class").append (html).listview("refresh");
     });

 });                      
 });
</script>
 </ul>
 </div>

 <div data-role="footer" data-position="fixed">
 <h1>Welcome To .....</h1>
 </div>

我将teacher_choose_class作为全局变量,问题是此变量的值显示在警报消息中,但是当使用此变量通过ajax获取数据时没有数据返回

1 个答案:

答案 0 :(得分:0)

在代码的ajax部分,在返回时放置alert(data);以查看您要返回的内容。假设您正在返回一个JSON对象数组,每个对象都有一个名为child_name的属性,请尝试:

$("#teacher_classes").live("pageshow",function(event){
   alert(teacher_choose_class);
   $.post("teacher_login.php", { class_un:teacher_choose_class ,  get_students:"1"} , function(data ,status){
       alert(data);
       var obj = $.parseJSON(data);
       var  html = '';
       $.each(obj,function(i, item){
           var str =item.child_name;
           html +=  '<li><a href="#put_grade"><img src="student1.jpg">'+ str + '</a></li>';             
       });

       $("#student_list_class").append(html).listview("refresh");
    });                      
 });