Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #14835 > unrolled thread

Why is .click() not effective and requires us to press on Refresh?

Back to article view | Back to comp.lang.javascript

Contents

  Why is .click() not effective and requires us to press on Refresh? "Sebastien Vauban" <wxhgmqzgwmuf@spammotel.com> - 2012-07-03 12:09 +0200
    Re: Why is .click() not effective and requires us to press on Refresh? Gregor Kofler <usenet@gregorkofler.com> - 2012-07-03 14:26 +0200
      Re: Why is .click() not effective and requires us to press on Refresh? "Sebastien Vauban" <wxhgmqzgwmuf@spammotel.com> - 2012-07-04 11:43 +0200
        Re: Why is .click() not effective and requires us to press on Refresh? SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> - 2012-07-04 12:13 +0200
          Re: Why is .click() not effective and requires us to press on Refresh? "Sebastien Vauban" <wxhgmqzgwmuf@spammotel.com> - 2012-07-04 14:37 +0200
        Re: Why is .click() not effective and requires us to press on Refresh? Gregor Kofler <usenet@gregorkofler.com> - 2012-07-04 13:58 +0200
          Re: Why is .click() not effective and requires us to press on Refresh? "Sebastien Vauban" <wxhgmqzgwmuf@spammotel.com> - 2012-07-05 09:23 +0200
            Re: Why is .click() not effective and requires us to press on Refresh? Gregor Kofler <usenet@gregorkofler.com> - 2012-07-05 14:47 +0200
          Re: Why is .click() not effective and requires us to press on Refresh? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-07-05 16:48 +0200
    Re: Why is .click() not effective and requires us to press on Refresh? SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> - 2012-07-03 20:11 +0200
      Re: Why is .click() not effective and requires us to press on Refresh? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2012-07-03 18:25 +0000
        Re: Why is .click() not effective and requires us to press on Refresh? Gene Wirchenko <genew@ocis.net> - 2012-07-03 13:16 -0700
          Re: Why is .click() not effective and requires us to press on Refresh? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2012-07-03 21:10 +0000
        Re: Why is .click() not effective and requires us to press on Refresh? SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> - 2012-07-04 09:49 +0200
          Re: Why is .click() not effective and requires us to press on Refresh? SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> - 2012-07-04 10:18 +0200
      Re: Why is .click() not effective and requires us to press on Refresh? "Sebastien Vauban" <wxhgmqzgwmuf@spammotel.com> - 2012-07-04 14:36 +0200
        Re: Why is .click() not effective and requires us to press on Refresh? "Sebastien Vauban" <wxhgmqzgwmuf@spammotel.com> - 2012-07-04 15:15 +0200

#14835 — Why is .click() not effective and requires us to press on Refresh?

Hello,

I've made up an example of what I'm trying to achieve in
http://jsfiddle.net/svajquery/ttVUA/4/.

I have "tabified" all H2, and want to click on a link in the first tab
("Dashboard") and want to be redirected on the right place of the second tab
("Tasks").

While the URL is correctly displayed in the address bar of the browser (at
least when testing those files in a real browser environment), the .click() is
not effective. I must press on the Refresh button to really go where I want
to.

Do you have any explanation?  I surely miss something!

Best regards,
  Seb

-- 
Sebastien Vauban

[toc] | [next] | [standalone]

#14836

Am 2012-07-03 12:09, Sebastien Vauban meinte:
> Hello,
>
> I've made up an example of what I'm trying to achieve in
> http://jsfiddle.net/svajquery/ttVUA/4/.
>
> I have "tabified" all H2, and want to click on a link in the first tab
> ("Dashboard") and want to be redirected on the right place of the second tab
> ("Tasks").
>
> While the URL is correctly displayed in the address bar of the browser (at
> least when testing those files in a real browser environment), the .click() is
> not effective. I must press on the Refresh button to really go where I want
> to.
>
> Do you have any explanation?  I surely miss something!

Indeed. You forgot to ask in a jQuery forum. This NG deals with 
(Java|ECMA)Script

Gregor



-- 
http://vxweb.net

[toc] | [prev] | [next] | [standalone]

