Loading...

Search jQuery

Search

jQuery Forum

Developing jQuery Core

dbjdbj

What is the key difference ?

in Developing jQuery Core • 13 years ago

Matt Kruse has an nice and simple jQuery "ideas page". I could not
make it work for me.
http://dbj.org/h.htm
The difference is I am using the latest jQuery.And I have also removed
some parts from Matt's page.
The first example. "Details" Table . My page is (obviously) not
working. Why?
Link to the Matt's page is there. His page uses (I think) jQ 1.2 and
is working.
Simple Tree View works on both pages.
Also when using IE the behaviour of my page is much worse.
Any advice? Idea?
--DBJ

Replies(32)

Re: What is the key difference ?

13 years ago

My example code uses this selector syntax: tr[@class^=child-]
Support for [@attribute...] has been changed to just [attribute...]
with jQuery 1.3. Remove the @ and it should work for you.
Btw, I find this change very annoying. It has prevented a few projects
I've touched from upgrading their jQuery version, because it would
require going in and fixing lots of code. I wish there was more
backwards-compatibility!
Matt

Re: What is the key difference ?

13 years ago

Isn't that just a quick regex away from making it work with the new syntax?
-- dz

dbjdbj

Re: What is the key difference ?

13 years ago

@Matt, thanks for the quick reply. I already did that. Please look
into the source of the page.
I can't understand why is that simple jQuery code so "sensitive".
Especially toggle(), misbehaves in IE.
I have not tried with the jQuery version you have used, but I can see
no relevant difference,
beside different versions of jQuery?
Is there something in the <table> markup that is confusing jQuery,
maybe ?
--DBJ

dbjdbj

Re: What is the key difference ?

13 years ago

$(function() {
    $('tr.parent')
        .css("cursor","pointer")
        .attr("title","Click to expand/collapse")
        .click(function(){
            $(this).siblings('.child-'+this.id).toggle();
        });
    $('tr[class^=child-]').hide().children('td');
});
Not very complicated code, I think. Now pay attention to the toggle():
1.
toggle() --- In IE nothing happens. FF and C : all is fine
2.
toggle(400) or toggle("slow") etc. -- In IE some "show-hide" effect
happens but TD's and TR's look OK.
In FF and C, toggle happens but TD's,TR's are with default "elastic"
width ...
Any idea?
--DBJ

dbjdbj

Re: What is the key difference ?

13 years ago

I also did noticed that TR's toggled get not so valid markup.
Code I used is this:
jQuery.fn.outer = function() {
return $($('<div></div>').html(this.clone())).html();
}
$(function() {
$('tr.parent')
        .css("cursor", "pointer")
        .attr("title", "Click to expand/collapse")
        .click(function() {
         $(this).siblings('.child-' + this.id).toggle(function() {
         alert($(this).outer());
         });
        });
$('tr[class^=child-]').hide().children('td');
});
Donwload http://dbj.org/h.htm and try this ... If you have time that
is.
--DBJ

kswedberg

Re: What is the key difference ?

13 years ago

<html><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; ">I think the problem there is with the way IE reports height or TR elements, even if they have display none. Something like that. For performance reasons, jQuery 1.3.2 changed the way it detects visibility. This broke a few things, including jQuery misreporting TR elements' "visible" status in IE. Anyway, I'm pretty sure this has been fixed in nightly/svn.
<div apple-content-edited="true"> <span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0; "><div style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; "><span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; "><span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; "><div><br class="Apple-interchange-newline">--Karl</div><div><br class="Apple-interchange-newline">____________</div><div>Karl Swedberg</div><div><a href="http://www.englishrules.com">www.englishrules.com</a></div><div><a href="http://www.learningjquery.com">www.learningjquery.com</a></div><div>
</div></span><br class="Apple-interchange-newline"></span><br class="Apple-interchange-newline"></div></span> </div>
<div><div>On Oct 2, 2009, at 11:42 AM, DBJDBJ wrote:</div><br class="Apple-interchange-newline"><blockquote type="cite"><div>
$(function() {
<span class="Apple-tab-span" style="white-space:pre"> </span>$('tr.parent')
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>.css("cursor","pointer")
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>.attr("title","Click to expand/collapse")
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>.click(function(){
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>$(this).siblings('.child-'+this.id).toggle();
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>});
<span class="Apple-tab-span" style="white-space:pre"> </span>$('tr[class^=child-]').hide().children('td');
});
Not very complicated code, I think. Now pay attention to the toggle():
1.
toggle() --- In IE nothing happens. FF and C : all is fine
2.
toggle(400) or toggle("slow") etc. -- In IE some "show-hide" effect
happens but TD's and TR's look OK.
In FF and C, toggle happens but TD's,TR's are with default "elastic"
width ...
Any idea?
--DBJ
</div></blockquote></div>

