To render a view in a dialog via ajax/jquery request.

Yii 1.1 Tips, Snippets and Tutorials
1

I have a problem to render a view in a dialog via ajax/jquery request. I have tried and solved this. I am sharing my solution.




//Text Link:

	echo CHtml::link('Export', '#', array(

        	'onclick'=>'catchBulkId(\'exportTripData\',\'export\'); return false;',

		));

// Java script:




	function catchBulkId(viewFileName,dialogName){

		var fields = $(":checkbox").serializeArray(); //catch all checked boxes from grid

		if (fields.length == 0) 

		{

			alert('Nothing Selected');

		}else { 

			$('#'+dialogName+'-dialog').dialog("open");

			var checkedId ="";

			jQuery.each(fields, function(i, field){

				checkedId = checkedId + field.value + "*";

			});


			jQuery.ajax({'url':'<?php echo Yii::app()->request->baseUrl; ?>/index.php/trip/'+viewFileName+'/?idlist='+checkedId,'cache':false,'success':function(html){jQuery('#'+dialogName+'-dialog').html(html)}});

		}

	}

/script

// The CJuiDialog:




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

	'id'=>'export-dialog',

	'options'=>array(

    	'title'=>'Your Title',

    	'width'=>500,

    	'height'=>250,

    	'autoOpen'=>false,

    	'resizable'=>false,

    	'modal'=>true,

    	'overlay'=>array(

        	'backgroundColor'=>'#000',

        	'opacity'=>'0.5'

    	),

    	'buttons'=>array(

        	'Export'=>'js:function(){ doExport(); }',

        	'Cancel'=>'js:function(){ $(this).dialog("close"); }',

    	),

	),

));

In controller:




$this->renderPartial('yourViewFileName', array(), false, true);

:)

2

NOTE: moved to proper sub-forum

3

Unable to get the desired output in CGridView.

Any code example?

4

The code shown above is the exact working code, used in my project. See the screen shot attached. Pls note that the text link is outside the grid!

Yes, you can do it from a link inside the grid also. Call a javascript function using the Chtml link and put this statement in the JS function definition: $(’#your-dialog-id-here’).dialog(‘open’);




make sure the ajax request return success. 

To check this, change the following:

                    	jQuery.ajax({'url':'<?php echo Yii::app()->request->baseUrl; ?>/index.php/trip/'+viewFileName+'/?idlist='+checkedId,'cache':false,'success':function(html){jQuery('#'+dialogName+'-dialog').html(html)}});


to: 

jQuery.ajax({'url':'<?php echo Yii::app()->request->baseUrl; ?>/index.php/trip/'+viewFileName+'/?idlist='+checkedId,'cache':false,'success':function(html){ alert(html); /* jQuery('#'+dialogName+'-dialog').html(html)*/}});

1866

tripDialogScree.jpeg

5

Actually, What I want is to call JuiDialog from the element of CGridView i.e. Id, name are columns and I want to call the JuiDialog From these elements.

Is there any example?