Update Content with Ajax

Yii 1.1 General Discussion
1

I want to create 'How to Get" application, where user can select a city from dropdownlist and the expalaintion how to get the city will appear.

The view codes:




<form>

<?php echo CHtml::dropDownList('city','',CHtml::listData(Howtoget::model()->findAll('published=:status',array(':status'=>1)),'id','city'),

                            array(

                                'ajax' => array(

                                'type' => 'POST',

                                'url' => CController::createUrl('site/howtoget'),

                                'update' => '#route'

                            ))); ?>                        

                        <div id="route"></div>

</form>

In Controller:




public function actionHowtoget()

    {       

       echo "It's working!";

    }

But, the codes above is not working. Need help…

Thanks

2

Have you checked that the ajax call is made and that “It’s working” is echoed ?

3

Ajax call was not made. “It’s working” not echoed.

But here is jquery codes generated by yii:




<script type="text/javascript">

/*<![CDATA[*/

jQuery(function($) {

jQuery('body').delegate('#city','change',function(){jQuery.ajax({'type':'POST','url':'/web/site/howtoget','cache':false,'data':jQuery(this).parents("form").serialize(),'success':function(html){jQuery("#rute").html(html)}});return false;});

});

/*]]>*/

</script>
4

My bad. I just removed jquery.js from my ‘/layout/main.php’, and now the scripts above tt’s working. :)

Thanks All.

5

Now, how to add ajax-loading indicators?

I was following this artikel How to add ajax-loading indicators, but not working.

My codes become like this:




 <?php 

                           echo CHtml::dropDownList('city','',CHtml::listData(Howtoget::model()->findAll('published=:status',array(':status'=>1)),'id','city'),                            

                            array(                           

                                'ajax' => array(

                                'type' => 'POST',

                                'url' => CController::createUrl('site/howtoget'),

                                'update' => '#rute',

                                'beforeSend' => 'function(){

                                  $("#myDiv").addClass("loading");}',

                                'complete' => 'function(){

                                  $("#myDiv").removeClass("loading");}',


                            ))); ?>

That is wrong?

6

An obvious question… do you have a div with the id myDiv?

7

Yes, I have it, and I have loading.gif in my ‘/htdosc/loading.gif’ too.




#myDiv .loading {

    background-color: #eee;

    background-image: url('loading.gif');

    background-position:  center center;

    background-repeat: no-repeat;

    opacity: 1;

}

#myDiv .loading * {

    opacity: .8;

}
8 

'update'=>'route' or 'update'=>'rute'
9

I’m sorry, for the last I renamed it to ‘rute’. And except the loading ajax indicator, the application working well right now.

10

Is your project located in the "htdocs" root or in a subfolder like "htdocs/projectname"… if the second is the case… then the picture should be in the project folder

11

My project locates in the ‘/htdocs/’ root, coz it in live server now. I plan to register this project to Yii powered website when it was complated.

12

Without looking at all the code (view, css, generated page source) it’s difficult to say what is wrong here…

You will need to "debug" this…

use firefox and firebug… to see what happens after… $("#myDiv").addClass("loading");…

Edit:

Just come to my mind… it could be that myDiv does not have a width and height… note that as you are just setting a background picture with CSS this does not resize the div to the picture dimensions…