Yii and jquery and javascript inclusion...confused

Question

Crossposting from http://www.yiiframework.com/forum/index.php/topic/37313-confused-about-jquery-and-script-inclusion-handling/ but sometimes people answer here more rapidly...

I am totally confused about Yii's handling of jquery and other javascript file inclusion.

This was working:

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery('#Event_recuring_nature, #Event_venue, #Event_expected_attendance, #Event_age_group, #Event_state, #Event_gender, #Event_ethnicity, #Event_exclusivity, #Package_cash_product_sponsorships, #Event_vanue_signature, #Event_logo_on_step_and_repeat, #Event_inclusion_in_press, #Event_ad_space, #Event_inclusion_in_event_materials, #Package_category_exclusivity, #logo_on_signature, #Event_proposed_events_included, #Event_dependant_on_sponsorship, #Event_sponsorship_type, #Event_attendee_professions, #Event_attendee_income').yaselect();
    });
</script>
<script type="text/javascript" src="/js/libs/jquery-ui-datetimepicker.js"></script>
<script type="text/javascript" src="/js/event_create.js"></script>
<script type="text/javascript" src="/js/slider.js"></script>
<script type="text/javascript" src="/js/other_social.js"></script>
<script type="text/javascript" src="/js/package.js"></script>

while this (which supposedly would be better?) does not:

