jquery - Ajaxed page does not render jquermobile style -
the following jquery code works not display jquerymobile select form. display plain select html. how can make bind ajaxed page render jquerymobile select form.
thanks in advance.
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 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> and 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 techerid in hw_user_subject 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 no teacher 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'); } } this teachers.php
echo '<label for="teachername"><em>* </em> subject teacher: </label>'."\n"; $option = array ( ''=>'-- select teacher --' ); foreach($teachers $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";
you have refresh selectmenu, html part displaying without runtime jquery, need refresh refresh() in jquery mobile...
check this:- http://api.jquerymobile.com/select/#method-refresh
this used update custom select reflect native select element's value. if number of options in select different number of items in custom menu, it'll rebuild custom menu.
Comments
Post a Comment