How do i use ajax on CHtml::filefield()

Yii 1.1 General Discussion
1

Hi all,

I would like to do a fancybox prompt out to upload image, i have use iframe to solve the page refresh after onSubmit but i still need to update some info at layout, can anyone tell me how to change it using ajax so i can use JSON return to update the info inside the success function? Below is my code

<?php

$form=$this->beginWidget(‘CActiveForm’, array(

'id'=&gt;'seller-form',


'enableAjaxValidation'=&gt;true,


'htmlOptions'=&gt;array('enctype'=&gt;'multipart/form-data','name'=&gt;'productListing','target'=&gt;'upload'),

));

?>

<?php echo CHtml::activeFileField($modelCategories, ‘image’, array(‘onChange’=>‘js:this.form.submit()’)); ?>

2

The answer is a bit tricky, you need to post to the iframe and then collect the JSON response from its document. This is a modified segment of what it worked for me in the past:




      

            // get old target

            var oTarget = form.target;

            form.target = "redirect-target"; // new target the iFrame

           form.submit();

           

            window.iframeHandler = function () {

                var e = $("#redirect-target").get(0);

                form.target = oTarget;

                try {

                    response = (e.contentWindow || e.contentDocument || e).document.body.innerHTML;

                    response = response.replace(/[\f\n\r\t]/g, " ");

                    if (window.opera) response = response.replace(/&quot;/g, '"')

                } catch (f) {

                    response = null

                }

                // parse JSON here

                response = eval('('+response+')');

                if (response.status == 0)

                   // my JSON object has status property 0 is an error

                else {

                    // otherwise update fields with data with an

                    // oncomplete function callback 

                    myOncomplete(response.data);

                    return true

                }

            };

            return true
3

Hi antonio,

I have try to follow your way but it doesn’t work. But from the logic it should be work… i think it might be my code prob, below is my code. The alert is just for checking.

Controller

do something…

echo CJSON::encode(array(

'test'=&gt;&quot;hello&quot;,


'status'=&gt;&quot;1&quot;,

));

View

<iframe id="uploadfile" name="uploadfile" style="display:none;"></iframe>

<?php echo CHtml::activeFileField($modelCategories, ‘date_added’,array(‘onChange’=>‘upload(this)’)); ?>

Script

<script type="text/javascript">

function myOncomplete(response){

alert('yes');

}

function upload(a){

 // get old target 


oTarget = a.form.target;


a.form.target = &quot;uploadfile&quot;; 


a.form.submit();	


window.iframeHandler = function () {


	var e = &#036;(&quot;#uploadfile&quot;).get(0);


	a.form.target = oTarget;





	 try {


                response = (e.contentWindow || e.contentDocument || e).document.body.innerHTML;


                response = response.replace(/[&#092;f&#092;n&#092;r&#092;t]/g, &quot; &quot;);


                if (window.opera) response = response.replace(/&amp;quot;/g, '&quot;')


            } catch (f) {


                response = null


            }





    response = eval('('+response+')');


    if (response.status == 0){


         // my JSON object has status property 0 is an error


    }else {


        // otherwise update fields with data with an


        // oncomplete function callback 


        myOncomplete(response.test);


        return true


    }





};

}

</script>