dbjdbj

Re: What is the key difference ?

13 years ago

I dont want to sound pompous but this/that page is including and using
the nighlty build ...
Also it is the TR style="" attribute problem. After being "treated"
with toggle(),
On my IE8 it becomes :
style="FILTER: ; ZOMM:1; DISPLAY:hidden"
--DBJ

Re: What is the key difference ?

13 years ago

I see the problem in FF, so I don't think it has anything to do with
IE specifically.
Using Matt's original markup, modifying the code only by removing the
"@", and making minor tweaks to the CSS to make borders visible in
jsBin, I got it working with the nightly here:
http://jsbin.com/ixofe (code: http://jsbin.com/ixofe/edit)
I don't think it has to do with the version of jQuery.
The other difference in your code is the animation, and once I try
that, I get the same bug:
http://jsbin.com/iheco (code: http://jsbin.com/iheco/edit)
You might try some other animation than toggle(400).
Cheers,
-- Scott

Re: What is the key difference ?

13 years ago

> Btw, I find this change very annoying. It has prevented a few projects
> I've touched from upgrading their jQuery version
Matt,
I, for one, don't mind the removal of xpath-y syntax from a CSS
selector engine. Regardless..
Here's a rough monkeypatch that will allow your @ attribute syntax to
work in 1.3+:
(function($){
var oldfind = $.fn.find;
$.fn.find = function(sel){
sel = sel.replace('[@','[');
return oldfind.call(this,sel);
}
})(jQuery);

kswedberg

Re: What is the key difference ?

13 years ago

<html><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; "><div apple-content-edited="true"><span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0; "><div style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; "><span class="Apple-style-span" style="font-size: medium;">
</span></div></span></div><div><div>On Oct 2, 2009, at 1:40 PM, DBJDBJ wrote:</div><br class="Apple-interchange-newline"><blockquote type="cite"><div>
I dont want to sound pompous but this/that page is including and using
the nighlty build ...
Also it is the TR style="" attribute problem. After being "treated"
with toggle(),
On my IE8 it becomes :
style="FILTER: ; ZOMM:1; DISPLAY:hidden"
<font class="Apple-style-span" color="#000000"><font class="Apple-style-span" color="#144FAE">
</font></font></div></blockquote></div><div><span class="Apple-style-span" style="font-size: 13px; "><div>
</div><div>Not sure how/why that would sound pompous. </div><div>
</div><div>Anyway, .toggle(400) has never worked, as far as I know, in FF or Safari, because when it finishes animating to visible, it sets the tr to display: block. The only animation I've ever had work with table rows is opacity ( fadeIn/fadeOut)</div><div><br class="Apple-interchange-newline">--Karl</div><div>
</div></span></div>

dbjdbj

Re: What is the key difference ?

13 years ago

@Scott ... good work. The problem was in FF and C also, when doing
toggle(value).
When doing togle(/*no args*/) my IE8 does not toggle at all, while
both FF and C work same as Matt's original.
Please use/observe "my" version which alert's with the outerHTML of
each TR toggled. Each TR toggled has this funny style attribute, which
A) should not be injected as a such and B) confuses the browser.
I think that is the problem ?
PS:
It is interesting that your jsbin version works ok. Is it maybe the !
DOCTYPE ?
My page has not this header that your jsbin version has:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
--DBJ

dbjdbj

Re: What is the key difference ?

13 years ago

There is no "version" but a "previous post". Anyway what I am taking
about is here :
http://dbj.org/h.htm
It shows outerHTML of each TR toggled ...
Do I log/make a ticket or is this already a known issue ?
Or am I wrong ;o)
--DBJ
PS: Everyone was very helpfull on this one. Thanks.

dbjdbj

Re: What is the key difference ?

13 years ago

toggle() and TR do not go very well together ...
http://jsbin.com/ipabi/edit
This is the version using fadeIn/fadeOut
Which behaves and is controllable (speed wise). And is not destructive
for TR's and TD's...
Although effect is different ...
Now is this jQuery bug or feature ?
--DBJ

