Use js file's functions in CJuiDialog in view

Hi everyone,

I follow the great tutorial http://www.yiiframework.com/wiki/145/cjuidialog-for-create-new-model/ and It works like wanted. However I would like to put the script part in a file in order to regroup all functions I use.

So in my view I have :


<?php echo CHtml::link('<img id="addImg" src="/myNewApp/images/add.gif" height="15px" width="15px"/>',"",array('onclick'=>"{addElement(); $('#dialogElement').dialog('open');}"));?>

  

<?php

  $this->beginWidget('zii.widgets.jui.CJuiDialog', array( // the dialog

    'id'=>'dialogElement',

    'options'=>array(

        'title'=>'Create Element',

        'autoOpen'=>false,

        'modal'=>true,

        'width'=>550,

        'height'=>470,

    ),

));?>


<div class="divForForm"></div>

 

<?php $this->endWidget();?>


<script type="text/javascript">

function addElement()

{

    <?php echo CHtml::ajax(array(

            'url'=>array('MyElem/create'),

            'data'=> "js:$(this).serialize()",

            'type'=>'post',

            'dataType'=>'json',

            'success'=>"function(data)

            {

                if (data.status == 'failure')

                {

                    $('#dialogElement.div.divForForm').html(data.div);

                          // Here is the trick: on submit-> once again this function!

                    $('#dialogElement.div.divForForm form').submit(addElements);

                }

                else

                {

                    $('#dialogElement.div.divForForm').html(data.div);

                    setTimeout(\"$('#dialogElement').dialog('close') \",3000);

                }

 

            } ",

            ))?>;

    return false;

}

</script>

The above code works well. Now I wrote the function of the script part in a file at /js/functions.js and I replaced :


<script type="text/javascript">

function addElements()

{

    <?php echo CHtml::ajax(array(

            'url'=>array('MyElem/create'),

            'data'=> "js:$(this).serialize()",

            'type'=>'post',

            'dataType'=>'json',

            'success'=>"function(data)

            {

                if (data.status == 'failure')

                {

                    $('#dialogElement.div.divForForm').html(data.div);

                          // Here is the trick: on submit-> once again this function!

                    $('#dialogElement.div.divForForm form').submit(addElements);

                }

                else

                {

                    $('#dialogElement.div.divForForm').html(data.div);

                    setTimeout(\"$('#dialogElement').dialog('close') \",3000);

                }

 

            } ",

            ))?>;

    return false;

}

</script>

by :


<?php Yii::app()->getClientScript()->registerScriptFile(Yii::app()->baseUrl."/js/functions.js"); ?>

but this doesn’t work. The dialog opens well but stays blank.

Do you have an idea about what’s wrong or how could I put the script part of my code in a file.

thanks.

Any Idea ? :)

Hello

Are you’re putting PHP code into a JavaScript file? It won’t work as is, unless maybe you save it as a PHP file, or you tell your webserver to parse JS files as PHP.

Cheers :)

Edit: or copy the resulting JS (jQuery) code from your original files, and paste the JS code into your JS file, especially that you don’t have any PHP-specific feature there.

hey, thanks for answering,

I try the first solution but it didn’t work. If I well understood the second one, you told me to “translate” the function “AddElement()” containing a php ajax request in “full” javascript code right ?

I’m not very at ease with javascript but I’m gonna try :D

It’s rather easy:

  • Just inspect your page (Firefox’s Firebug or Chrome / Safari Inspector for instance), and search for the resulting addElement() function

  • And / or if you want to learn, check that code with jQuery’s Ajax syntax: http://api.jquery.com/jQuery.ajax/

Also, you may want to check Yii’s CHtml::ajax() doc: http://www.yiiframework.com/doc/api/1.1/CHtml#ajax-detail

Ho yep nice tip, I was writing it by hand… giving the same result though but losing some time ^^

Nice help, much thanks :)