0

以下 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');
    }

}

这是教师.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";
4

2 回答 2

0

您必须刷新选择菜单，html 部分在没有运行时 jquery 的情况下显示，需要refresh()在 jquery mobile 中刷新它...

检查这个：- http://api.jquerymobile.com/select/#method-refresh

这用于更新自定义选择以反映本机选择元素的值。如果选择中的选项数与自定义菜单中的项目数不同，它将重建自定义菜单。

于 2013-04-06T06:42:00.030 回答
0

这是我最后的 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>
于 2013-04-07T07:47:10.657 回答