dbjdbj

Re: What is the key difference ?

13 years ago

Plot tihickens ;o)
If I do it this way , then it works fine in FF and C., display is
"dispplay-tablerow", on the TR's toggled to visible.
$(function() {
$('tr.parent')
        .css("cursor", "pointer")
        .attr("title", "Click to expand/collapse")
        .click(function() {
         var that = this ;
         $(that).siblings('.child-' + that.id).toggle();
         $(that).siblings('.child-' + that.id).each(
function() { print($(this).outer(true)); }
         );
        });
        $('tr[class^=child-]').hide();
//
});
In IE this still pops up and then off again. But. The toggled TR
markup is valid. That is the style attribute is
style= "DISPLAY: none".
Previously I had a function as a toggle argument :
         $(that).siblings('.child-' + that.id).toggle(
function() { print($(this).outer(true)); }
         );
This was toggling in FF and C, but the result was TR's with no width
of the parent TR.
This also was not working in IE ...
I left http://dbj.org/h.htm , as it was.. toggle( function ) should
work the same as toggle(), I think.
I mean it should not change the html markup differently.
Maybe jQ gets confused which version of toggle() to use ?
--DBJ

Re: What is the key difference ?

13 years ago

On Fri, Oct 2, 2009 at 8:11 PM, DBJDBJ <dbjdbj@gmail.com>

dbjdbj

Re: What is the key difference ?

13 years ago

@Scott, please look into: http://jsbin.com/ipabi/edit
This code works (nicely) in FF and C, and (not so nicely) IE
(btw: there is no global 'toggle' in there)
The "suffering" the previous simple code is enduring is coming from
toggle() not working in IE ...
This is easy to see at http://dbj.org/h.htm
--DBJ

Re: What is the key difference ?

13 years ago

On Mon, Oct 5, 2009 at 11:42 AM, DBJDBJ <dbjdbj@gmail.com>

Re: What is the key difference ?

13 years ago

On Mon, Oct 5, 2009 at 2:48 PM, I

dbjdbj

Re: What is the key difference ?

13 years ago

@Scott, thanks for the effort. But the starting point still remains:
all of this was working OK with jQuery 1.2,
as evident on Matt Kruse original page : http://www.javascripttoolbox.com/jquery/
While dbj.org/h.htm , shows that the jQuery nightly trips over this :
$(this).siblings('.child-' + this.id).toggle(
function() { print($(this).outer(true)); }
);
In all the browsers, with more or less "luck" in any of them .
In IE this page does not work at all., and the markup for TR's toggled
is invalid.
Which is all clearly visible on that page.
jQ nightly also "fails" to toggle TR consistently in all browsers with
other variants of calling toggle :
toggle() ;
toggle( 400 ) ;
This is the focus of this discussion. toggle() for/on TR's using the
latest jQ , vs the jQ 1.2 which (it seems) worketh ...
--DBJ

Re: What is the key difference ?

13 years ago

On Tue, Oct 6, 2009 at 8:38 AM, DBJDBJ <dbjdbj@gmail.com>

dbjdbj

Re: What is the key difference ?

13 years ago

@Scott: no reason to "defend" since no one is attacking ;o)
I have done two variants of code inside dbj.org/h.htm
1.
old is invoked with : http://dbj.org/h.htm?old
2.
workaround is invoked with : http://dbj.org/h.htm
In the page there is some utility code, nothing complicated. The two
key functions are displayed on start-up of each variant.
(I have to admit I re-installed my W7x64, 3 days ago and still have
only C and IE8, so no FF testing here :o)
As far as I can see $("whatever that yields TR's").toggle(/*no
args*/) does not work on IE8...
(other variants of "non event version" of toggle() I have not tested,
I think there is no point until toggle() is not fixed)
The "event version" toggle(fn, fn, fn , ... ) apparently works ok in
both IE8 and C, and I suppose FF ... Which is not surprising since it
does nothing to TR's that are "toggled".
"...Can you build a page that works properly with 1.2 and not with the
latest? ... "
On dbj.org/h.htm , just click on the link to Matt Kruse original and
you will have that page ... It uses "jQuery 1.2.1"
Regards: DBJ

Re: What is the key difference ?

13 years ago

