Problem with jquery and Highslide

Archives Yii 1.0.x Discussions
1

Hello…

I am using highslide to open a popup to show some information after pressing a button. I have in that popup the following instruction:


echo CHtml::ajaxSubmitButton('Enviar', $url, $opciones);

That causes to generate a button that initiates an Ajax request. The problem is that if I load the popup page independently, all works well, but if I load the page inside the popup using Highslide, jquery calls doesn’t work.

By reading in Highslide page for a similar problem, that is caused because jquery functions are loaded in "ready" event. In that moment, Highslide is not completely loaded.

I verified this when I saw the page source code. This appeared:




<script type="text/javascript">

/*<![CDATA[*/

jQuery(document).ready(function() { alert('hola!');

jQuery('#yt0').click(function(){jQuery.ajax({'type':'POST','beforeSend':function() {

                                            var nombre = document.getElementById("nombre").value.replace(/ /g, "");

Is there a way to modify this fragment of code, without hacking the Yii Framework core files?




jQuery(document).ready(function()

I want something like:




hs.Expander.prototype.onAfterExpand = function()

Any help or advice will be greatly appreciated

Thanks

Jaime

2

I don’t know Highslide but perhaps you could do something like this (replace the alert with code)




  $script = 'function handler() {alert("Highslide should be loaded now");} ';

  Yii::app()->clientscript->registerScript('handler', $script, CClientScript::POS_END);

  

  $script = 'setTimeout(handler, 100); ';

  Yii::app()->clientscript->registerScript('delay', $script, CClientScript::POS_READY);

/Tommy

3

This is working part of code required to use highslide:




$cs = Yii::app()->clientScript;

$baseUrl = Yii::app()->request->baseUrl;

$cs->registerCoreScript('jquery');

$cs->registerScriptFile($baseUrl . '/js/highslide/highslide.js', CClientScript::POS_HEAD);

$cs->registerScriptFile($baseUrl . '/js/highslide/highslide_eh.js', CClientScript::POS_HEAD);

$cs->registerScriptFile($baseUrl . '/js/jquery.clipboard-2.0.1/jquery.clipboard.js', CClientScript::POS_HEAD);

$params = array(

  'BASEURL' => $baseUrl,

  'HTTPHOST' => $_SERVER['HTTP_HOST']

);

$script = 'var PARAMS = eval(' . CJavaScript::jsonEncode($params) . ');';

$cs->registerScript('widget-params', $script, CClientScript::POS_BEGIN);


$script = 'hs.graphicsDir = PARAMS.BASEURL+\'/js/highslide/graphics/\';' . "\n";

$script .= 'hs.outlineType = \'rounded-white\';' . "\n";

$script .= 'hs.showCredits = false;';

$cs->registerScript('hislide-middle', $script, CClientScript::POS_BEGIN);

$script = 'addHighSlideAttribute();';

$cs->registerScript('hislide-end', $script, CClientScript::POS_READY);

// css

$cs->registerCSSFile($baseUrl . '/js/highslide/highslide.css');

Use it for highslide and should work.

Most important is to change line:




$cs->registerScript('hislide-end', $script, CClientScript::POS_END);

to




$cs->registerScript('hislide-end', $script, CClientScript::POS_READY);

For me its working now, after many hours of searching it.