Save jQuery click with ajax?

Question

I've got this code to display a different button once the other button has been clicked.

<a href="#" id="ac-button-top" class="btn btn-success add-to-cart">order</a>
<a href="#" id="ac-button-bottom" class="btn btn-success">test</a>

$('.add-to-cart').click(function() {
  $('#ac-button-top').css("display", "none");
  $('#ac-button-bottom').css("display", "block");
});

This works fine, however I need to save this click event somehow so even when the page is refreshed it still displays the second button and not the first one. My guess is you would do this using ajax but I'm a newbie to ajax and couldn't find any solution to this when I searched so if anybody could point me in the right direction of how to do this? Or any other way not using ajax?

If you don't need to send it to a server you don't need ajax, use localStorage. — Walk
– Walk, Commented Oct 5, 2017 at 9:59
AJAX would work if you want to save state in a server side data store. Cookies, localStorage or sessionStorage would work just as well if you want to keep it simple without getting a server involved. — Rory McCrossan
– Rory McCrossan, Commented Oct 5, 2017 at 9:59

artgb · Accepted Answer · 2017-10-05 10:34:52Z

2

You can use localStorage. This is fiddle https://jsfiddle.net/y0ymqps7/2/

HTML

<a href="#" id="ac-button-top" class="btn btn-success add-to-cart">order</a>
<a href="#" id="ac-button-bottom" class="btn btn-success">test</a>

Javascript

$('.add-to-cart').click(function() {
  $('#ac-button-top').css("display", "none");
  $('#ac-button-bottom').css("display", "block");
  localStorage.setItem("clicked", 1);
});
$( document ).ready(function() {
    if(localStorage.getItem("clicked") == 1){
      $('#ac-button-top').css("display", "none");
      $('#ac-button-bottom').css("display", "block");
    }
});

answered Oct 5, 2017 at 10:34

artgb

3,2716 gold badges21 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andrzej Smyk · Accepted Answer · 2017-10-05 10:34:00Z

2

Use either localStorage or sessionStorage. The difference between them is localStorage has no expiration date set, while sessionStorage is cleared when page session ends i.e. browser window or tab is closed. Page session survives page reloads and restores.

You can think of something like:

$('.add-to-cart').click(function() {
  $('#ac-button-top').css("display", "none");
  $('#ac-button-bottom').css("display", "block");
  window.sessionStorage.setItem('addToCartClicked', true);
});

// some operation later...
if (window.sessionStorage.getItem('addToCartClicked') == 'true') {
  ...
}

answered Oct 5, 2017 at 10:34

Andrzej Smyk

1,72411 silver badges21 bronze badges

Comments

Gopal · Accepted Answer · 2017-10-05 10:32:00Z

1

If you need to save click event count or datas. If you need to save these details from database. then only you can go with ajax method. Otherwise you can go with other method like..

use sessionStorage or localStorage

answered Oct 5, 2017 at 10:32

Gopal

1118 bronze badges

Collectives™ on Stack Overflow

Save jQuery click with ajax?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related