#14850

Hi Gregor,

Gregor Kofler wrote:
> Am 2012-07-03 12:09, Sebastien Vauban meinte:
>> I've made up an example of what I'm trying to achieve in
>> http://jsfiddle.net/svajquery/ttVUA/4/.
>>
>> I have "tabified" all H2, and want to click on a link in the first tab
>> ("Dashboard") and want to be redirected on the right place of the second tab
>> ("Tasks").
>>
>> While the URL is correctly displayed in the address bar of the browser (at
>> least when testing those files in a real browser environment), the .click() is
>> not effective. I must press on the Refresh button to really go where I want
>> to.
>>
>> Do you have any explanation?  I surely miss something!
>
> Indeed. You forgot to ask in a jQuery forum. This NG deals with
> (Java|ECMA)Script

Where would you ask it, then?

Gmane's jQuery mailing list (gmane.comp.lang.javascript.jquery) seems to be
completely abandoned for some years.

I've tried asking it as well on jQuery.com (see
https://forum.jquery.com/topic/jumping-to-the-right-tab-when-h2-are-tabified),
but got no further answer...

And that seemed to me as more related to JavaScript, but OK, as far as I dunno
what's the problem...

Best regards,
  Seb

-- 
Sebastien Vauban

[toc] | [prev] | [next] | [standalone]

#14851

Le 04/07/12 11:43, Sebastien Vauban a écrit :
> Hi Gregor,
>
> Gregor Kofler wrote:
>> Am 2012-07-03 12:09, Sebastien Vauban meinte:
>>> I've made up an example of what I'm trying to achieve in
>>> http://jsfiddle.net/svajquery/ttVUA/4/.
>>>
>>> I have "tabified" all H2, and want to click on a link in the first tab
>>> ("Dashboard") and want to be redirected on the right place of the second tab
>>> ("Tasks").

in your file :
<http://fiddle.jshell.net/svajquery/ttVUA/4/show/>
try disabling your line 189

[code]
186       $(this.hash).parent('.outline-2').show();
187
188     // don't follow the link
189     //  return false;
[/code]

maybe that ????

-- 
Stéphane Moriaux avec/with iMac-intel

[toc] | [prev] | [next] | [standalone]

#14854

Hello SAM,

SAM wrote:
> Le 04/07/12 11:43, Sebastien Vauban a écrit :
>> Gregor Kofler wrote:
>>> Am 2012-07-03 12:09, Sebastien Vauban meinte:
>>>> I've made up an example of what I'm trying to achieve in
>>>> http://jsfiddle.net/svajquery/ttVUA/4/.
>>>>
>>>> I have "tabified" all H2, and want to click on a link in the first tab
>>>> ("Dashboard") and want to be redirected on the right place of the second tab
>>>> ("Tasks").
>
> in your file :
> <http://fiddle.jshell.net/svajquery/ttVUA/4/show/>
> try disabling your line 189
>
> [code]
> 186       $(this.hash).parent('.outline-2').show();
> 187
> 188     // don't follow the link
> 189     //  return false;
> [/code]
>
> maybe that ????

