Jquery In Views

I’m sure this is ignorance of how 2.0 works, but the following script:




<script>

$(document).ready(function() {

});

</script>



results in the dollar sign as undefined in a view, but works fine in the main layout. The view is a simple echo "hello" call.

Also, I want to use jQuery UI, but I wasn’t sure how or where to add it or register it. Is the documentation ready for this yet?

Thanks for any leads. Yii 2.0 is looking great!

https://github.com/yiisoft/yii2/blob/master/docs/guide/assets.md

Thank you for the pointer. I read that section and others over several times. Please don’t take this as harsh criticism, because I think Yii is amazing and I fully appreciate all the volunteer effort and intelligent design that has gone into it. But I can’t follow the documentation regarding assets at all. (I’ve been a developer for 30 years, 15 using PHP and I’ve been using Yii since the very first release.)

I installed the basic app and it works great out of the box, as long as I don’t try to use jquery in any of the views. I added these lines to my view to see if it would help:


use app\assets\AppAsset;

AppAsset::register($this);

It didn’t change anything. I tried adding ‘yii\web\JqueryAsset’ to the $depends array in AppAsset.php to no avail also. The jquery.js file is clearly being loaded in the javascript debug console, and I can reference it successfully in the main layout, but not the view. I have the general sense from the documentation that each view page now needs to have something in it that tells it to recognize jquery, but I can’t see what that could be, especially since it has been loaded.

Thanks again for the help, any for other pointers to code examples you might be able to provide. I’m looking forward to an update to Larry Ullman’s book!

P.S. I also added these test lines:





$this->registerJs('alert("hello");', \yii\web\VIEW::POS_HEAD);


$this->registerJs('$(document).ready(function() { alert("hello"); });', \yii\web\VIEW::POS_HEAD);



The first line works, but the second one still flags the $ as unrecognized. If I change to POS_END, it is recognized, but I can’t see how this can be used to add long scripts. Some of my view pages have class objects with multiple functions and embedded PHP variables.

In your page source, do you see the inclusion of jquery.js? Is this included before your custom js code?

Thank you Qiang. jQuery.js is included, but after the custom code from the view.

You have two choices: 1. register your custom js in POS_READY; 2. set the position of JqueryAsset to be POS_HEAD. I recommend 1.

Thank you. I see how that works now. I’m not sure how to work with complex js scripts that use embedded PHP, though. One of the patterns I use in views goes something like this:





<script>

	var MyObject = {

		anAttribute: 42,


		aMethod: function () {

			var aPhpVar = <?=json_encode($aPhpValue)?>;

			var anotherVar = "<?=$aPhpString?>";

			$("#list").sortable();

		},

		anotherMethod: function() {

			<?php if ($someFlag) { ?>

			MyObject.aMethod();

			<?php } ?>

		}

	};

</script>



There may be many attributes and methods in MyObject, and it cannot be a simple javascript file because of the embedded PHP. This works great in the current version of Yii. I have files named like MyObject.js.php that are rendered within views, and the IDE (PhpStorm) does great formatting and syntax checking on those files.

To do this with the registration functions I think I would have to make the whole javascript a string, and replace the <?= =?> constructs with string concatenation. That will mean that I cannot take advantage of the syntax checking and formatting of an IDE.

I guess I would need to use the first method you mentioned in order for that to work, which I guess is a performance hit?

You can use code like this: [size=2]$this[/size][color=#666600][size=2]->[/size][/color][size=2]registerJs[/size][color=#666600]size=2;[/size][/color]

Ah! Very cool. Yii is always a few steps ahead of me in anticipation of needs! Thanks to you and samdark very much for your time.

thks… that’s a really nice/useful reco’…

Jquery UI in Yii2 is a separate extension that is not by default included with the yii-2 basic/advanced apps. For adding it to your application, you need to add the following line to the require section of your composer.json file and do a composer update.




"yiisoft/yii2-jui": "dev-master"



You can then access the jui widgets from the yii\jui\ namespace.

Great. Thanks!

I’m sure i’m missing something, but I’m trying to figure the correct version, source, order, and placement of the following with Yii2 basic template and it’s like playing an impossible game of sudoku:

  • bootstrap css & js

  • jquery js

  • jquery-ui

  • yii.js

  • site (and other needed js calling jquery)

I’ve tried cdn-hosted jquery/jquery ui, yii appassets, directly calling versions in assets folder, js in views, in main layout top and bottom, with duplicate calls, versions, etc… but I can never get everything to work together.

Can someone suggest a best approach for this?

Thanks

Well, either you’re using asset bundles and specifying dependencies or you’re turning off assets and using something like grunt and gulp.

Thanks… went back to the drawing board and tried putting everything in asset bundles again (and in what I thought was the correct order), went through all jquery usages and everything seemed to work. For some reason (that I dont fully understand yet) i had to change all references to "$" to "jQuery" in order to get things working.

Thanks for the help.