Please Help With Modal And Js

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" -->



$('body').on('click', '#crop-image', function(event){


                'type' : 'POST',

                'url' : $(this).attr('href'),

                'success' : function(data){ 







Partial view for the Grid and button (views\postImage\_upload.php):


                <?php $this->widget('bootstrap.widgets.TbButton',array(






                            '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)),


                                                // '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',

                          // ),

                        )); ?>                                                       


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.


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>