> "...Can you build a page that works properly with 1.2 and not with the
> latest? ... "
> On dbj.org/h.htm , just click on the link to Matt Kruse original and
> you will have that page ... It uses "jQuery 1.2.1"
Right, and the link I sent above (http://jsbin.com/atojo) is a version
of the same page using the nightlies. It does work in IE6/7; I just
tested IE8, and it works there too.
I still don't know why your page isn't working, but as far as I can
tell, Matt's original page works with the latest nightlies in all
recent versions of IE. Do you disagree?
-- Scott

dbjdbj

Re: What is the key difference ?

13 years ago

I do disagree. Matts original page is not working with the latest
jQuery.
Please see http://dbj.org/o.htm
I simply saved localy (using IE8) Matts original and then uploaded it
to dbj.org
I am sure you can see that it uses jQ nightly build, as the only
change.
(and of course "[@" from a old style selector is replaced withj "[" )
This is much closer to original than the (http://jsbin.com/atojo)
version, I think.
I am puzzled what are you trying to prove Scott? That I have found a
misterius way of not making toggle() work in IE8?
In that case you just have to explain to everyone wishing to use toggle
() , how to make it work in IE8, by using dbj.org/h.htm as an "bad
example" ;o)
--DBJ

Re: What is the key difference ?

13 years ago

DBJDBJ

Re: What is the key difference ?

13 years ago

On Tue, Oct 6, 2009 at 10:34 PM, Scott Sauyet <scott.sauyet@gmail.com>

dbjdbj

Re: What is the key difference ?

13 years ago

@Scott ... It is really rather simple to prove that toggle() is not
working, using dbj.org/h.htm and IE8 or C or FF javascript
consoles .... We do not have to (re)create streams of simillar but
different pages.
So, open dbj.org/h.htm in IE8 and then in it's (very good) javascript
console execute : $(".child-row123:first").toggle().css("display") ...
The result will be allways: "none" .
Then look into the toggle() source ... You see ? Ok, to prove what you
have just found, in the still opened console in IE8 execute : $
(".child-row123:first").is(":hidden")
And the result is always "false" ... Try this on the re-started IE8
and dbj.org/h.htm, and the result is always "false".
I hope there is no need to mention that all of this works on in C and
FF ? (Oops, I just mentioned it ..)
And I do also sincerely hope there is no need to mention that in
http://www.javascripttoolbox.com/jquery/ , all of this works ok even
in IE8 ?
Ok, by looking into the jQuery source and the toggle() implementation
it seems that is(":hidden") does not work using the latest jQ nightly
and IE8.
I do seem to remember the thread which was about is(":hidden")
problem ?
Maybe I should have mentioned all of this in the first post ...
-- DBJ

dbjdbj

Re: What is the key difference ?

13 years ago

oh yes and also in IE8 $(".child-row123:first").is(":visible"),
returns always "true" when it should not ... with the latest build
and yes, people have noticed something is wrong around this issue :
http://remysharp.com/2008/10/17/jquery-really-visible/#comment-174813
--DBJ

Re: What is the key difference ?

13 years ago

On Wed, Oct 7, 2009 at 4:12 AM, DBJDBJ <dbjdbj@gmail.com>

dbjdbj

Re: What is the key difference ?

13 years ago

Using the PACKED nightly , I have also found that probably only TR's
in IE8 have this problem with toggle()
If using console in IE8 I add (for example) div to the dbj.org/h.htm I
can toggle() it succesfully.
Somehow in IE8 setting the TR style to: "display: table-row", does not
happen ?
And this happens only if packed nightly is used ?! Most peculiar ... ?
Scot, please go ahead and log this as the bug, in the tracker ...
Thanks: DBJ
PS: When I started this tread, style attribute of the TR in IE8 was
invalid, it was "DISPLAY:; ZOOM:1; .... ", which is not the case any
more.
Someone (or something ;o) has changed the code since then. I trust
this issue will be resolved before 1.4 ;o)

dbjdbj

Re: What is the key difference ?

13 years ago

Ah, "elementary my dear Watson" ...
http://jquery.com/src/nightlies/jquery-nightly.js is version 1.4pre
While (until today 2009 OCT 07 )
http://jquery.com/src/nightlies/jquery-nightly.pack.js is/was version
1.3.3pre
That explains it ... While we are guessing and cogitating, The Team is
working. Shame on us...
--DBJ

Re: What is the key difference ?

13 years ago

On Wed, Oct 7, 2009 at 11:50 AM, DBJDBJ <dbjdbj@gmail.com>

dbjdbj

Re: What is the key difference ?

13 years ago

Thanks for your leg work Scott.
--DBJ