AJAX using Yii

hello…

I am new to Yii and ajax.

I have a form that doesn’t send the data with submition.

i want using ajax function to my system

can anybody help me :)

view.php

<?php $this->renderPartial("//layouts/_top", compact("title")); //breadcrumbs ?>

<!-- content main container -->

<div class="main">

&#60;&#33;-- row --&#62;


&lt;div class=&quot;row&quot;&gt;





    &#60;&#33;-- col 4 --&#62;


    &lt;div class=&quot;col-md-4&quot;&gt;





        &#60;&#33;-- tile --&#62;


        &lt;section class=&quot;tile transparent&quot;&gt;











            &#60;&#33;-- tile widget --&#62;


            &lt;div class=&quot;tile-widget color transparent-white rounded-top-corners&quot;&gt;





                &lt;div class=&quot;user-card&quot;&gt;


                    &lt;h3&gt;&lt;strong&gt;&lt;?= Yii::app()-&gt;user-&gt;profile-&gt;user_name ?&gt;&lt;/strong&gt;&lt;/h3&gt;


                    &lt;ul class=&quot;profile-controls inline&quot;&gt;


                        &lt;li class=&quot;mailto&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-envelope&quot;&gt;&lt;/i&gt; Send Email&lt;/a&gt;&lt;/li&gt;


                        &lt;li class=&quot;avatar&quot;&gt;&lt;img src=&quot;&lt;?= Yii::app()-&gt;baseUrl ?&gt;/images/&lt;?= Yii::app()-&gt;user-&gt;profile-&gt;user_profile_picture ?&gt;&quot; alt class=&quot;img-circle profile-photo&quot;&gt;&lt;/li&gt;


                        &lt;li class=&quot;callto&quot; id=&quot;make-call&quot;&gt;


                            &lt;a href=&quot;#&quot;&gt;


                                &lt;span class=&quot;call&quot;&gt;Call &lt;i class=&quot;fa fa-phone&quot;&gt;&lt;/i&gt;&lt;/span&gt;


                                &lt;span class=&quot;calling&quot;&gt;Calling... &lt;i class=&quot;fa fa-microphone&quot;&gt;&lt;/i&gt;&lt;/span&gt;


                            &lt;/a&gt;


                        &lt;/li&gt;


                    &lt;/ul&gt;


                    &lt;h2&gt;&lt;center&gt;&lt;?= &#036;role_name ?&gt;&lt;/center&gt;&lt;/h2&gt;


                    &lt;h5&gt;&lt;?= &#036;dept_name ?&gt;&lt;/h5&gt;


                    &lt;div class=&quot;social-networks&quot;&gt;


                        &lt;a href=&quot;http://www.facebook.com&quot;&gt;&lt;i class=&quot;fa fa-facebook-square&quot;&gt;&lt;/i&gt;&lt;/a&gt;


                        &lt;a href=&quot;http://www.googleplus.com&quot;&gt;&lt;i class=&quot;fa fa-google-plus-square&quot;&gt;&lt;/i&gt;&lt;/a&gt;


                        &lt;a href=&quot;http://www.twitter.com&quot;&gt;&lt;i class=&quot;fa fa-twitter&quot;&gt;&lt;/i&gt;&lt;/a&gt; 


                    &lt;/div&gt;


                &lt;/div&gt;                       





            &lt;/div&gt;


            &#60;&#33;-- /tile widget --&#62;


        &lt;/section&gt;


        &#60;&#33;-- /tile --&#62;





    &lt;/div&gt;


    &#60;&#33;-- /col 4 --&#62;


	





    &#60;&#33;-- col 8 --&#62;


    &lt;div class=&quot;col-md-8&quot;&gt;





        &#60;&#33;-- tile --&#62;


        &lt;section class=&quot;tile transparent&quot;&gt;





            &#60;&#33;-- tile widget --&#62;


            &lt;div class=&quot;tile-widget nopadding color transparent-black rounded-top-corners&quot;&gt;


                &#60;&#33;-- Nav tabs --&#62;


                &lt;ul class=&quot;nav nav-tabs tabdrop&quot;&gt;


                    &lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;#profile-tab&quot; data-toggle=&quot;tab&quot;&gt;Profile&lt;/a&gt;&lt;/li&gt;


                    &lt;li&gt;&lt;a href=&quot;#password-tab&quot; data-toggle=&quot;tab&quot;&gt;Password&lt;/a&gt;&lt;/li&gt;


                &lt;/ul&gt;


                &#60;&#33;-- / Nav tabs --&#62;


            &lt;/div&gt;


            &#60;&#33;-- /tile widget --&#62;





            &#60;&#33;-- tile body --&#62;


            &lt;div class=&quot;tile-body tab-content rounded-bottom-corners&quot;&gt;





                &#60;&#33;-- Tab panes --&#62;                 


                &lt;div id=&quot;profile-tab&quot; class=&quot;tab-pane fade in active&quot;&gt;


                    &lt;form&gt;							


                        &lt;div class=&quot;row&quot;&gt;


                            &lt;div class=&quot;form-group col-md-12 legend&quot;&gt;


                                &lt;h4&gt;&lt;strong&gt;Personal&lt;/strong&gt; Settings&lt;/h4&gt;


                                &lt;p&gt;Your personal account settings&lt;/p&gt;


                            &lt;/div&gt;


                        &lt;/div&gt;





                        &#60;&#33;--form 1--&#62;


                        &lt;div class=&quot;row&quot;&gt;


                            &lt;div class=&quot;form-group col-sm-12&quot;&gt;


                                &lt;label for=&quot;first-name&quot;&gt;Name&lt;/label&gt;


                                &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;name&quot; placeholder=&quot;&lt;?= Yii::app()-&gt;user-&gt;profile-&gt;user_name ?&gt;&quot;&gt;


                            &lt;/div&gt;


                        &lt;/div&gt;





                        &#60;&#33;--form 2--&#62;									


                        &lt;div class=&quot;row&quot;&gt;								


                            &lt;div class=&quot;form-group col-sm-6&quot;&gt;


                                &lt;label for=&quot;user_nric&quot;&gt;Ic Number&lt;/label&gt;


                                &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;ic_no&quot; placeholder=&quot;&lt;?= Yii::app()-&gt;user-&gt;profile-&gt;user_nric ?&gt;&quot;&gt;


                            &lt;/div&gt;








                            &lt;div class=&quot;form-group col-sm-6&quot;&gt;


                                &lt;label for=&quot;staff_no&quot;&gt;Staff No&lt;/label&gt;


                                &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;zip&quot; placeholder=&quot;&lt;?= Yii::app()-&gt;user-&gt;profile-&gt;staff_no ?&gt;&quot;&gt;


                            &lt;/div&gt;


                        &lt;/div&gt;











                        &#60;&#33;--form 5--&#62;


                        &lt;div class=&quot;row&quot;&gt;					


                            &lt;div class=&quot;form-group col-sm-6&quot;&gt;


                                &lt;label for=&quot;email&quot;&gt;E-mail&lt;/label&gt;


                                &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;email&quot; placeholder=&quot;&lt;?= Yii::app()-&gt;user-&gt;profile-&gt;user_email ?&gt;&quot;&gt;


                            &lt;/div&gt;





                            &lt;div class=&quot;form-group col-sm-6&quot;&gt;


                                &lt;label for=&quot;contact_no&quot;&gt;Contact No&lt;/label&gt;


                                &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;phone&quot; placeholder=&quot;&lt;?= Yii::app()-&gt;user-&gt;profile-&gt;user_contact_no ?&gt;&quot;&gt;                     


                            &lt;/div&gt;	   


                        &lt;/div&gt;





                        &#60;&#33;--form 6--&#62;


                        &lt;div class=&quot;row&quot;&gt;


                            &lt;div class=&quot;form-group col-sm-6&quot;&gt;


                                &lt;label for=&quot;avatar&quot;&gt;Profile Image&lt;/label&gt;


                                &lt;div class=&quot;input-group&quot;&gt;


                                    &lt;span class=&quot;input-group-btn&quot;&gt;


                                        &lt;span class=&quot;btn btn-primary btn-file&quot;&gt;


                                            &lt;i class=&quot;fa fa-upload&quot;&gt;&lt;/i&gt;&lt;input type=&quot;file&quot; multiple=&quot;&quot;&gt;


                                        &lt;/span&gt;


                                    &lt;/span&gt;


                                    &lt;input type=&quot;text&quot; class=&quot;form-control&quot; readonly=&quot;&quot; id=&quot;profile image&quot;&gt;


                                &lt;/div&gt;


                                &lt;span class=&quot;help-block&quot;&gt;Allowed files: gif, png, jpg. Max file size 1Mb&lt;/span&gt;


                            &lt;/div&gt;


                        &lt;/div&gt;





                        &#60;&#33;--form 7--&#62;


                        &lt;label for=&quot;bio&quot;&gt;Bio&lt;/label&gt;


                        &lt;div class=&quot;profile-form&quot;&gt;


                            &lt;textarea class=&quot;form-control&quot; placeholder=&quot;Say something?&quot; rows=&quot;5&quot;&gt;&lt;/textarea&gt;


                            &lt;div class=&quot;post-toolbar&quot;&gt;


                                &lt;a href=&quot;#&quot; title=&quot;Add File&quot;&gt;&lt;i class=&quot;fa fa-paperclip&quot;&gt;&lt;/i&gt;&lt;/a&gt;


                                &lt;a href=&quot;#&quot; title=&quot;Add Image&quot;&gt;&lt;i class=&quot;fa fa-camera&quot;&gt;&lt;/i&gt;&lt;/a&gt;


                            &lt;/div&gt;


                        &lt;/div&gt;





                        &#60;&#33;--form 8--&#62;								


                        &lt;div class=&quot;row&quot;&gt;


                            &lt;div class=&quot;col-sm-offset-4 col-sm-8&quot;&gt;


                                &lt;button type=&quot;save&quot; name=&quot;save&quot; class=&quot;btn btn-greensea&quot;&gt;Save&lt;/button&gt;


                                &lt;button type=&quot;reset&quot; class=&quot;btn btn-red&quot;&gt;Reset&lt;/button&gt;


								


                            &lt;/div&gt;


                        &lt;/div&gt;





                    &lt;/form&gt;





                &lt;/div&gt;








                &#60;&#33;--tab2--&#62;


                &lt;div id=&quot;password-tab&quot; class=&quot;tab-pane fade in&quot;&gt;


                    &lt;form&gt;					


                        &lt;div class=&quot;row&quot;&gt;


                            &lt;div class=&quot;form-group col-md-12 legend&quot;&gt;


                                &lt;h4&gt;&lt;strong&gt;Security&lt;/strong&gt; Settings&lt;/h4&gt;


                                &lt;p&gt;Secure your account&lt;/p&gt;


                            &lt;/div&gt;


                        &lt;/div&gt;





                        &#60;&#33;--form 1--&#62;	


                        &lt;div class=&quot;row&quot;&gt;


                            &lt;div class=&quot;form-group col-sm-6&quot;&gt;


                                &lt;label for=&quot;username&quot;&gt;Username&lt;/label&gt;


                                &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;username&quot; value=&quot;&quot; &gt;


                            &lt;/div&gt;





                            &lt;div class=&quot;form-group col-sm-6&quot;&gt;


                                &lt;label for=&quot;password&quot;&gt;Current Password&lt;/label&gt;


                                &lt;input type=&quot;password&quot; class=&quot;form-control&quot; id=&quot;password&quot; value=&quot;&quot;&gt;


                            &lt;/div&gt;


                        &lt;/div&gt;





                        &#60;&#33;--form 2--&#62;


                        &lt;div class=&quot;row&quot;&gt;


                            &lt;div class=&quot;form-group col-sm-6&quot;&gt;


                                &lt;label for=&quot;new-password&quot;&gt;New Password&lt;/label&gt;


                                &lt;input type=&quot;password&quot; class=&quot;form-control&quot; id=&quot;new-password&quot;&gt;


                            &lt;/div&gt;





                            &lt;div class=&quot;form-group col-sm-6&quot;&gt;


                                &lt;label for=&quot;new-password-repeat&quot;&gt;New Password Repeat&lt;/label&gt;


                                &lt;input type=&quot;password&quot; class=&quot;form-control&quot; id=&quot;new-password-repeat&quot;&gt;


                            &lt;/div&gt;


                        &lt;/div&gt;





                        &#60;&#33;--form 3--&#62;			


                        &lt;div class=&quot;row&quot;&gt;


                            &lt;div class=&quot;col-sm-offset-4 col-sm-8&quot;&gt;


                                &lt;button type=&quot;save&quot; name=&quot;save&quot; class=&quot;btn btn-greensea&quot;&gt;Save&lt;/button&gt;


                                &lt;button type=&quot;reset&quot; class=&quot;btn btn-red&quot;&gt;Reset&lt;/button&gt;


                            &lt;/div&gt;


                        &lt;/div&gt;	


                    &lt;/form&gt;														 


                &lt;/div&gt;


                &#60;&#33;-- /tile body --&#62;





            &lt;/div&gt;


            &#60;&#33;-- /col 8 --&#62;





        &lt;/section&gt;


        &#60;&#33;-- /tile --&#62;











    &lt;/div&gt;


    &#60;&#33;-- /row --&#62;





