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的情况下显示，需要在jquery mobile中用refresh()刷新它...

检查一下： - 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>

Ajaxed页面不呈现jquermobile风格

2 个答案: