Ajaxed頁面無法呈現jquermobile風格

Question

以下jquery代碼有效，但不會使用jquerymobile選擇表單顯示。它顯示純粹的選擇HTML。我該如何綁定ajaxed頁面呈現jquerymobile選擇表單。

在此先感謝。

echo '<div data-role="fieldcontain" id="subject">'."\n"; 
echo '<label for="subjectid"><em>* </em> Subject: </label>'."\n"; 
if(!empty($subjectlist)) 
{ 
    echo form_dropdown('subjectid', $subjectlist,  NULL, 'id="subjectid" class="required" data-theme="c"')."<br />\n"; 
} 
else 
{ 
    echo "No subject registered. Contact the application administrator."; 
} 
echo "</div>\n\n"; 


echo '<div data-role="fieldcontain" id="teachernamediv">'."\n"; 

echo "</div>\n\n"; 
.... 
.... 

<script> 
$(document).ready(function() { 
    $('#loader').hide(); 
    $('#teachernamediv').hide(); 

    $('#subjectid').change(function(){ 
     $('#loader').show(); 
     var findteacher = "<?php echo base_url(); ?>index.php/welcome/user/findteacher"; 
     $.post(findteacher, { 
      subjectid: $('#subjectid').val(), 
      teachergrp: "5", 
      user_id: $('input[name=id]').val(), 
     }, function(response){ 
      setTimeout("finishAjax('teachername', '"+escape(response)+"')", 200); 
     }); 
     return false; 
    }); 
}); 

function finishAjax(id, response){ 
$('#loader').hide(); 
$('#'+id+'div').html(unescape(response)); 
$('#'+id+'div').fadeIn(); 
} 
<script> 

這是user.php的

function findteacher() 
{ 
    if($_POST['subjectid']) 
    { 
     //$grade = $_POST['grade']; 
     $subject_id = $_POST['subjectid']; 
     $teachergrp = $_POST['teachergrp']; 
     $user_id = $_POST['user_id']; 

     // check if student has a techerid in hw_user_subject with this subjectid 
     $findteacher = $this->Mhomework->findSubjectTeacher($user_id, $subject_id); 
     if(!empty($findteacher)) 
     { 
      $data['teacher']=$findteacher; 
      $data['header']=$this->preference->item('site_name'); 
     $this->load->view('common/teacher', $data); 
     } 
     else 
     { 
      // if there is no teacher then get a list of teacher names 
     $data['teachers'] = $this->Mhomework->findteacher($subject_id,$teachergrp); 


     $data['header']=$this->preference->item('site_name'); 
     $this->load->view('common/teachers', $data); 

     } 

    } 
    else 
    { 
     redirect ('welcome','refresh'); 
    } 

} 

這是teachers.php

echo '<label for="teachername"><em>* </em> Subject Teacher: </label>'."\n"; 
$option = array (
     ''=>'-- Select Teacher --' 

     ); 
foreach($teachers as $row) 
{ 
    $gender=get_gender($row['gender']); 
    $option [$row['user_id']]=$gender." " . $row['last_name']; 
} 


echo form_dropdown('teachername', $option, NULL, 'id="teachername" class="required" data-theme="c" ')."<br />\n"; 

Answer 1

你必須刷新selectmenu，HTML部分顯示的是沒有運行的jQuery，需要刷新它通過refresh()在jquery移動...

檢查此： - http://api.jquerymobile.com/select/#method-refresh

這是用來更新自定義選擇以反映本機選擇元素的值。如果選擇的選項數量與自定義菜單中的項目數量不同，它將重新生成自定義菜單。

Answer 2

這是我最終的js代碼。我使用了.selectmenu（）;和.trigger（'create'）;

<script> 
$(document).ready(function() { 
    $('#loader').hide(); 
    $('#teachernamediv').hide(); 

    $('#subjectid').change(function(){ 
     $('#loader').show(); 
     var findteacher = "<?php echo base_url(); ?>index.php/welcome/user/findteacher"; 
     $.post(findteacher, { 
      subjectid: $('#subjectid').val(), 
      teachergrp: "5", 
      user_id: $('input[name=id]').val(), 
     }, function(response){ 
      setTimeout("finishAjax('teachername', '"+escape(response)+"')", 200); 
     }); 
     return false; 
    }); 
}); 

function finishAjax(id, response){ 
$('#loader').hide(); 
$('#'+id+'div').html(unescape(response)); 
$('#'+id+'div').fadeIn(); 
$('#'+id).selectmenu(); // this will refresh the select menu 
$('#myform2').trigger('create');//this will refresh the form 
} 


</script>