CJuidialog Unexpected Behaviour

Yii 1.1 General Discussion
1

Hello,

In the process of a CMS development using jquery and Yii I experienced a strange behaviour

This code is what I used to generate the ajaxlink :


CHtml::ajaxLink('<img src="'.Yii::app()->request->baseUrl.'/img/validate2.png" />',$this->createUrl('/student_courses/validateDialog?id='.$value['id']),array('onclick'=>'$("#dialogValidate").dialog("open");return false;','update'=>'#dialogValidate'));

The thing is when i click the link when the page is just refreshed the dialog opens but empty. I then close the dialog and reopen it. The second time (and other nexts) are ok. The form just appear as expected.

I have to say that there are other links in the page using a jquery procedure which is not generated by yii and when the yii generated dialog displays they stop working !!!

Did someone experienced this kind of thing ?

Regards,

xavier

2

For strart, give a unique id by passing some htmlOptions to this ajaxLink as well as others.

3

Hey Xav,

Could you drop the generated Javascript here?

Also for the url, do it createUrl(‘student_courses/validateDialog’,array(‘id’=>$value[‘id’]))

4

Yes, when a Javascript error occurs

5

Hi,

Thanks tydeas_dr for this answer.

I’ve just did this but it didn’t brought any change.

6

This is the generated code


<a id="vcj73" title="Validate this course" class="vcourse"><img src="/di/img/validate2.png" /></a>





jQuery('body').delegate('#vc73','click',function(){jQuery.ajax({'onclick':'$(\"#dialogValidate\").dialog(\"open\");return false;','url':'/di/index.php/student_courses/validateDialog?id=73','cache':false,'success':function(html){jQuery("#dialogValidate").html(html)}});return false;});

At first click the dialog opens empty, afterward it works all right. But other links stop responding (other links are not generated by yii.

This is the delete link that stops working


<a id="dc73" class="deleteCourse" title="Remove this course from this student" >del</a>

And this is the javascript I’ve written





// Listening for a click on a delete course button:


	$('a.deleteCourse').live('click',function(){

	

		$("#confcoudel").dialog("open");

	});





$("#confcoudel").dialog({

        resizable: false,

        id:'showConcoudel',

        height:'auto',

        width:250,

        modal: true,

        autoOpen:false,

        buttons: {

            'Delete course': function() {

                

            

                $.ajax({

                type: 'POST',

                url:'../student_courses/delete/'+currentCOURSE.data('id'),

                data: "id="+currentCOURSE.data('id'),

                

                })

                

                

                $(this).dialog('close');

                currentCOURSE.fadeOut('fast');

            },

            Cancel: function() {

                $(this).dialog('close');

            }

        }

    });

I really can’t figure out what’s going wrong (i’ve got my nose too much into it i guess :).

Thanks for the help.

xavier

7

Remark: the page behavior seems to bug firebug. Something is clearly interfering making the whole thing unstable.

8

I have just seen the ajax click button and it doesnt make any sense the ‘onclick’ option in the ajax. It looks that ajaxLink button has a confusing interpretation of that onclick attribute (http://api.jquery.com/jQuery.ajax/) and I believe is because that the button supposed to make an ajax update call through its onclick.

You have good javascript written, you are actually doing something very similar with what I do in my projects. This is what I recommend you to do:

Forget about your ajaxLink button and create a normal ‘link’ button:




// to display the button link (see the rel attribute?)

CHtml::link(CHtml::image(Yii::app->request->baseUrl.'/img/validate2.png'),'#',array('class'=>'deleteCourse','rel'=>$value['id']));




// the javascript you need to register on the view

// bit modification of your code

$('a.deleteCourse').live('click',function( e ){

              

        // getting the id of the button clicked

        var id = $(this).attr('rel');


        $("#confcoudel").dialog({

        resizable: false,

        id:'showConcoudel',

        height:'auto',

        width:250,

        modal: true,

        autoOpen:false,

        buttons: {

            'Delete course': function() {

                

            

                $.ajax({

                type: 'POST',

                url:'../student_courses/delete/'+id, // button id

                data: "id="+id, // here I place the id of the button

                

                })

                

                

                $(this).dialog('close');

                currentCOURSE.fadeOut('fast');

            },

            Cancel: function() {

                $(this).dialog('close');

            }

        }

    });


   // FORGOT TO ADD THIS

   e.stopPropagation();

   return false;

 

});

Try it, is untested, but looks a little bit like my solutions

9

By the way XAV,

I recommend you that you use Yii to create every single LINK of your code, whether is Javascript or PHP. The url for the AJAX post on your code could give you problem. You could just use Yii::app()->request->createUrl or $this->createUrl from a view.

Cheers

10

Hi Antonio,

Many many thanks for your help here. Your smart code helped me solved the problem of the delete button. However, I’m still struggling for the validation button. But now, whatever happens, the delete button works just as it should.

From your code i’ve just changed the autoOpen to true, that’s all.

I’m going to try to solve the validation form issue. If it fails I might get back with a new forum topic.

Thanks again Antonio…y feliz año nuevo.

xav

11

De nada man! Aquí estamos para eso… cheers!