Hi All,
I have a grid where I have in each row an ajax button which launch a modal window. The content of modal window depends of which button you click on. After close the modal window I should be able to click in another button to open the modal window, but it doesn’t work, it through an exception (TypeError: $(…).html(…).modal is not a function) in the line where I show the modal ($(’#crop-modal’).html(data).modal(‘show’)), it only works the first time, I have to refresh the whole page in order to open another modal window.
Here is my code:
View where I render Grid and Modal (views\post\_form.php):
<!-- for display images in the user session -->
<div class="field" id ="upload-file-tmp">
<?php $this->renderPartial('/postimage/_upload', array('model' => $model->images, 'post_id'=>$model->id)); ?>
</div> <!-- end for display images in the user session -->
<div class="modal hide" id="crop-modal" style="width:800px;" tabindex="-1" role="dialog" aria-hidden="true"><!-- class="modal hide fade" -->
</div>
<script>
$('body').on('click', '#crop-image', function(event){
$.ajax({
'type' : 'POST',
'url' : $(this).attr('href'),
'success' : function(data){
$('#crop-modal').html(data).modal('show');
}
});
event.preventDefault();
});
</script>
Partial view for the Grid and button (views\postImage\_upload.php):
<td>
<?php $this->widget('bootstrap.widgets.TbButton',array(
'id'=>'crop-image',
'buttonType'=>'button',
'type'=>'inverse',
'label'=>'Position',
'size'=>'normal',
'icon'=>'icon-move icon-white',
'url'=>Yii::app()->createUrl('/blog/postimage/modalcrop', array('file'=>$photo->filename, 'id'=>$photo->post_id)),
'htmlOptions'=>array('href'=>Yii::app()->createUrl('/blog/postimage/modalcrop', array('file'=>$photo->filename, 'id'=>$photo->post_id)),
'id'=>'crop-image',
// 'data-toggle'=>'modal',
),
// 'ajaxOptions'=>array('update'=>'#crop-modal', 'url'=>Yii::app()->createUrl('/blog/postimage/modalcrop', array('file'=>$photo->filename, 'id'=>$photo->post_id)),'type'=>'POST',
// ),
)); ?>
</td>
Action which render the content depending of the button you click on (controllers\PostImageController.php):
public function actionModalCrop ()
{
// Yii::log("file: ".$_GET['file'], 'info' );
if( isset( $_GET["file"]) && isset($_GET["id"]) ) {
$id = $_GET["id"];
$path = '/images/uploads/post/'.$id.'/';
$filename = $_GET["file"];
//Yii::log("image: ".$image, 'info' );
echo $this->renderPartial('_crop', array('path'=>$path, 'filename'=>$filename, 'id'=>$id), false, true);
}
}
By playing with renderPartial, if I change this:
echo $this->renderPartial('_crop', array('path'=>$path, 'filename'=>$filename, 'id'=>$id), false, true);
to this:
echo $this->renderPartial('_crop', array('path'=>$path, 'filename'=>$filename, 'id'=>$id), true, false);
It works!!! but… then the content inside of the modal window is not fine, due to in the modal window I render an image to be cropped using jii-jcrop extension. :S Crazy!
I know it might be complex… I just don’t know what else I can do, I really need help on this, so any comment you have, please let me know.
Thanks!
PS: I new on JS, so I don’t know if I should register or something like thisth js files, at the moment I just have them in the main layout like this:
<script src="<?php echo Yii::app()->theme->baseUrl; ?>/js/bootstrap.js"></script>