Save the click value for future use

Question

Save the click value for future use

My appointment form is divided into separate panels.

At Step 1, if a user clicks on London (#Store1), I want to hide the Sunday and Monday options from the calendar in panel 5.

Essentially, I need to save this click event so that when the user reaches the calendar panel, it will remember not to display Sunday and Monday.

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

After capturing this click event, I intend to execute it during the calendar's display.

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 unsure if I have written this correctly, so any assistance or recommendations would be appreciated.

Thank you in advance

javascript

Answer 1

Answer №1

Instead of simply "storing a click", think about assigning data values to your clickable elements and saving the selected value. This way, you can make changes to the UI based on this chosen value.

Take for instance some clickable elements with specific 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>

Instead of creating separate click events for each individual button and customizing the UI accordingly, create a single universal event handler that captures the clicked value. For example:

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

This way, any section with access to the selectedStore variable will know which store is currently selected. You likely have a data structure in place to decide which "days" should be displayed/hidden, right? For example, suppose you have a list of stores with their corresponding valid days:

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

Your "days" buttons could also have corresponding day ID values like so:

<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 utilize this data to determine which buttons to display or hide. Here's an example approach:

$('.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 numerous strategies to achieve this, depending on your UX design and flow. If you need to retain data across multiple pages (even though you mentioned "panels" suggesting a single-page setup), consider using local storage to persist variables such as selectedStore as you transition between contexts.

In essence, it all boils down to organizing your data, correlating UI elements with that data, and applying logic based on that data to manage the UI components. Rather than solely altering UI elements based on user interactions, updating your data following these interactions then adjusting your UI based on this refined data is the recommended practice.

Answer 2

Instead of simply "storing a click", think about assigning data values to your clickable elements and saving the selected value. This way, you can make changes to the UI based on this chosen value.

Take for instance some clickable elements with specific 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>

Instead of creating separate click events for each individual button and customizing the UI accordingly, create a single universal event handler that captures the clicked value. For example:

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

This way, any section with access to the selectedStore variable will know which store is currently selected. You likely have a data structure in place to decide which "days" should be displayed/hidden, right? For example, suppose you have a list of stores with their corresponding valid days:

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

Your "days" buttons could also have corresponding day ID values like so:

<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 utilize this data to determine which buttons to display or hide. Here's an example approach:

$('.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 numerous strategies to achieve this, depending on your UX design and flow. If you need to retain data across multiple pages (even though you mentioned "panels" suggesting a single-page setup), consider using local storage to persist variables such as selectedStore as you transition between contexts.

In essence, it all boils down to organizing your data, correlating UI elements with that data, and applying logic based on that data to manage the UI components. Rather than solely altering UI elements based on user interactions, updating your data following these interactions then adjusting your UI based on this refined data is the recommended practice.

Answer 3

Answer №2

If you need to store data locally and access it from different parts of your code, you can utilize local storage.

To set a value:

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

To retrieve the value: simply parse the stored JSON object like this:

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

Here's an example of how to use it:

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

Answer 4

If you need to store data locally and access it from different parts of your code, you can utilize local storage.

To set a value:

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

To retrieve the value: simply parse the stored JSON object like this:

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

Here's an example of how to use it:

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

Save the click value for future use

Answer №1

Answer №2

Similar questions

Ways to find the image source using JavaScript/Jquery upon page loading?

Is it possible to apply the active class to the current list menu item in Mark using server-side techniques instead of client-side JS

Encountered an issue while attempting to transfer data using Marak/faker.js

Access the value of localStorage when the body has finished loading or when the document is fully

Passing an array list back to the parent component in ag-grid(Vue) - A step-by-step guide

Incorporating an SVG with CSS styling from a stylesheet

React-Bootstrap Popup encounters overlay failure

How can I incorporate an error page into this Express application?

A method for arranging an array of nested objects based on the objects' names

Is there a way to enable popovers globally and also utilize the container: 'body' option simultaneously?

There was an issue when trying to process the Javascript data structure with JSON.parse

Instructions on how to insert a single parenthesis into a string using Angular or another JavaScript function

Is it possible to create a channel list using the YouTube API if I am not the owner of the channel? I am not getting any errors, but nothing is showing up

What is the reason behind React re-rendering child components despite passing props that have been memoized with useMemo?

In React js, I wanted to display the animation specifically on the "add to bag" button for the added item

Is the Vis.js network function ready to go?

Accessing form data from Ajax/Jquery in php using $_POST variables

Arranging buttons in a row with Bootstrap 5

VueJS: Incorporating a Computed Property within a v-for Loop

Error Encountered: "JSON Post Failure in ASP.net MVC resulting in 500