如何在Yii＆Ajax中加载文章而不重新加载页面

Question

I have an viewing articles from databases and every article view with hole page load. So I would load articles without page reloading, I think this is possible using Ajax but I'm not so strong about it.

This is my initial concept like below:

Layout:

CHtml::link($menu['items'][$itemId]['label'],
   array('articles/view',
   'id'=>$menu['items'][$itemId]['link'],
  )
);

// This showing articles name & link

View:

<?php
    echo $model->article_body;
?>

<script>
   jQuery.ajax({
     type: 'POST',
     dataType: 'html',
     url: ('articles/view'),
     success: function(data){
         document.getElementById('articles').innerHTML = data;
     },
     error: function(){
        alert('Somthing wrong');
     }
   });
</script>

Controller:

public function actionView($id)
{
  $model=$this->loadModel($id);
   $this->render('view',array('model' => $model));
}

Does someone can help me? Thanks

Answer 1

You must return json:

public function actionView($id)
{
  $model=$this->loadModel($id);
  ...

                echo CJSON::encode(
                    array(
                        'status' => 'success',
                        'content' => $this->renderPartial('view',
                            array(
                                'model' => $model,
                            ),
                            true,
                            true
                        ),
                    )
                );
}

Answer 2

if i understood you correctly,

in your view file something like this.

 echo CHtml::link($menu['items'][$itemId]['label'],
       array('articles/view',
       'id'=>$menu['items'][$itemId]['link'],
      ),array('class'=>'youclassnamehere')
    );
 echo '<div  id="yourDivId"></div>';

in javascript your code should be something like eg

  $(".youclassnamehere").click(function(){
         $.ajax({
          type:'POST',
         url:$(this).attr('href'),
         success:function(data){
           $("#yourDivId").html(data);
         }
         error:function(data){
          alert('Error occured please try again later..');
         }
    }),
   return false;//this will not redirect your page
});

in controller action your code like eg

 public function actionView($id)
{
  $model=$this->loadModel($id);
   $this->render('view',array('model' => $model));
}

hope this will help you

Answer 3

I reach solution from above answer but I newly add like below:

array(
   'onclick'=>'javascript:return false'
)