<?php 
Yii::app()->clientScript->registerScript('create-script', "
    $(function()  {
          $('body').css('overflow-x','hidden');
        $('#Event_recuring_nature, #Event_venue, #Event_expected_attendance, #Event_age_group, #Event_state, #Event_gender, #Event_ethnicity, #Event_exclusivity, #Package_cash_product_sponsorships, #Event_vanue_signature, #Event_logo_on_step_and_repeat, #Event_inclusion_in_press, #Event_ad_space, #Event_inclusion_in_event_materials, #Package_category_exclusivity, #logo_on_signature, #Event_proposed_events_included, #Event_dependant_on_sponsorship, #Event_sponsorship_type, #Event_attendee_professions, #Event_attendee_income').yaselect();
    });

");
?>
<?php Yii::app()->clientScript->registerScriptFile($this->assetsBase.'/js/libs/jquery-ui-datetimepicker.js'); ?>
<?php Yii::app()->clientScript->registerScriptFile($this->assetsBase.'/js/event_create.js'); ?>
<?php Yii::app()->clientScript->registerScriptFile($this->assetsBase.'/js/slider.js'); ?>
<?php Yii::app()->clientScript->registerScriptFile($this->assetsBase.'/js/other_social.js'); ?>
<?php Yii::app()->clientScript->registerScriptFile($this->assetsBase.'/js/package.js'); ?>

I had the directory <app_dir>/js/ for all javascript and created <app_dir>/protected/assets/js as suggested in a post on the yii forum for registerScriptFile (which supposedly handles script inclusion nicely). I ended up having of course duplicated files and I am cleaning up.

The layout has this in the header:

    <?php Yii::app()->clientScript->registerCoreScript('jquery')?>
    <?php Yii::app()->clientScript->registerScriptFile($this->assetsBase.'/js/libs/jquery-ui-1.8.20.custom.min.js')?>
    <?php Yii::app()->clientScript->registerScriptFile($this->assetsBase.'/js/libs/jquery.yaselect.min.js')?>
    <?php Yii::app()->clientScript->registerScriptFile($this->assetsBase.'/js/script.js')?>

and I have this in config/main.php:

// application components
   'components'=>array(
      'clientScript'=>array(
            'packages'=>array(
                 'jquery'=>array(
                     'baseUrl'=>Yii::app()->request->baseUrl . '/js/libs/',
                     'js'=>array('jquery-1.7.2.min.js')
                  )                                       
             )
      ),

(I know that baseUrl is now pointing to /js, but trying with

'baseUrl'=>Yii::app()->basePath . '/assets/js/libs'

also did NOT load jquery at all!!!

PLEASE HELP! I am new to Yii and am loosing my mind on this. Thank you.

EDIT: This is what the code generates:

<script type="text/javascript" src="/js/libs/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/assets/ab20866e/jquery.yiiactiveform.js"></script>
<script type="text/javascript" src="/assets/2dfe5520/js/libs/jquery-ui-datetimepicker.js"></script>
<script type="text/javascript" src="/assets/2dfe5520/js/event_create.js"></script>
<script type="text/javascript" src="/assets/2dfe5520/js/slider.js"></script>
<script type="text/javascript" src="/assets/2dfe5520/js/other_social.js"></script>
<script type="text/javascript" src="/assets/2dfe5520/js/package.js"></script>
<script type="text/javascript" src="/assets/2dfe5520/js/libs/jquery-ui-1.8.20.custom.min.js"></script>
<script type="text/javascript" src="/assets/2dfe5520/js/libs/jquery.yaselect.min.js"></script>
<script type="text/javascript" src="/assets/2dfe5520/js/script.js"></script>

To me, the second line, /assets/ab20866e/jquery.yiiactiveform.js, looks suspicious as having a different asset id...

By 'while this does not' how is it not working? Are you getting any specific errors in your browsers console? are the paths to the js files correct? — Stu
– Stu, Commented Nov 7, 2012 at 16:14
Thanks Stu, [11:22:08.697] TypeError: $.datepicker is undefined @ localhost:8088/assets/2dfe5520/js/libs/… [11:22:09.232] TypeError: $.timepicker is undefined @ localhost:8088/assets/2dfe5520/js/libs/… is what appears in the console. Somehow the inclusion order gets wrong or so... the paths are all fine, I can click on the page source on each of them and they load. I suspect there's something generated! — unsafe_where_true
– unsafe_where_true, Commented Nov 7, 2012 at 16:26
So what finally happens is that the page does not get rendered correctly, and no javascript works (onclick functions etc.) — unsafe_where_true
– unsafe_where_true, Commented Nov 7, 2012 at 16:33

ernie · Accepted Answer · 2014-02-12 16:53:50Z

3

While I don't have your layout file in front of me, it would appear that your layout has $content before the script file registrations.

Because of this, the scripts in your view are loaded, then the scripts in the template. When this happens, the datetimepicker is being loaded, but reports errors as jquery-ui hasn't been loaded yet. Make sure that your template has the scripts loading before $content.

Alternatively, you could force scripts that are loaded in your view to be in the body, as opposed to the head by specifying a position argument, e.g.:

<?php Yii::app()->clientScript->registerScriptFile(Yii::app()->request->baseUrl . '/js/libs/jquery-ui-datetimepicker.js', CClientScript::POS_BEGIN); ?>

edited Feb 12, 2014 at 16:53

answered Nov 7, 2012 at 16:53

ernie

6,37626 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

unsafe_where_true Over a year ago

Yessss!!! Thanks ernie, and thanks to your explanation I also understand what's going on! THANK YOU!

d.raev Over a year ago

not sure what is $this-assetsBase , but in the general case you should put Yii::app()->request->baseUrl before the resource path.

ernie Over a year ago

Ah, that's true . . . I have assetsBase in my base controller, but that's not the Yii standard . . . updating the answer . . .

Brett Gregson · Accepted Answer · 2012-11-07 20:32:54Z

0

Another thing to consider is forcing Yii to load jQuery from the start like so:

cs()->registerCoreScript('jquery');

You can also load jQuery UI like so:

cs()->registerCoreScript('jquery.ui');

I find this solves a lot of registerScriptFile POS_BEGIN/POS_HEAD issues when loading other jQuery libraries and files (as in ernies answer)

answered Nov 7, 2012 at 20:32

Brett Gregson

5,9133 gold badges44 silver badges60 bronze badges

Collectives™ on Stack Overflow

Yii and jquery and javascript inclusion...confused

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related