How to call a href by onclick event of a button?

Question

I have the following a href I use to open jquery dialogs, which works fine. Basically, the openDialog class has attached the jquery dialog code:

 <a class='openDialog' data-dialog-id='myEditDlg' data-dialog-autosize='false' data-dialog-alt='580' data-dialog-larg='740' data-dialog-title='test dialog' href='/mycontroller/EditDlg/myid'></a>

Now, I'd like to call it by the onclick event of a button. Basically, I'd like to have the same behaviour of the clicked <a class='openDialog' href when I click a button. How can I do it?**

Where do you assign the handler that opens the dialog (i.e. JavaScript code)? You probably need to alter the selector to include certain buttons. — pimvdb, Feb 25 '12 at 13:06
In JQuery, binding to an element's onclick event is as simple as $('.selector').click(function() { ... }). Having said that, I'm not sure what your question is asking... — Karl Barker, Feb 25 '12 at 13:06
Thank you all. Sorry, phearps the question is not well formulated...basically, I'd like to have the same behaviour of the — Larry, Feb 25 '12 at 13:19
But what piece of JavaScript code is responsible for opening the dialog? You can probably alter that such that a button does the same thing. — pimvdb, Feb 25 '12 at 13:21
Thank you @pimvdb. In fact I need to know how to write the code to reproduce the a href click event... but I have no idea how I can do it. — Larry, Feb 25 '12 at 13:25
Please drop the tags in titles, and signatures in posts. And don't write answers in questions. — Lightness Races in Orbit, Feb 26 '12 at 14:14

score 6 · Answer 1 · edited Feb 25 '12 at 14:35

6

If I get you question right then may be jQuery trigger()(?) is what you are looking for. Example:

<button id="bt">Click</button>
<a href="example.com" id="ex">Triggerable link</a>

<script type="text/javascript">
  $('#bt').click(function() {
       $('#ex').click();
  });
</script>

edited Feb 25 '12 at 14:35

petschekr

1,293
1
13
19

answered Feb 25 '12 at 13:12

check123

1,989
2
22
28

Thank you. Basically, I'd like to have the same behaviour of the – Larry Feb 25 '12 at 13:22
1

What I understand is: You want a `button` which when clicked behaves as if your `a` tag is clicked. In that case the above code should work. – check123 Feb 25 '12 at 13:31
Thank you @check123! Now I put code it is more clear to me. Pheraps it could work. So - pls tell me if it is wrong - I should put a hidden a href for each button I have and then bind the trigger, right? So, when I click on the button, the hidden a hrefs are opened, right? – Larry Feb 25 '12 at 13:32
1

You can do that. Or better why not style the 'a' tag to look like a button. Then you can rid yourself of all that useless burden. http://www.google.com/search?q=style+anchor+tags+as+button – check123 Feb 25 '12 at 13:40
Thanks again @check123. I am going to do some test with your precious suggestions and I'll let you know! – Larry Feb 25 '12 at 13:44
Thank you very much! Your last solution is exactly what I needed! I am using styled anchors and it works fine! THX! – Larry Feb 25 '12 at 14:28
Sorry check123, I removed solution because the main answer is not exactly the real solution to the problem. I wrote inside the question the solution of style the anchors as you suggested, but it did not respect forum rules, so it has been removed. If you could edit your answer, putting your other suggestions too, I think it could be understood by others who have my same problem. Then I'll mark again your as the answer. THX – Larry Feb 26 '12 at 14:20
1

Never mind all these little things. That it was of help to you is important rest all is secondary. – check123 Feb 26 '12 at 17:00

score 5 · Answer 2 · answered Feb 25 '12 at 13:32

5

You can emulate the click by

 $('#link').click();//No arguments inside the call.

This will emulate the click event on the link. It is the same as clicking on the link. This ofcourse won't change the location if you have an event handler that stops the default behavior of the link If you want to redirect to the href attribute you can use:

 location.href=$('#link').attr('href');

So if you want to call this on click of a button.

$('#button').click(function(){$('#link').click();
   location.href=$('#link').attr('href');//In case the page doesn't change although you want it to
}

answered Feb 25 '12 at 13:32

SoWhat

5,564
2
28
59

Thank you! First I am going to follow code123 suggestion. I could have several buttons and hrefs, so I think that it could be convenient, please tell me if I wrong. I am just a beginner. Thank you very much! I'll let you know. – Larry Feb 25 '12 at 13:41
1

they're the same, actually. If you want the user to follow the link to another page, use location.href method. If you want to emulate a click, you can use either of our methods. The first line in my code does basically the same as code123's method. – SoWhat Feb 25 '12 at 15:41
THX for your help. In my case I just need to open a jquery dialog and remain on the same page. For this reason I prefer to mantain the ``, adding the `openDialog` class to it and styling like a button. I have a `live` `click` binding on the openDialog class, which opens a jquery dialog. Thank you very much! – Larry Feb 25 '12 at 17:26
u cud just use a button tag instead of a – SoWhat Feb 25 '12 at 18:03
THX. I need to have a button behaviour, but a custom style. For example, I do not need button border, neither a 3D aspect of a button. Anyway now it works as I needed. THX – Larry Feb 25 '12 at 18:06

How to call a href by onclick event of a button?

2 Answers2

Linked