Critical problem in IE 8 with CGridView

I present some data with the CGridView widget and it uses AJAX for the filtering, in FF and CHROME all works fine, but in IE8 you cannot enter any data in the field without a slu**y hack. You have to press with your mouse in the field that you will input and then enter it in order to be able to search for anything at all. Why comes this problem?

It’s a jQuery/IE problem… check here - http://code.google.com/p/yii/issues/detail?id=1031&can=1&q=commentby%3Amaurizio.domba&colspec=ID%20Type%20Status%20Priority%20Milestone%20Owner%20Stars%20Summary

Thx for the fast reply, that really sucks. When I found a workable solution for me I’ll post it.

This is a temporary fix that I just made out… tried with firefox 3.6.4 and IE8

In the jquery.yiigridview.js look for the string "temporary fix for the bug of supporting live change in IE" and change/insert this code




            // temporary fix for the bug of supporting live change in IE

            $(inputSelector).live('change focusout', function(){

                var data = $.param($(inputSelector))+'&'+settings.ajaxVar+'='+id;

                $.fn.yiiGridView.update(id, {data: data});

            });

            //.. MD 08.06.2010

            if($.browser.msie)

            {

                $(inputSelector).live('click keyup', function(){

                    $(inputSelector).change(function(){

                        var data = $.param($(inputSelector))+'&'+settings.ajaxVar+'='+id;

                        $.fn.yiiGridView.update(id, {data: data});

                    });

                });

            }



What I found out is that $(inputSelector).change - works in IE, but only the first time because its not called from live(), so what I’m doing is to get the event click or keyup and at that time bind the change event…

As far I’ve tested it works great, have you noticed any negative side effects? Else thanks alot!

no side effects for now…

I wonder if this is related to a post I just made here: Forum Post ?

The problem stems from IE being unable to read the XMLHttpRequest from a local file (from what I’ve read elsewhere). Indeed it works fine if I refresh the page but simply reloading the page will cause Ajax stuff to hang.

IE needs to use the ActiveXObject - ( window.ActiveXObject("Microsoft.XMLHTTP") ) to read the locally cached data.

@outrage your problem is different, we are talking about the ‘change’ event not being bubbled up in IE

Cheers mdomba,

Just wondering what the code you’ve added does compared to the fix provided by maurizio in the Google forum?

@GSTAR - it’s always me mdomba = maurizio.domba :)

the code on the google forum works but for the dropdown when the option is selected you need to TAB or click somewhere else so that the focusout gets called for the filter to make the ajax call…

this new code solves this problem so that you don’t need to TAB out…

we are talking for IE…

aah wicked, good stuff man! :D

Well done mdomba, works like it should now. Much appreciated!

Do we still need "focusout" event?

wuahh… mdomba, you are really something O0

@qiang for now we need it but only on IE so it can be used like




$(inputSelector).live($.browser.msie ? 'focusout' : 'change',....



I’m using ‘change focusout’ because is leaner (less code), works in all browsers with no side effects for now…

Edit:

I was too fast with my answer…

I tryed it now… so you were thinking right… we don’t need focusout anymore… so here is the clean code:




           $(inputSelector).live('change', function(){

                var data = $.param($(inputSelector))+'&'+settings.ajaxVar+'='+id;

                $.fn.yiiGridView.update(id, {data: data});

            });

            //.. temporary fix for the bug of supporting live change in IE (MD 08.06.2010)

            if($.browser.msie)

            {

                $(inputSelector).live('click keyup', function(){

                    $(inputSelector).change(function(){

                        var data = $.param($(inputSelector))+'&'+settings.ajaxVar+'='+id;

                        $.fn.yiiGridView.update(id, {data: data});

                    });

                });

            }

@mdomba The above breaks text boxes in IE8 (try typing something) ! its a bug with jQuery rather than anything in yiigridview.js

I’d recommend using the livequery plugin, which works perfectly fine http://docs.jquery.com/Plugins/livequery

For a simple fix, first include the plugin file (alternatively use the publish method provided by Yii).




<script src="PATH_TO/jquery.livequery.js" type="text/javascript"></script>         



Then edit\yii\framework\zii\widgets\assets\gridview\jquery.yiigridview.js to use livequery.

find




$(inputSelector).live($.browser.msie ? 'click keyup' : 'change', function(){



replace with




$(inputSelector).livequery('change', function(){



remember to clear your assets folder for the changes to work!

in my opinion best way is rollback to jquery 1.4.1 , cuz yii core dont use 1.4.2 version delegate/undelegate features.

I read and tested all the solution here and in google code, there exists two following problems:

1- jQuery 1.4.2 bug about dropdownbox

2- Zii jquery.yiigridview.js for IE browser (IE6 to IE8)

For a workaround, I did as follow ( tested on FF 3.5, IE 7, IE 8, Chrome and it works perfectly):

1- Downgrade to jQuery 1.4.1 ( since 1.4.2 doesn’t fire event for dropdownbox)


   A. Download the jQuery 1.4.1 from this address:

    (http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js)

   B. Copy the file in application "/js" folder

   C. Configure the main.php as below:

in components section add:

        'clientScript'=> array(

            'scriptMap'=> array (

                        'jquery.js'=>"js/jquery_min.js",

                        'jquery.min.js'=>"js/jquery_min.js",                  

                        ),

         ),



2- Change the jquery.yiigridview.js

/yii/framework/zii/widgets/assets/gridview/jquery.yiigridview.js

Search for "temporary fix for the bug of supporting live change in IE " and replace as follow:

Original:


	   

            // temporary fix for the bug of supporting live change in IE

 	    $(inputSelector).live($.browser.msie ? 'click keyup' : 'change', function(){

	    var data = $.param($(inputSelector))+'&'+settings.ajaxVar+'='+id;

	    $.fn.yiiGridView.update(id, {data: data});

	    });



Replace to:


	

            // temporary fix for the bug of supporting live change in IE

            $(inputSelector).live($.browser.msie ? 'change keypress' : 'change', function(){

                //alert(event.type);

            if ($.browser.msie) {

              if (event.keyCode == '13' || event.type =="click") {

               

				var data = $.param($(inputSelector))+'&'+settings.ajaxVar+'='+id;

				$.fn.yiiGridView.update(id, {data: data});

              }

            }

            else {

                var data = $.param($(inputSelector))+'&'+settings.ajaxVar+'='+id;

                $.fn.yiiGridView.update(id, {data: data});

                

            }              

			});



Hope that helps

Just a note (i can’t suppress the code optimizer working in my head ;) )

This:




if ($.browser.msie) {

    if (event.keyCode == '13' || event.type =="click") {

        var data = $.param($(inputSelector))+'&'+settings.ajaxVar+'='+id;

        $.fn.yiiGridView.update(id, {data: data});

    }

} else {

    var data = $.param($(inputSelector))+'&'+settings.ajaxVar+'='+id;

    $.fn.yiiGridView.update(id, {data: data});

}

is equivalent to this:


if (!$.browser.msie || event.keyCode=='13' || event.type=='click') {

    var data = $.param($(inputSelector))+'&'+settings.ajaxVar+'='+id;

    $.fn.yiiGridView.update(id, {data: data});

}



Yep thanks, it can be optimized more :), just tried to keep it simple