John
John

Reputation: 6612

Toggle on remote link

I have a link which retrieves data and shows all details, which works fine. However, I want it to act like a toggle, where it removes the details after a second click. It also should not send the ajax request to the server.

Maybe some state should be saved to know to either show the details or remove them? What is the best way to do this? This is the link:

= link_to "details", testitemlogs_path(testitem_id: testitem.id), remote: true

Upvotes: 0

Views: 94

Answers (2)

Qaisar Nadeem
Qaisar Nadeem

Reputation: 2434

I think you can do it with little javascript.

= link_to "details", testitemlogs_path(testitem_id: testitem.id), remote: true , id:'details-button'

$('#details-button').click(function(e){
    if($(this).hasClass('data-fetched')) {
      $('#target_div_id').remove(); //You can do whatever you want like hide or remove it from page
      e.preventDefault();
      e.stopPropagation();
     }
  $(this).toggleClass('data-fetched');
 });

This script toggle data-fetched class on the anchor and check if that class exists then dont fetch data and hide/remove the target div.

Change target_div_id with actual container id which you wanna hide

Upvotes: 1

dp7
dp7

Reputation: 6749

I think this can be done with the help of jQuery/Javascript.
Initially, you can show the link_to button as you are having right now on page load.
By clicking on the link_to, you should also hide the current link_to button and show another button with different id.
Then by clicking on the other button, you can hide the details form of your page.

Upvotes: 0

Related Questions