Xupload Extension In Modal Popup

Hey All,

I am little bit new to yii.

I am using modal pop up for the form submission.

I also want to upload image in the same form.

I am using xupload extension which works fine with normal form (i.e. not using modal popup), but not work with popup.

If I am using modal pop up and press upload then page is refreshing, and the same form will open in the page.

Any help will be appriciated.

Thanks.

This sounds exactly like what I am experiencing - works fine without the modal dialog but fails to load and display the table holding the file information and processing buttons when within the modal dialog.

My team lead has suggested as a work-around to pre-load the hidden pop-up dialog with the widget instead of using an ajax response to load it since it might be affected by the difference between render() and renderPartial(). I will try that next but thought I would go ahead with this post to see if there is another solution.

In case it helps in seeing what might be wrong - here is my stripped down code (I have both dialog and non-dialog implementations within the same web page just for comparison):

controllers/TestController.php:




class TestController extends Controller

{

	public $assetDir;


	public function init()

	{

		$basePath=Yii::getPathOfAlias('application.modules.tester');

		$this->assetDir=Yii::app()->getAssetManager()

			->publish($basePath . '/assets/');

	}


	public function actions()

    {

        return array(

            'upload'=>array(

                'class'=>'ext.xupload.actions.XUploadAction',

                'path' =>Yii::app() -> getBasePath() . "/../uploads/",

                'publicPath' => Yii::app() -> getBaseUrl() . "/uploads/"

            ),

        );

    }


	public function actionIndex()

	{

		Yii::import("ext.xupload.models.XUploadForm");

		$model = new XUploadForm;

		$this->render('index',array('model'=>$model,));

	}


	public function actionAddFile()

	{

		Yii::import("ext.xupload.models.XUploadForm");

		$model = new XUploadForm;

		$this->renderPartial('/test/uploadFile',array('model'=>$model,));

	}

}



views/test/index.php:




<div class="container">

	<div>

		<a href="#" id="add-new-file" class="btn btn-success">Choose file</a>

	</div>

	<p />

	<div style="margin-left: 1em;">

<?php

		$this->widget('ext.xupload.XUpload', array(

						'url' => Yii::app()->createUrl("/tester/test/upload"),

				        'model' => $model,

				        'attribute' => 'file',

		                'multiple' => false

		));

?>

	</div>

</div>


<div class="modal fade" id="addNewFile" aria-hidden="true" role="dialog"></div>

<script src="<?php echo $this->assetDir; ?>/js/test.js"></script>



assets/js/test.js:




$(document).ready(function() {

	$("#add-new-file").bind('click',addFileDialog);


	function addFileDialog(event,ui) {

		var $target = $('#addNewFile');

		if (! $target) return false;


		$.post('test/addFile')

			.done(function( data ) {

				$target.empty().append( data );

				$target.modal("show");

			});


		return false;

	}

});



views/test/uploadFile.php:




<div class="modal-dialog">

	<div class="modal-content">

		<div class="modal-header">

			<button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>

			<h4 id="editName" class="modal-title">Submit New List</h4>

		</div>


		<div class="modal-body">

<?php

				$this->widget('ext.xupload.XUpload', array(

								'url' => Yii::app()->createUrl("/tester/test/upload"),

				                'model' => $model,

				                'attribute' => 'file',

				                'multiple' => false

				));

?>

		</div>

	</div>

</div>