Hi,
i stumbled upon this during an attempt to replace some form pages with CJuiDialog. I do
<?php $this->beginWidget('zii.widgets.jui.CJuiDialog', array(
'id'=>'#userprof',
'options'=>array(
'title'=>'test',
'height'=>600,
'width'=>600,
'autoOpen'=>false,
'modal'=>true,
'draggable'=>false,
'hide'=>'fade',
'show'=>'fade',
'open'=>'js:function() { $("#userprof").load("'.Yii::app()->createUrl('user/profile',array('dialog'=>'')).'"); }'
),
));
?>
and open the dialog through array(‘onclick’=>’$("#userprof").dialog(“open”); return false;’) which works perfectly. it even loads the form.
if passed the dialog get option the UserController only renderPartials the form page. so only the content is rendered. so now this profile page loaded contains a CActiveForm and a CJuiDatepicker. These require some js files that may not be loaded on the originating page. But CActiveform for example contains a registerCoreScript call, that inserts its script tag in the head of a rendered HTML page.
with processOutput true the html that is loaded into the Dialog div looks like this.
<link rel="stylesheet" type="text/css" href="/yip/assets/e03b1815/css/base/jquery-ui.css" />
<script type="text/javascript" src="/yip/assets/2de4b930/jquery.js"></script>
<script type="text/javascript" src="/yip/assets/2de4b930/jquery.yiiactiveform.js"></script>
<h1>Profile</h1>
//form
<script type="text/javascript" src="/yip/assets/e03b1815/js/jquery-ui.min.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
jQuery('#Birthday_birthday').datepicker({'showAnim':'fold','dateFormat':'dd.mm.yy','changeYear':true,'changeMonth':true,'yearRange':'-100:-14'});
$('#userprofile-form').yiiactiveform({'attributes':[{'inputID':'UserProfile_firstname','errorID':'UserProfile_firstname_em_','status':1},{'inputID':'UserProfile_lastname','errorID':'UserProfile_lastname_em_','status':1},{'inputID':'Birthday_birthday','errorID':'Birthday_birthday_em_','status':1}],'summaryID':'userprofile-form_es_'});
/*]]>*/
</script>
the <link> tag has nothing to do within a div and the script calls for jquery overwrite possibly already existing scripts breaking all scripts on the originating page of the load() call.
What i want is something like a clientScript->renderAjax() or sth. that puts out a body code snippet that loads the required and not already loaded scripts(there must be some kind of check for that, css shouldnt be checked that overhead is acceptable as it might be very complicated to check whether a css class exists) at the end of a supplied html string using the jQuery.getScript call.
this could look like
<script type="text/css">
@import url("additional.css");
</script>
<script type="text/javascript">
/*<![CDATA[*/
jQuery(document).ready(function() {
if (!isloaded(jqueryui)) {
$.getScript('jqueryui');
}
if (!isloaded(activeform)) {
$.getScript('activeform');
}
//rest of scripts like
jQuery('#Birthday_birthday').datepicker({bla});
});
/*]]>*/
</script>
isloaded() might be some sort of
typeof (function that is declared within script)=='function'
or
variable exists or such
that would be a nice feature.
One might also load every existing js and css file on the main layout but i think it would be nice to not have this overhead all the time.
like a register form isnt likely to be used very often.
i would like to hear your opinion about this
best regards keex
PS: i might even imagine some kind of solution using a Yii::app()->clientScript->scriptMap[‘alreadyused.js’] = false; so that every render call constructs an array with already loaded scripts during the last call of that origin(session) and remove them using scriptMap false during a ajax call or such.