Jquery Inside Cjuidialog

prat · October 9, 2013, 6:16am

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 **/


$this->beginWidget('zii.widgets.jui.CJuiDialog',array(


    'id'=>'dialog-animation',

    'options'=>array(


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

		'modal' => true,


        'autoOpen'=>false,


        'show'=>array(


                'effect'=>'blind',


                'duration'=>1000,


            ),


        'hide'=>array(


                'effect'=>'explode',


                'duration'=>500,


            ),           


    ),


));

			

$this->widget('zii.widgets.jui.CJuiTabs',array(

    'tabs'=>array(

        '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

        'AjaxTab'=>array('ajax'=>$this->createUrl('ajax')),

    ),

    // additional javascript options for the tabs plugin

    'options'=>array(

        'collapsible'=>true,

    ),

    'id'=>'MyTab-Menu',

));

    


$this->endWidget('zii.widgets.jui.CJuiDialog');


/** End Widget **/


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


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


));


?>

chandrantwins · October 9, 2013, 2:49pm

Hi,

Please can you attach your output.

or

paste your error…if you are getting error

Thanks

channdran nepolean

prat · October 10, 2013, 6:10am

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.

zaccaria · October 10, 2013, 6:43am

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

prat · October 10, 2013, 7:26am


'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=';)' />;

			</script>

			<button>Start Animation</button>


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

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

chandrantwins · October 10, 2013, 7:51am

prat:


'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=';)' />;

			</script>

			<button>Start Animation</button>


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

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

Hi,

Please can you change the below code and try this

$this->renderPartial(’_meter’))

sometime this true can be problem

Thanks

chandran nepolean

prat · October 10, 2013, 7:54am

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

chandrantwins · October 10, 2013, 8:07am

Hi,

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.

Thanks

chandran nepolean

prat · October 10, 2013, 9:00am

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);}}); ");

chandrantwins · October 10, 2013, 10:57am

Hi,

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

why are you not using this widget ?

http://www.yiiframework.com/extension/jqplot/

Thanks,

chandran nepolean

prat · October 10, 2013, 11:41am

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]

chandrantwins · October 10, 2013, 11:49am

Hi,

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

Thanks

chandran nepolean

prat · October 10, 2013, 11:57am

in layout/main.php


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

chandrantwins · October 10, 2013, 1:13pm

Hi,

you missed to load below file… load and try

Thanks

chandran nepolean

prat · October 10, 2013, 1:24pm

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=';)' />;                         

</script>                         

<button>Start Animation</button>                          

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

prat · October 11, 2013, 8:58am

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


<script>  									

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

</script> 			

<button>Start Animation</button>  			

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

zaccaria · October 11, 2013, 9:33am

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

prat · October 11, 2013, 9:36am

I am putting div like this


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

but it still not working.