CODEWITHSUNDEEP
javascriptphpcssajaxyii
neophyte
neophyte

Reputation: 1816

Yii: Javascript & CSS not loading after Ajax calls

I have created a view with tabs and each tab has a form with ajax submit and gridview. I am using renderpartial in tabs widget to render the form and gridview and after clicking submit it filters the gridview. Everything looks fine within the tab till I click the submit button. After clicking submit it filters the gridview as expected.. but it does not load the bootstrap javascript and css so the layout is totally messed up and the tabs and menu bar all appears as a list and the page keeps on loading.

Anyone know why is it not loading the required scripts and css which I have preload in main config. Do I have to specify something seperately when calling ajax function from a view.

EDIT: Code Added

Code for tabs widget(producers.php)

 <?php $this->widget(
 'bootstrap.widgets.TbTabs',
 array(
 'type' => 'tabs', 
 'tabs' => array(

array('label' => 'Monthly' ,'id' => 'tab1', 
                   'content' => $this->renderPartial('_prod_monthly',array('dataProvider' => $dataProvider,'dataProvider2' => $dataProvider2 ,'dataProvider3' => $dataProvider3, 'opm' => $opm, 'month' => $month),true,true),
                   'active' => true),
array('label' => 'Weekly' ,'id' => 'tab2', 
                  'content' => $this->renderPartial('_prod_weekly',array('dataProvider4' => $dataProvider4,'dataProvider5' => $dataProvider5 ,'dataProvider3' => $dataProvider3, 'opm' => $opm, 'week' => $week),true,true)),
array('label' => 'Daily', 'id' => 'tab3', 'content' => 'ABC'  )),

)); ?>

Code for partial view (_prod_monthly.php):

$form = $this->beginWidget(
    'bootstrap.widgets.TbActiveForm',array(
    'id' => 'form_monthly',
    'enableAjaxValidation'=>true,
    'type' => 'inline',
    'method' => 'get',
    'htmlOptions' => array('class' => 'well','onsubmit'=>"return false;",/* Disable normal form submit */
                           'onkeypress'=>" if(event.keyCode == 13){ send2(); } " /* Do ajax call when user presses enter key */),)); ?>
Select Month: 
<?php echo CHtml::dropDownList('month', $month,
           $sel_month); ?> &nbsp;
Select Employee: 
<?php echo CHtml::dropDownList('opm', $opm,
           $sel_opm); ?> &nbsp;              
     <?php $this->widget('bootstrap.widgets.TbButton', 
  array(
    'buttonType'=>'button', 
    'label'=>'Submit',
    'type' =>'primary',
    'htmlOptions'=> array('onclick' => 'send2()'),)
  );
   $this->endWidget();  
$this->widget('bootstrap.widgets.TbExtendedGridView', array(
'sortableRows'=>true,
'afterSortableUpdate' => 'js:function(id, position){ console.log("id: "+id+", position:"+position);}',
'type'=>'striped bordered hover',
'dataProvider'=>$dataProvider,
'type'=>'striped bordered responsive',
'template' => "{summary}\n{items}\n{extendedSummary}\n{exportButtons}"));?>

<script type="text/javascript">

function send2()
{

var data=$("#form_monthly").serialize();


$.ajax({
type: 'GET',
url: '<?php echo Yii::app()->createAbsoluteUrl("op/producers"); ?>',
data:data,
success:function(data){
            document.write(data); 
          },
error: function(data) { // if error occured
     alert("Error occured.please try again");
     alert(data);
},

dataType:'html'});
}
</script>

Thanks.

Upvotes: 1

Views: 1815

Answers (1)

lin
lin

Reputation: 18392

There is no Yii based solution for handling UI-Widgets with AJAX right now and will never come.

Probably, this will never happen again in Yii2. The main Problem is about your missing JS-Ressources and Binding (as you know already). Yii will generate those codes (which you are missing) within the layout process, which is not called on "AJAX"-Requests. Don't try to put in your JS-Ressources by yourself. Yii generated JS-Cods are realy tricky ... and not that easy to handle manualy. This will come up with a lot of problems.

My solution: I dont use any of the "UI"-Features included in Yii. They come along with a lot of problems (Ajax, Multiple announces, etc.). Its not hard to write that features yourself or using jQueryUI.

Take a look at the Tab feature and try write it yourself .. and be happy ! :)

Upvotes: 1

Related Questions