&lt;/div&gt;  


&#60;&#33;-- /content container --&#62;





&#60;script&gt;





    //initialize file upload button function


    &#036;(document)


            .on('change', '.btn-file :file', function () {


                var input = &#036;(this),


                        numFiles = input.get(0).files ? input.get(0).files.length : 1,


                        label = input.val().replace(/&#092;&#092;/g, 'http://tattek.sk/').replace(/.*&#092;//, '');


                input.trigger('fileselect', [numFiles, label]);


            });





    &#036;(function () {





        &#036;('#make-call a').click(function () {


            &#036;(this).toggleClass('active');


        });





        &#036;('.post-toolbar a').tooltip({


            placement: 'top',


            trigger: 'hover',


            html: true,


            container: 'body'


        });





        &#036;('.task-controls .mark').click(function () {


            &#036;(this).toggleClass('marked');


        });





        //accordion class active toggling


        &#036;('.task-list .panel-heading .task-toggle').click(function () {





            var &#036;previous = &#036;('.task-list .panel.active');





            &#036;previous.removeClass('active');


            &#036;(this).parent().parent().stop().addClass('active');





            if (&#036;(this).parent().parent().hasClass('active')) {


                &#036;previous.removeClass('active');


            }


        });





        //chosen select input


        &#036;(&quot;.chosen-select&quot;).chosen({disable_search_threshold: 10});





        //initialize file upload button


        &#036;('.btn-file :file').on('fileselect', function (event, numFiles, label) {





            var input = &#036;(this).parents('.input-group').find(':text'),


                    log = numFiles &gt; 1 ? numFiles + ' files selected' : label;





            console.log(log);





            if (input.length) {


                input.val(log);


            } else {


                if (log)


                    alert(log);


            }


        });





    })





&lt;/script&gt;

what coding that i must put in contorller?

i want the save button function and update from database.

hey !

Don’t forget to put your code between [code ] your code [/code ] (without space after “code”)

this wiki show you how to use ajax with Yii :

Yii 1.1: Update content in AJAX with renderPartial

hope this will help you.