How to load article without page reloading in Yii & Ajax

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

[color="#006400"]/* Moved from "2.0" to "1.1" */[/color]

in main view

<div class="list-group">

<?php foreach($model as $row) : ?>

  <a class="list-group-items" href="javascript:void(0)" data-id="<?= $row->id; ?>"><?= $row->title; ?></a>

<?php endforeach; ?>

</div>

<div id="my-content"></div>

<script type="text/javascript">

$('.list-group-items').click(function(e){

   e.preventDefault();

   var data = {

      r: 'mycontroller/detail',

      id: $(this).data('id');

   };

   $.get('index.php', data, function(html){

      $('#my-content').html(html);

   }, 'html')

   .error(function(xhr, textStatus, error){

      $('#my-content').html(xhr.responseText);

   });

});

</script>

in controller mycontroller

public function actionDetail($id) {

   $model = MyModel::model()->findByPk($id);

   // or 

   // $model = $this->loadModel($id);

   

   $this->render('detail', [

     'model' => $model

   ]);

}

in view for action Detail

<?php

<h1><?= $model->title; ?></h1>

<?= $model->content; ?>

?>