CODEWITHSUNDEEP
javascript
Danzel
Danzel

Reputation: 41

Store click value to use later on

Basically, I have an appointment form which is broken down into panels.

Step 1 - if a user clicks london (#Store1) then hide Sunday and Monday from the calendar in panel 5.

Basically, I want to store this click so that when the user gets to the calendar panel, it will know not to show Sunday and Monday 

$('#store1').click(function () {
    var $store1 = $(this).data('clicked', true);
    console.log("store 1 clicked");
    $('.Sunday').hide();
    $('.Monday').hide();
});

after I have captured this in a var I then want to run it when the calendar displays.

function ReloadPanel(panel) {
    return new Promise(function (resolve, reject, Store1) {
        console.log(panel);
        console.log("finalpanel");
        panel.nextAll('.panel').find('.panel-updater').empty();
        panel.nextAll('.panel').find('.panel-title').addClass('collapsed');
        panel.nextAll('.panel').find('.panel-collapse').removeClass('in');
        var panelUpdater = $('.panel-updater:eq(0)', panel),
                panelUrl = panelUpdater.data('url');

        if (panelUpdater.length) {
            var formData = panelUpdater.parents("form").serializeObject();
            panelUpdater.addClass('panel-updater--loading');
            panelUpdater.load(panelUrl, formData, function (response, status) {
                panelUpdater.removeClass('panel-updater--loading');
                if (status == "error") {
                    reject("Panel reload failed");
                } else {
                    resolve("Panel reloaded");
                }
            });
        } else {
            resolve("no reloader");
        }
    });
}

I'm not sure if this is even written right, so any help or suggestions would be great

Thanks in advance

Upvotes: 0

Views: 52

Answers (2)

David
David

Reputation: 218847

Don't think of it as "storing a click". Instead, consider your clickable elements as having some sort of data values and you store the selected value. From this value you can derive changes to the UI.

For example, consider some clickable elements with values:

<button type="button" class="store-button" data-store-id="1">London</button>
<button type="button" class="store-button" data-store-id="2">Paris</button>
<button type="button" class="store-button" data-store-id="3">Madrid</button>

You have multiple "store" buttons. Rather than bind a click event to each individually and customize the UI for each click event, create a single generic one which captures the clicked value. Something like:

let selectedStore = -1;
$('.store-button').on('click', function () {
    selectedStore = $(this).data('store-id');
});

Now anywhere that you can access the selectedStore variable can know the currently selected store. Presumably you have some data structure which can then be used to determine what "days" to show/hide? For example, suppose you have a list of "stores" each with valid "days":

let stores = [
  { id: 1, name: 'London', days: [2,3,4,5,6] },
  // etc.
];

And your "days" buttons have their corresponding day ID values:

<button type="button" class="day-button" data-day-id="1">Sunday</button>
<button type="button" class="day-button" data-day-id="2">Monday</button>
<!--- etc. --->

You can now use the data you have to derive which buttons to show/hide. Perhaps something like this:

$('.day-button').hide();
for (let i in stores) {
    if (stores[i].id === selectedStore) {
        for (let j in stores[i].days) {
            $('.day-button[data-day-id="' + stores[i].days[j] + '"]').show();
        }
        break;
    }
}

There are a variety of ways to do it, much of which may depend on the overall structure and flow of your UX. If you need to persist the data across multiple pages (your use of the word "panels" implies more of a single-page setup, but that may not necessarily be the case) then you can also use local storage to persist things like selectedStore between page contexts.

But ultimately it just comes down to structuring your data, associating your UI elements with that data, and performing logic based on that data to manipulate those UI elements. Basically, instead of manipulating UI elements based only on UI interactions, you should update your data (even if it's just in-memory variables) based on UI interactions and then update your UI based on your data.

Upvotes: 1

Aziz.G
Aziz.G

Reputation: 3721

you can use the local storage for that and then you can get your value from anywhere.

Set your value 

localStorage.setItem("store1", JSON.stringify(true))

Get you value then you can use it anywhere:

JSON.parse(localStorage.getItem("store1"))

Example:

$('#store1').click(function() {
  var $store1 = $(this).data('clicked', true);
  localStorage.setItem("store1", JSON.stringify(true))
  console.log("store 1 clicked");
  $('.Sunday').hide();
  $('.Monday').hide();
});

Upvotes: 0

Related Questions