I'm working on a Rails 4 app. I need to trigger a click in a link using javascript (or jQuery). I have this in my view:

<%= link_to t('.fixture'), fixture_manager_tournament_path(format: :js), remote: true, id: 'fixture-link' %>

this generates:

<a id="fixture-link" data-remote="true" href="/manager/tournaments/1/fixture.js">Fixture</a>

Notice the remote: true. This is working fine when I click the link, but I need to simulate the click through js. I've tried with:

$('#fixture-link').click();
$('#fixture-link').trigger('click');
$('#fixture-link').trigger('click.rails');

But none of them are working. Thanks in advance!

EDIT

@RustComet Comet It should replace the HTML of one of my divs...

@RichPeck I have a view too big. Then, to avoid long rendering time, I'm trying to load partials through JS. I've used this info: to achieve that.

My view have various tabs and all of they are loaded through JS (except one). Then I added an additional parameter to the route in order to access directly to the desired tab. So I can go to /tournament?active=fixture and see the fixture.

The issue is, the tab is active but the content isn't here. (Of course, the ajax request and callbacks aren't fired until I clic on the link). That is why I'm trying to simulate a clic on that link and load the corresponding tab.

I'm working on a Rails 4 app. I need to trigger a click in a link using javascript (or jQuery). I have this in my view:

<%= link_to t('.fixture'), fixture_manager_tournament_path(format: :js), remote: true, id: 'fixture-link' %>

this generates:

<a id="fixture-link" data-remote="true" href="/manager/tournaments/1/fixture.js">Fixture</a>

Notice the remote: true. This is working fine when I click the link, but I need to simulate the click through js. I've tried with:

$('#fixture-link').click();
$('#fixture-link').trigger('click');
$('#fixture-link').trigger('click.rails');

But none of them are working. Thanks in advance!

EDIT

@RustComet Comet It should replace the HTML of one of my divs...

@RichPeck I have a view too big. Then, to avoid long rendering time, I'm trying to load partials through JS. I've used this info: https://stackoverflow./a/15174908/3893506 to achieve that.

My view have various tabs and all of they are loaded through JS (except one). Then I added an additional parameter to the route in order to access directly to the desired tab. So I can go to /tournament?active=fixture and see the fixture.

The issue is, the tab is active but the content isn't here. (Of course, the ajax request and callbacks aren't fired until I clic on the link). That is why I'm trying to simulate a clic on that link and load the corresponding tab.

• javascript
• jquery
• ruby-on-rails
• html

• 1 Is $('#fixture-link').click(); producing any kind of error? Could you open the debugger and try to access $('#fixture-link') to see whether it is undefined? – Leo Brito Commented Dec 16, 2015 at 1:05
• 1 The middle line should do the trick. Have you wrapped your JavaScript code in a $(document).ready() block? – Ryan K Commented Dec 16, 2015 at 1:09
• @brito No, there is no error in the console. If I access to $('#fixture-link') in the console it returns the correct object. <a id="fixture-link"... @RyanK Yes I wrapped the JS in jQuery(document).ready(function() { ... }) Also, executing $('#fixture-link').trigger('click'); in the Chrome console doesn't do anything. – luuchorocha Commented Dec 16, 2015 at 1:21
• Is it possible that the JS event is in fact firing but not returning anything? – RustComet Commented Dec 16, 2015 at 5:05
• Why do you need to simulate the click? – Richard Peck Commented Dec 16, 2015 at 10:51

2 Answers 2

Though its very late and you have got your problem solved, but here is the actual solution :)

$('#fixture-link')[0].click();

You missed [0] portion.

Solved! I've solved this by loading the correct JS and executing it directly, using the 'active' parameter and without need a click on the links. Thanks to everyone who helped me!

If someone wants to know, this is the code I've used (its coffeescript):

tournament = $('#main-wrapper').data('tournament')
$.get '/manager/tournaments/' + tournament + '/fixture.js', (data) -> data