NLSClientScript prevents duplicated linking of javascript files when updating a view by ajax, when eg. paging or sorting a gridview, ajax-submitting a form or any custom ajax-updating a part of a view.
The extension does not prevent the multiple loading of CSS files. I simply couldn't find a way to manage it clearly (too long to explain here).
The issue what this extenson fights is for example when you render Jui widgets by CHtml::ajax, the js files used by the widget will be loaded as many times as you render such a widget in a view. The unnecessary bandwidth usage is the smaller problem, the bigger problem is eg. loading jquery.js again may reset some js objects set by previously loaded ui-related js files. That can cause js errors and the view may stop working.
Using NLSClientScript helps to avoid it all.
From 6.0, it optionally merges/caches + minifies the registered js and css files.
6.3
6.21
6.2 (see the updated Usage)
6.1 (see the updated Usage)
6.0 (see the updated Usage)
5.0 (see the updated Usage)
4.0 RC
3.6
3.5 (see the updated Usage)
3.4
3.3
3.2
3.1
3.0
2.1
2.0
1.3
1.2
If you interest the details, see the comments in the source.
Yii 1.x
The extension identifies the scripts by its paths so it does not prevent to load the same script content from different paths. So eg. if you published the same js file into different asset directories, NLSClientScript considers those to be different and won't prevent to load those several instances.
The extension doesn't watch wether a js/css file has been changed. If you set the merge functionality and some file changed, you need to delete the cached merged file manually, otherwise you'll get the old merged one.
1 . Set the class for the clientScript component in /protected/config/main.php, like
... 'components'=>array( ... 'clientScript' => array( 'class' => 'your.path.to.NLSClientScript', //'excludePattern' => '/\.tpl/i', //js regexp, files with matching paths won't be filtered is set to other than 'null' //'includePattern' => '/\.php/', //js regexp, only files with matching paths will be filtered if set to other than 'null' 'mergeJs' => true, //def:true 'compressMergedJs' => false, //def:false 'mergeCss' => true, //def:true 'compressMergedCss' => false, //def:false 'mergeJsExcludePattern' => '/edit_area/', //won't merge js files with matching names 'mergeIfXhr' => true, //def:false, if true->attempts to merge the js files even if the request was xhr (if all other merging conditions are satisfied) 'serverBaseUrl' => 'http://localhost', //can be optionally set here 'mergeAbove' => 1, //def:1, only "more than this value" files will be merged, 'curlTimeOut' => 10, //def:10, see curl_setopt() doc 'curlConnectionTimeOut' => 10, //def:10, see curl_setopt() doc 'appVersion'=>1.0 //if set, it will be appended to the urls of the merged scripts/css ) ... ) For more information about the parameters, see the header comment of NLSClientScript.php.
2 . use Yii::app()->getClientScript() by the standard way to link js and css files/snippets
Example:
$cs = Yii::app()->getClientScript(); $systemJsPath = Yii::app()->getAssetManager()->publish( Yii::getPathOfAlias( 'system.web.js' ), false, -1, false ); $cs->registerScriptFile( $systemJsPath . '/ext/yii_ext.js'); $cs->registerScriptFile( $systemJsPath . '/ext/plugins/jquery.form.js');
3 . DOES NOT WORK FROM v5.0: If you want to do a custom ajax request with "dataType"="json" and there are some fields of the response you want to update your page with, filter that part "by hand" with $.ajaxSettings.dataFilter like eg.:
echo CHtml::ajaxLink('custom update', array('/site/testupdate'), array( 'dataType' => 'json', 'success'=>'js:function(data){ $("#cont").html($.ajaxSettings.dataFilter(data.content)); }', ));
Total 20 comments
Well, i've just have seen that http://code.google.com/p/cssmin/ is able to merge the @import-ed css files into the parent one by its documentation. That's indeed a feature what makes me consider to use it in a later version some way. Thanks for the tip...
Hi, i'm not sure the problem relates to the minification. When the extension merges the files, it publishes the merged one into the /assets dir. That way, if you use relative url in your @import (like "dir/xy.css" or "../dir/xy.css"), that will usually break.
Have you tried to use url like "/dir/xy.css" in the @import rule (relative to the server root) or perhaps full absolute url?
About cssmin, i try to keep my extension lightweight, without merging 3rd parties into being 10x large than the extension itself, unless it is really necessary.
Thanks, nice extension, but import function of css not work after minify. May be you should use full css minifier (e.g http://code.google.com/p/cssmin/) not simple css minifier?
yes i'm aware, will fix soon. Till then set that param explicitly in config.php
$_SERVER['REQUEST_SCHEME'] is not always available, and will throw undefined index:
Omitting it is safe in most browsers, but I haven't checked how it affects other parts of your code:
Hello nlac, Thanks so much for such work, was totally a savior for me.
I'm reporting that there's a conflict between nlsclientscript & Minscript extension http://www.yiiframework.com/extension/minscript/
The js file is loaded again & duplicated after the first ajax request.. thats because the normUrl function of nlsclientscript takes the minscript url in the form of:
& returns
Notice the '&' at the end
The suggested fix would be to modify normUrl function, replacing
With
Even with the extension when using AJAX, the Bootstrap CSS files are reloaded the page.
Hi
I just tried version 5.0 after previously using v3.6.
I use it as in the example: $("#cont").html($.ajaxSettings.dataFilter(data.content)); . Apparently this does not work anymore ad 'dataFilter' is unknown in Chrome (for example) when using 5.0. It appears that 'dataFilter' is defined only when using 'IE'.
Using version 5 seems to work as expected in IE7/8 and Chrome. I upgraded after IE7/8-issues in version 3.3.
Only thing I would like to see is proper DocBlock commenting on variables and functions in your extension.
And actually, maybe a better name because "NLSClientScript" doesn't say anthing about what it does, but something like "AjaxCompatibleClientScript" or maybe just "EClientScript" or "XClientScript" is better.
You are right. My 'static' pages register a small js script. But how you said they don't need jquery.
I register now jquery for all my sites in my main layout view.
I use the google lib and I think it is no problem for performance.
I guess that is not a static page where the issue occurs. On the pages where no script file registered, the component renders nothing. On your "static page" some script is registered requires no jquery, that's when the issue occurs.
So yes, for now all pages need jquery registered since the component uses it. I'll fix in the next release to register jquery automatically in every case.
I have install version 5.0.
It works on all my pages where jquery is included.
But on my static pages (e.g. impressum page) where I need no jquery there I get the error 'jquery undefined'.
What can I do. Must I include on all my pages jquery or can I do this with exclude pattern ?
test results about usages of the latest version are welcome
IE7 has a problem with the "src" attribute of the script tag, as can be seen in http://bugs.jquery.com/ticket/11404
So the update of the grid returns the alert "Parser error".
The solution to the problem would be to change the script to:
is #7098 fixed in 3.6 version? I am still facing the problem in filtering in the cgridview
I have problems. When the extension is enabled the HTML content is being duplicated in ajax requests.
Detail: the problem does not occur in IE, only in Firefox and Chrome. And only occurs when the return of Ajax is the complete page, including the HTML tag.
The javascript code behaves completely different in IE vs Firefox and Chrome.
The developer needs to fix the default behavior on all browsers.
A workaround for Firefox and Chrome (but certainly not the ultimate solution):
hoplayann thanks for the report, i'll check and will release a new version in a few days, there's also an other issue needs to be fixed.
Hello,
I am using version 3.6 of your extension in my Yii project.
It seems that the selection of script tags in the HTML source fails for some reason in Internet Explorer 7. The looping through the SCRIPT or LINK elements is the place where we have now added an extra test case, to be sure that there is at least a not empty SRC or HREF attribute defined. (see added code below)
And I had to add the code again in the other loop :
Is it possible that the jquery selector is not precise enough ?
Please let me know if there would be a fix for that issue in your next revision.
Yann
fixed in 3.6
Here is returning an error warning that "head" is not defined.
This piece of code:
should be?
Leave a comment
Please login to leave your comment.