Capturing .click for URLs

Question

I am relatively new to Javascript/Ajax.

When the user clicks on certain urls, I wish to handle the click entirely with Javascript/jquery.

<a class="row_edit" href="/sales_item/edit/{{ item.id }}"></a>

What I have done is to add a javascript to this html file:

   $(document).ready(function () {  
        $(".row_edit").click(row_edit);
    });

   function row_edit() {
      var url = $(this).attr("href") + "/";
      ...
   }

This works pretty well, every time I click on row_edit, the javascript is firing and doing the partial site loading for me. But there are cases that it seems the actual link would fire instead (I see the partial site loaded as the entire screen). It seems there is a race condition.

I think the best way to make sure only the javascript is firing would be to change the content of the href to #. That way I make sure the url by itself won't go anyway and only my javascript is firing. However how would I get my url value in the row_edit() then?

Maybe I am taking a wrong approach here though. How do you guys solve this problem?

By removing `href` you will completely break your site for non-JS users, it will also probably never get spidered properly by Google. — Dunhamzzz, Sep 03 '12 at 09:28
The site is per login only for business customers. Google spiders should stay out anyway. ;-) — Houman, Sep 03 '12 at 09:37
Are you aware of the `event.preventDefault()` method? (Where `event` is the first arguments of row_edit (`function row_edit(event) {`)) — Andreas Louv, Sep 03 '12 at 09:37
Interesting. No I had no idea. Thanks. Just a quick question on the side, why would users block JS in first place, that I had to consider them? thanks — Houman, Sep 03 '12 at 09:43

M. Abbas · Accepted Answer · 2012-09-03T10:01:02.663

2

To make sure only the javascript is firing (Cancel the default action (navigation) of the click), you have to call the preventDefault(); in the click handler.

Ex:

$(document).ready(function () {  
        $(".row_edit").click(row_edit);
    });

   function row_edit(event) {
      var url = $(this).attr("href") + "/";
      ...
      event.preventDefault();
   }

edited Sep 03 '12 at 10:01

answered Sep 03 '12 at 09:37

M. Abbas

6,409
4
33
46

1

IMO this is the best practise because if JavaScript is disabled the click will proceed as normal. In the other cases explained nothing will happen. – Andreas Louv Sep 03 '12 at 09:39
1

You don't need to add an extra function in there. The first argument for row_edit will be the event anyway: $(".row_edit").click(row_edit); – Alex Sep 03 '12 at 09:40
1

@Kave this article answers your question http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/ See section: **Top, Bottom or Somewhere in the Middle** – M. Abbas Sep 03 '12 at 20:01

score 1 · Answer 2 · answered Sep 03 '12 at 09:29

1

I am not sure about the intent of performing the redirection using javascript instead of href. Anyways, one of the approaches is here...

If you are implementing for modern browsers which support "data-" (HTML5) then you can use such attributes

<a class="row_edit" data-url="/sales_item/edit/{{ item.id }}" href="#"></a>

and modify the javascript to get the appropriate attribute value

 var url = $(this).attr("data-url") + "/";

answered Sep 03 '12 at 09:29

Sandeep G B

3,957
4
26
43

+1 Thanks this is pretty much what I was looking for. Yes I am using Twitter-Bootstrap, which is based on HTML5. regarding your question, I am editing the row in place (ajax), rather than loading the entire page. Hence using javascript instead of href. – Houman Sep 03 '12 at 09:39

score 0 · Answer 3 · answered Sep 03 '12 at 09:34

0

<a href="#"> click me </a>

'#' for blocking clcik
through jquery block the default event.
add your new event handler.

Refer Link(jquery):-

http://jsfiddle.net/8LeaP/

answered Sep 03 '12 at 09:34

sandeep patel

436
4
16

Capturing .click for URLs

3 Answers3

Linked