Nope ;-(

Best regards,
  Seb

-- 
Sebastien Vauban

[toc] | [prev] | [next] | [standalone]

#14852

Am 2012-07-04 11:43, Sebastien Vauban meinte:
> Hi Gregor,
>
> Gregor Kofler wrote:
>> Am 2012-07-03 12:09, Sebastien Vauban meinte:
>>> I've made up an example of what I'm trying to achieve in
>>> http://jsfiddle.net/svajquery/ttVUA/4/.
>>>
>>> I have "tabified" all H2, and want to click on a link in the first tab
>>> ("Dashboard") and want to be redirected on the right place of the second tab
>>> ("Tasks").
>>>
>>> While the URL is correctly displayed in the address bar of the browser (at
>>> least when testing those files in a real browser environment), the .click() is
>>> not effective. I must press on the Refresh button to really go where I want
>>> to.
>>>
>>> Do you have any explanation?  I surely miss something!
>>
>> Indeed. You forgot to ask in a jQuery forum. This NG deals with
>> (Java|ECMA)Script
>
> Where would you ask it, then?
>
> Gmane's jQuery mailing list (gmane.comp.lang.javascript.jquery) seems to be
> completely abandoned for some years.
>
> I've tried asking it as well on jQuery.com (see
> https://forum.jquery.com/topic/jumping-to-the-right-tab-when-h2-are-tabified),
> but got no further answer...

LOL. Where are all those jQuery experts when you need them?

> And that seemed to me as more related to JavaScript, but OK, as far as I dunno
> what's the problem...

Perhaps some old-school debugging would help. As an example:

does $(this.hash) result in a DOM element? Do what does this.hash 
evaluate in this line? $("tab1") probably won't do the trick, but 
$(".tab1") could work.

Gregor

[toc] | [prev] | [next] | [standalone]

#14864

Hi Gregor,

Gregor Kofler wrote:
> Am 2012-07-04 11:43, Sebastien Vauban meinte:
>> Gregor Kofler wrote:
>>> Am 2012-07-03 12:09, Sebastien Vauban meinte:
>>>> I've made up an example of what I'm trying to achieve in
>>>> http://jsfiddle.net/svajquery/ttVUA/4/.
>>>>
>>>> I have "tabified" all H2, and want to click on a link in the first tab
>>>> ("Dashboard") and want to be redirected on the right place of the second tab
>>>> ("Tasks").
>>>>
>>>> While the URL is correctly displayed in the address bar of the browser (at
>>>> least when testing those files in a real browser environment), the .click() is
>>>> not effective. I must press on the Refresh button to really go where I want
>>>> to.
>>>>
>>>> Do you have any explanation?  I surely miss something!
>
> Perhaps some old-school debugging would help. As an example:
>
> does $(this.hash) result in a DOM element?

As I said, I'm absolutely no expert. How do you test that?  With an alert box?

> Do what does this.hash evaluate in this line? $("tab1") probably won't do
> the trick, but $(".tab1") could work.

If I write: alert($(this.hash));
the only thing I see displayed is: [object Object]

If I write: alert($(this.hash).toSource());
I get: ({length:1, 0:({}), context:({}), selector:"#dashboards"})

Does this help?

Best regards,
  Seb

-- 
Sebastien Vauban

[toc] | [prev] | [next] | [standalone]

#14868

Am 2012-07-05 09:23, Sebastien Vauban meinte:
> Hi Gregor,
>
> Gregor Kofler wrote:
>> Am 2012-07-04 11:43, Sebastien Vauban meinte:
>>> Gregor Kofler wrote:
>>>> Am 2012-07-03 12:09, Sebastien Vauban meinte:
>>>>> I've made up an example of what I'm trying to achieve in
>>>>> http://jsfiddle.net/svajquery/ttVUA/4/.
>>>>>
>>>>> I have "tabified" all H2, and want to click on a link in the first tab
>>>>> ("Dashboard") and want to be redirected on the right place of the second tab
>>>>> ("Tasks").
>>>>>
>>>>> While the URL is correctly displayed in the address bar of the browser (at
>>>>> least when testing those files in a real browser environment), the .click() is
>>>>> not effective. I must press on the Refresh button to really go where I want
>>>>> to.
>>>>>
>>>>> Do you have any explanation?  I surely miss something!
>>
>> Perhaps some old-school debugging would help. As an example:
>>
>> does $(this.hash) result in a DOM element?
>
> As I said, I'm absolutely no expert. How do you test that?  With an alert box?

Depending on your Browser Firebug, IE Developer Tools, Chrom(e|ium) 
Developer Tools, Opera DragonFly.

>> Do what does this.hash evaluate in this line? $("tab1") probably won't do
>> the trick, but $(".tab1") could work.
>
> If I write: alert($(this.hash));
> the only thing I see displayed is: [object Object]

As expected, since Object.prototype.toString() is invoked.

> If I write: alert($(this.hash).toSource());
> I get: ({length:1, 0:({}), context:({}), selector:"#dashboards"})
 >
> Does this help?

I'm not in urgent need of help. But you could try - with one of the 
above mentioned tools - what $(this.hash) yields.

Gregor

-- 
http://vxweb.net

[toc] | [prev] | [next] | [standalone]

#14871

Gregor Kofler wrote:

> does $(this.hash) result in a DOM element?

I try to avoid jQuery, but I know this much: $(…) will *never* return a 
reference to a DOM element (object), but to an array-like jQuery object that 
encapsulates a reference to an element object, if an element is matched (or 
created – OMG) by the selector.

> Do what does this.hash evaluate in this line?

Good question.

> $("tab1") probably won't do the trick, but $(".tab1") could work.

ACK.


PointedEars
-- 
var bugRiddenCrashPronePieceOfJunk = (
    navigator.userAgent.indexOf('MSIE 5') != -1
    && navigator.userAgent.indexOf('Mac') != -1
)  // Plone, register_function.js:16

[toc] | [prev] | [next] | [standalone]

#14842

Le 03/07/12 12:09, Sebastien Vauban a écrit :
> Hello,
>
> I've made up an example of what I'm trying to achieve in
> http://jsfiddle.net/svajquery/ttVUA/4/.
>
> I have "tabified" all H2, and want to click on a link in the first tab
> ("Dashboard") and want to be redirected on the right place of the second tab
> ("Tasks").
>
> While the URL is correctly displayed in the address bar of the browser (at
> least when testing those files in a real browser environment), the .click() is
> not effective.

the function click() can't work with a link (in "normal" JS)
it was made for buttons of forms
(submit for instance)

> I must press on the Refresh button to really go where I want to.

that could be a way

> Do you have any explanation?  I surely miss something!

<a href="#sec-2-2" onclick="showMe('Task')">Do that tomorrow</a>

You probably only need to show the good div (and hide the other one)
the link will naturally run to the anchor 'sec2-2' (basic html)

-- 
Stéphane Moriaux avec/with iMac-intel

[toc] | [prev] | [next] | [standalone]

#14843

SAM wrote on 03 jul 2012 in comp.lang.javascript:

> the function click() can't work with a link (in "normal" JS)
> it was made for buttons of forms
> (submit for instance)

It can.

However, if you leave the page, you won't see the result.

This will work:

<a href="#sec-2-2" 
onclick="showMe('Task');return false;">
Do that tomorrow</a>

and usually this will:

<a href="#sec-2-2" target='_blank'
onclick="showMe('Task');">
Do that tomorrow</a>



-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#14844

On 03 Jul 2012 18:25:01 GMT, "Evertjan."
<exxjxw.hannivoort@inter.nl.net> wrote:

>SAM wrote on 03 jul 2012 in comp.lang.javascript:
>
>> the function click() can't work with a link (in "normal" JS)
>> it was made for buttons of forms
>> (submit for instance)
>
>It can.
>
>However, if you leave the page, you won't see the result.
>
>This will work:
>
><a href="#sec-2-2" 
>onclick="showMe('Task');return false;">
>Do that tomorrow</a>
>
>and usually this will:
>
><a href="#sec-2-2" target='_blank'
>onclick="showMe('Task');">
>Do that tomorrow</a>

     Why the "usually" on the second?

Sincerely,

Gene Wirchenko

[toc] | [prev] | [next] | [standalone]

#14845

Gene Wirchenko wrote on 03 jul 2012 in comp.lang.javascript:

> On 03 Jul 2012 18:25:01 GMT, "Evertjan."
> <exxjxw.hannivoort@inter.nl.net> wrote:
> 
>>SAM wrote on 03 jul 2012 in comp.lang.javascript:
>>
>>> the function click() can't work with a link (in "normal" JS)
>>> it was made for buttons of forms
>>> (submit for instance)
>>
>>It can.
>>
>>However, if you leave the page, you won't see the result.
>>
>>This will work:
>>
>><a href="#sec-2-2" 
>>onclick="showMe('Task');return false;">
>>Do that tomorrow</a>
>>
>>and usually this will:
>>
>><a href="#sec-2-2" target='_blank'
>>onclick="showMe('Task');">
>>Do that tomorrow</a>
> 
>      Why the "usually" on the second?

Because not all browser honour the target directive,
like older mobile browsers, I have been told.

==============================

This is also a nice example,
where the link destination depends 
on javascript being active or not:

<a href="http://bbc.co.uk/" 
onclick="this.href='http://cnn.com/';">
What is next?</a>

The above is better than:
 
<a href="http://bbc.co.uk/" 
onclick="window.location.href='http://cnn.com/';">
What is next?</a>

as here the destination depends on the relative speed 
of the redirection, and you should do:

<a href="http://bbc.co.uk/" 
onclick="window.location.href='http://cnn.com/';return false;">
What is next?</a>

try all three!

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#14848

Le 03/07/12 20:25, Evertjan. a écrit :
> SAM wrote on 03 jul 2012 in comp.lang.javascript:
>
>> the function click() can't work with a link (in "normal" JS)
>> it was made for buttons of forms
>> (submit for instance)
>
> It can.
>
> However, if you leave the page, you won't see the result.
>
> This will work:
>
> <a href="#sec-2-2"
> onclick="showMe('Task');return false;">
> Do that tomorrow</a>

I said "click", not "ONclick" ...


<button onclick="document.getElementById('test1').click();">
click test #1</button>
<a id="test1" href="#" title="first test"
    onclick="alert(this.title); return false">
test #1</a>

I think that the button will not operate, no ?

(tested ... no it doesn't work, at least, with my Safari)
(and I don't understand why it works in other ones)


<a href="#" onclick="document.getElementById('test2').click();
return false">click test #2</a>
<button id="test2" onclick="alert('I am the second test')">
test #2</button>

(the link clicks the button in each of my browsers)


For the 1st test I found Google's archive telling it doesn't work with Fx:
<http://www.devtoolshed.com/content/fix-firefox-click-event-issue>
... probably an older version than mine ?

-- 
Stéphane Moriaux avec/with iMac-intel

[toc] | [prev] | [next] | [standalone]

#14849

Le 04/07/12 09:49, SAM a écrit :
>
> <button onclick="document.getElementById('test1').click();">
> click test #1</button>
> <a id="test1" href="#" title="first test"
>     onclick="alert(this.title); return false">
> test #1</a>
>
> I think that the button will not operate, no ?
>
> (tested ... no it doesn't work, at least, with my Safari)
> (and I don't understand why it works in other ones)

I can't see from which version (or date) the myObject.click() works on links

Not expected here :
<http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-2651361>


It seems it is since HTML5 began to +/- be used ...
ie : Firefox :
<https://developer.mozilla.org/en/DOM/element.click>
-- 
Stéphane Moriaux avec/with iMac-intel

[toc] | [prev] | [next] | [standalone]

#14853

Hello SAM,

SAM wrote:
> Le 03/07/12 12:09, Sebastien Vauban a écrit :
>> I've made up an example of what I'm trying to achieve in
>> http://jsfiddle.net/svajquery/ttVUA/4/.
>>
>> I have "tabified" all H2, and want to click on a link in the first tab
>> ("Dashboard") and want to be redirected on the right place of the second tab
>> ("Tasks").
>>
>> While the URL is correctly displayed in the address bar of the browser (at
>> least when testing those files in a real browser environment), the .click() is
>> not effective.
>
> the function click() can't work with a link (in "normal" JS) it was made for
> buttons of forms (submit for instance)

OK. Though, I'm not sure to fully understand, as it is clear that it does work
in the following lines:

--8<---------------cut here---------------start------------->8---
          // set the right tab as current
          $('#tabs > li a[href="#' + tabname + '"]').click();
      }
      else {
          // set the first tab as current (on page load)
          $('#tabs > li a').filter(':first').click();
--8<---------------cut here---------------end--------------->8---

>> I must press on the Refresh button to really go where I want to.
>>
>> Do you have any explanation?  I surely miss something!
>
> <a href="#sec-2-2" onclick="showMe('Task')">Do that tomorrow</a>
>
> You probably only need to show the good div (and hide the other one)
> the link will naturally run to the anchor 'sec2-2' (basic html)

Here, you come up with a function `showMe' that I did not yet have...

I've managed to get this code for it:

--8<---------------cut here---------------start------------->8---
function showMe (tab) {
    alert("tab = " + tab);

    // highlight the selected tab in the menu, and dim all others
    $('#tabs > li').removeClass('selected');
    $('#' + tab).parent('li').addClass('selected');

    // show the contents of the selected tab, and hide all others
    $('.outline-2').hide();
    $('#' + tab).parent('.outline-2').show();

    // don't follow the link
    return false;
}
--8<---------------cut here---------------end--------------->8---

With it, the following link:

    <a href="#sec-2-2" onclick="showMe('sec-2')">Do that tomorrow</a>

is correctly followed; I mean: "Tasks" tab is opened, and the page is
positioned on screen as I expect it.

Though, my problem is that the pages I'm working on are completely generated
HTML. Hence, it is difficult to imagine having the correct call (to the
correct tab) in `onclick'. Moreover, in real-life examples, there won't be
just one tab with tasks, but many different ones: a "Tasks" tab, an "Issues"
tab, and so on. And the purpose from the "Dashboard" tab is to jump where
appropriate, upon clicking.

I have a gut feeling that there must be a simpler way -- however, well beyond
my JS debugging experience (simply above what I know from JS). Why do I think
that? Because the first snippet of code (here above) works well with such
links:

- file.html sets the first tab as the current one

- file.html#sec-2 (or file.html#tasks, if I would have given a more
  significant name) sets the second tab as the current one (after an eventual
  click on the browser's refresh button)

- so does file.html#sec-2-1 (that is a link inside the second tab), with a
  browser refresh

So, such links (to individual tasks) are essentially correctly followed... but
only after a browser refresh. That's the stumbling block.

Does this help (for helping me ;-))?

Thank you very much in advance for your help!

Best regards,
  Seb

-- 
Sebastien Vauban

[toc] | [prev] | [next] | [standalone]

#14855

Hello,

> SAM wrote:
>> Le 03/07/12 12:09, Sebastien Vauban a écrit :
>>> I've made up an example of what I'm trying to achieve in
>>> http://jsfiddle.net/svajquery/ttVUA/4/.
>>>
>>> I have "tabified" all H2, and want to click on a link in the first tab
>>> ("Dashboard") and want to be redirected on the right place of the second tab
>>> ("Tasks").
>>>
>>> While the URL is correctly displayed in the address bar of the browser (at
>>> least when testing those files in a real browser environment), the .click() is
>>> not effective.
>>
>> the function click() can't work with a link (in "normal" JS) it was made for
>> buttons of forms (submit for instance)
>
> OK. Though, I'm not sure to fully understand, as it is clear that it does work
> in the following lines:
>
>           // set the right tab as current
>           $('#tabs > li a[href="#' + tabname + '"]').click();
>       }
>       else {
>           // set the first tab as current (on page load)
>           $('#tabs > li a').filter(':first').click();
>
>>> I must press on the Refresh button to really go where I want to.
>>>
>>> Do you have any explanation?  I surely miss something!
>
> I have a gut feeling that there must be a simpler way -- however, well
> beyond my JS debugging experience (simply above what I know from JS). Why do
> I think that? Because the first snippet of code (here above) works well with
> such links:
>
> - file.html sets the first tab as the current one
>
> - file.html#sec-2 (or file.html#tasks, if I would have given a more
>   significant name) sets the second tab as the current one (after an
>   eventual click on the browser's refresh button)
>
> - so does file.html#sec-2-1 (that is a link inside the second tab), with a
>   browser refresh
>
> So, such links (to individual tasks) are essentially correctly followed...
> but only after a browser refresh. That's the stumbling block.
>
> Does this help (for helping me ;-))?
>
> Thank you very much in advance for your help!

To ease answering on this, please find the current files used as example
there:

- http://www.mygooglest.com/sva/ecm-jumping-to-the-right-tab.html
- http://www.mygooglest.com/sva/ecm-jumping-to-the-right-tab.js

Best regards,
  Seb

-- 
Sebastien Vauban

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web