Yii Framework Forum: Critical problem in IE 8 with CGridView - Yii Framework Forum

Jump to content

  • (2 Pages)
  • +
  • 1
  • 2
  • You cannot start a new topic
  • You cannot reply to this topic

Critical problem in IE 8 with CGridView Rate Topic: ***** 2 Votes

#1 User is offline   rikardo 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 50
  • Joined: 16-December 09
  • Location:Sweden

Posted 08 June 2010 - 03:44 AM

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?
0

#2 User is online   Maurizio Domba Cerin 

  • Yii - Yesss It Is !!!
  • Yii
  • Group: Yii Dev Team
  • Posts: 4,359
  • Joined: 12-October 09
  • Location:Croatia

Posted 08 June 2010 - 03:51 AM

It's a jQuery/IE problem... check here - http://code.google.c...Stars%20Summary
Find more about me.... btw. Do you know your WAN IP?
0

#3 User is offline   rikardo 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 50
  • Joined: 16-December 09
  • Location:Sweden

Posted 08 June 2010 - 04:01 AM

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

#4 User is online   Maurizio Domba Cerin 

  • Yii - Yesss It Is !!!
  • Yii
  • Group: Yii Dev Team
  • Posts: 4,359
  • Joined: 12-October 09
  • Location:Croatia

Posted 08 June 2010 - 05:12 AM

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...
Find more about me.... btw. Do you know your WAN IP?
1

#5 User is offline   rikardo 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 50
  • Joined: 16-December 09
  • Location:Sweden

Posted 08 June 2010 - 06:10 AM

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

#6 User is online   Maurizio Domba Cerin 

  • Yii - Yesss It Is !!!
  • Yii
  • Group: Yii Dev Team
  • Posts: 4,359
  • Joined: 12-October 09
  • Location:Croatia

Posted 08 June 2010 - 06:42 AM

no side effects for now...
Find more about me.... btw. Do you know your WAN IP?
0

#7 User is offline   outrage 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 313
  • Joined: 10-November 09
  • Location:Blackpool, United Kingdom

Posted 08 June 2010 - 08:03 AM

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.
0

#8 User is online   Maurizio Domba Cerin 

  • Yii - Yesss It Is !!!
  • Yii
  • Group: Yii Dev Team
  • Posts: 4,359
  • Joined: 12-October 09
  • Location:Croatia

Posted 08 June 2010 - 08:11 AM

@outrage your problem is different, we are talking about the 'change' event not being bubbled up in IE
Find more about me.... btw. Do you know your WAN IP?
0

#9 User is offline   GSTAR 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 1,037
  • Joined: 30-October 09
  • Location:UK

Posted 08 June 2010 - 08:27 AM

View Postmdomba, on 08 June 2010 - 05:12 AM, said:

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

Cheers mdomba,

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

#10 User is online   Maurizio Domba Cerin 

  • Yii - Yesss It Is !!!
  • Yii
  • Group: Yii Dev Team
  • Posts: 4,359
  • Joined: 12-October 09
  • Location:Croatia

Posted 08 June 2010 - 08:52 AM

@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...
Find more about me.... btw. Do you know your WAN IP?
0

#11 User is offline   GSTAR 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 1,037
  • Joined: 30-October 09
  • Location:UK

Posted 08 June 2010 - 09:22 AM

aah wicked, good stuff man! :D
0

#12 User is offline   BlitzJS 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 6
  • Joined: 01-June 10

Posted 08 June 2010 - 04:22 PM

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

#13 User is offline   qiang 

  • Yii Project Lead
  • Yii
  • Group: Yii Dev Team
  • Posts: 5,902
  • Joined: 04-October 08
  • Location:DC, USA

Posted 08 June 2010 - 04:42 PM

Do we still need "focusout" event?
0

#14 User is offline   fastcrash 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 245
  • Joined: 10-March 10
  • Location:South Jakarta

Posted 08 June 2010 - 10:07 PM

wuahh.. mdomba, you are really something O0
0

#15 User is online   Maurizio Domba Cerin 

  • Yii - Yesss It Is !!!
  • Yii
  • Group: Yii Dev Team
  • Posts: 4,359
  • Joined: 12-October 09
  • Location:Croatia

Posted 09 June 2010 - 01:41 AM

@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});
                    });
                });
            }

This post has been edited by mdomba: 09 June 2010 - 04:39 AM

Find more about me.... btw. Do you know your WAN IP?
1

#16 User is offline   Sniper 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 55
  • Joined: 03-March 10
  • Location:Planet Ruby on Rails

Posted 28 June 2010 - 08:33 AM

@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.c...ugins/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!
0

#17 User is offline   rommanc 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 5
  • Joined: 02-September 09
  • Location:russia

Posted 28 June 2010 - 02:13 PM

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

#18 User is offline   hostkaran 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 5
  • Joined: 29-July 10

Posted 29 July 2010 - 05:34 AM

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
0

#19 User is offline   Mike 

  • Elite Member
  • PipPipPipPipPip
  • Yii
  • Group: Members
  • Posts: 3,016
  • Joined: 06-October 08
  • Location:Upper Palatinate

Posted 29 July 2010 - 06:04 AM

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});
}

0

#20 User is offline   hostkaran 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 5
  • Joined: 29-July 10

Posted 29 July 2010 - 09:08 AM

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

Share this topic:


  • (2 Pages)
  • +
  • 1
  • 2
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users