Jquery Inside Cjuidialog

Is their any way to display jquery inside cjuidialog because in my case it is not working. Following is my code to display jquery but it doen’t display anything

/** Start Widget **/




        'title'=>'Dialog box - Animation',

		'modal' => true,















        'StaticTab '=>'Content for tab 1',

        'StaticTab With ID'=>array('content'=>'Content for tab 2 With Id' , 'id'=>'tab2'),


         //following tab should show jquery jqplot meter(it is working if I use yiistrap modal but not in this case)

        'Render Partial'=>array('id'=>'test-id','content'=>$this->renderPartial('_meter', true, true)),

        // panel 3 contains the content rendered by a partial view



    // additional javascript options for the tabs plugin








/** End Widget **/

echo CHtml::button('Open Dialog', array(

   'onclick'=>'$("#dialog-animation").dialog("open"); return false;',




Please can you attach your output.


paste your error…if you are getting error


channdran nepolean

I am not getting any error it’s just jquery is not working inside CJuidialog while same query is working fine if I display normally on a page or inside modal but not in Cjuidialog. Do you have any example jquery inside dialog window.

What exactly is not working? The ajax loaded tab?

Do you see the ajax request in firebug? Also, often in ajax-request you have a duplicated id problem, try to give a unique id to the ajax-loaded components

'Render Partial'=>array('id'=>'test-id','content'=>$this->renderPartial('_meter', true, true)),

Following code should show jqplot graph but it is not showing anything. Also this jquery code doesn’t work

'content'=>'<p><script> $(document).ready(function(){										$("button").click(function(){$("#hello").animate({left:\'250px\'})<img src='http://www.yiiframework.com/forum/public/style_emoticons/default/wink.gif' class='bbc_emoticon' alt=';)' />;


			<button>Start Animation</button>

			<div id="hello" style="background:#98bf21;height:100px;width:100px;position:absolute;"> </div>

			</p>', 'id'=>'tab2'


Please can you change the below code and try this


sometime this true can be problem


chandran nepolean

$this->renderPartial(’_meter’)) No this is also not working.


Tab2 id is used twice. May be that is a problem.

Can you paste your code _meter content here… it will help to analyse ur code.


chandran nepolean

Following is my _meter.php. But this code is working fine if I display it on normal page or inside modal window.

Yii::app()->clientScript->registerScript('meter'," $(document).ready(function(){    

s1 = [Math.floor(Math.random()*(401)+100)];      

plot3 = $.jqplot('meter',[s1],{        

seriesDefaults: {            

renderer: $.jqplot.MeterGaugeRenderer,            

rendererOptions: {                

min: 100,                

max: 500,                

intervals:[200, 300, 400, 500],                

intervalColors:['#66cc66', '#93b75f', '#E7E658', '#cc6666'], 			   smooth: true, 			   

animation: {show: true }}}});    

$('a[href=\"#test-id\"]').on('shown', function(e) {                 plot3.replot();}); 	

setInterval(function () {         

s1 = [Math.floor(Math.random() * (401) + 100)];         

plot3.series[0].data[0] = [1,s1];         

plot3.replot();}, 1000);}}); ");


where you have imported jqplot js…Please can you send me the script.

why are you not using this widget ?



chandran nepolean

The reason I not using this widget is because I couldn’t find any option of replot()(I had asked question about this earlier in forum). Normally if I have to display jqplot graph on a page the widget does the job but if I want to display the jqplot graph in dialog window or yiistrap modal window then I have to call replot() and then only graph is displayed. That is why I am calling this function in my code

$('a[href=\"#test-id\"]').on('shown', function(e) {plot3.replot();});


Due to this reason I decided to directly use jqplot.js file for plotting graph. Also is their any advantage of using widget over jqplot.js file? I think only advantage is that widget makes coding job easier.

You can download jqplot.js and other related js file from [post=‘http://www.jqplot.com/’]Jqplot[/post]


Where you are importing this Js. Its important. Please write ur line where you include this JS.


chandran nepolean

in layout/main.php

$cs = Yii::app()->clientScript; $cs->registerScriptFile($baseUrl . '/jquery.jqplot.min.js'); $cs->registerCssFile($baseUrl . '/jquery.jqplot.min.css');


you missed to load below file… load and try

<script type="text/javascript" src="//cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.meterGaugeRenderer.js">

<link type="text/css" rel="stylesheet" href="//cdn.jsdelivr.net/jqplot/1.0.8/jquery.jqplot.css" />

<script type="text/javascript" src="//cdn.jsdelivr.net/jqplot/1.0.8/jquery.jqplot.js"></script>

<link type="text/css" rel="stylesheet" href="//cdn.jsdelivr.net/jqplot/1.0.8/jquery.jqplot.min.css" />

<script type="text/javascript" src="//cdn.jsdelivr.net/jqplot/1.0.8/jquery.jqplot.min.js"></script>


chandran nepolean

I had include that files. I think you are not understanding my point. Using same code _meter.php I am able to display graph correctly on normal page or yiistrap modal window but not in cjuidialog. And not only jqplot graph even this simple jquery is not working in cjuidialog but working otherwise when displayed on nomral page or yiistrap modal.

$(document).ready(function(){                                                                    $("button").click(function(){$("#hello").animate({left:\'250px\'})<img src='http://www.yiiframework.com/forum/public/style_emoticons/default/wink.gif' class='bbc_emoticon' alt=';)' />;                         


<button>Start Animation</button>                          

<div id="hello" style="background:#98bf21;height:100px;width:100px;position:absolute;"> </div>

can anyone give me example of a simple jquery running inside cjuidialog. For example jquery like this


$(document).ready(function(){ 										$("button").click(function(){ 											$("#hello").animate({left:\'250px\'}); 											}); } ); 			


<button>Start Animation</button>  			

<div id="hello" style="background:#98bf21;height:100px;width:100px;position:absolute;"> </div>

Often graphical plugins have to be initialized on a visible div, you should call the initiailzation after the opening of the dialog

I am putting div like this

<div style="width: 250px; height: 175px; position: center;" id="meter"></div>

but it still not working.