Creating a cookie in Django to save a list view with basic Javascript techniques

I've implemented a feature in my Django view where users can toggle between two different "views" of a list using a toggle button. One option displays a map with markers and information, while the other option shows the same information in a list format.

Switching between views by clicking the toggle button works perfectly thanks to an onClick JavaScript function that changes the display style. However, the issue arises when the page is reloaded.

If the default view is set to the map view but a user switches to the list view before refreshing the page, the list view should be displayed upon reloading. I understand that this can be achieved using cookies, but I'm unsure how to update the cookie every time the toggle button is clicked using vanilla JavaScript or in my Python view.

One possible solution could involve creating separate Django views for "mapView" and "listView," redirecting users to different URLs when they click the toggle buttons. However, I prefer to keep all the information loaded on the same page without resorting to this approach.

I have also attached a GIF demonstrating the current functionality. In the example, I clicked on the map view, reloaded the page, and then switched back to the list view.

https://i.sstatic.net/vJPMI.gif

Thank you!

Answer №1

My solution involves using a custom Javascript function to store a cookie that saves the view.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Are there any disadvantages to utilizing bindActionCreators within the constructor of a React component when using Redux?

I have come across numerous instances where the bindActionCreators function is used within the mapDispatchToProps function as shown below: ... const mapDispatchToProps = (dispatch, props) => ({ actions: bindActionCreators({ doSomething: som ...

Populate Vue 3 Element-plus Virtualized Table with actual data

As a newcomer to frontend development, I am currently working on integrating Element-plus Virtualized Table with actual data. Here is the basic structure of the example: const generateColumns = (length = 10, prefix = 'column-', props?: any) => ...

I am attempting to separate this "for" loop in order to generate five distinct DIV elements

Hello there! I am a beginner and I am attempting to create 5 different players by using some code that I found. Here is the code I have been working with: https://codepen.io/katzkode/pen/ZbxYYG My goal is to divide the loop below into 5 separate divs for ...

Tips for continuing code execution in an ajax success function following the completion of a nested ajax call within the success block

I am facing an issue with a function that utilizes $.ajax. In the success section of the function, I have three nested functions. The first one executes properly, but the second one contains another $.ajax call. While the internal $.ajax call works fine, t ...

Limiting the amount of blogs shown on a single page can be achieved with Yii 1 and PHP

I have successfully implemented a feature to display blogs on one page. However, I now want to modify it so that only 5 blogs are shown per page and the user can click on a "next page" button to view the next set of 5 blogs. Here is the code snippet from ...

Issues with ng-show functionality occurring during the initialization of the webpage

While working on a webpage using HTML, CSS, and Angular.js, I encountered an issue where the page content would not display properly upon loading. The objective was to show selected content based on user choices from a dropdown menu. Although the filtering ...

Having trouble sending a JavaScript variable to PHP using Ajax

I have a challenge where I need to pass values of a JavaScript variable to a PHP page and use those values there. However, when I do this, it returns a new HTML page that displays an error message saying "some error". Unfortunately, I cannot figure out why ...

Listening for server updates with jQuery

I am currently working on a web application that communicates with a server for database updates. The issue I am facing is that the update process can vary greatly in time, ranging from milliseconds to tens of seconds for larger updates. I would like to im ...

Adjust the size of a div by clicking a button using Javascript

<script type="text/javascript"> var btn = document.getElementById("btn"); var panel = document.getElementById("panel"); var btn2 = document.getElementById("btn2"); function expandPanel() { btn.style.display="none"; panel.style="overflow:hidd ...

``There is an issue with the onsubmit property that prevents the opening of

I have encountered an issue with my forms that has me stumped. Despite searching online for help, I can't seem to figure out why my implementation is not working as intended. The concept is straightforward. I've embedded a form within a JSP page ...

Error in Adding Items to React To-Do List

As I work on creating a React todo app following a tutorial, I have encountered an issue. Despite having components and context files set up, the addItem function does not render the item and date into the todo list when the 'Add todo' button is ...

export default select an option

Forgive me if my question comes off as naive, but I'm still learning the ropes. :-) I stumbled upon something perplexing in this GitHub file. I am aware that we can export or import default functions, but in this instance, the author has used: expo ...

The use of jquery UI.js is causing issues with loading select menus dynamically

When attempting to load a dynamically loaded select menu on my page using Ajax/PHP, I encountered an issue where the jquery UI plugin prevented the data from loading. As a result, I was unable to see anything when changing the first select menu. Below is ...

Choosing a value using Jquery on change is not effective

NOTE: Unnecessary information has been removed I am looking to select the parent element when the value of a select element is changed, and then serialize that parent: jQuery('body').on('change','.shop_table select',function ...

Issue with SwiperJS not completely filling the height of a div

My issue relates to using swiperJS with multiple images, as I'm struggling to make it take the full width and height of the containing div. Despite applying styling like this to my images: .swiper-slide img { width: 100%; height: 1 ...

Easy way to eliminate empty elements following a class using jQuery

I'm encountering a situation where I have a group of elements following a specific class that are either empty or contain only white space. <div class="post-content"> <div class="slider-1-smart"> --- slider contents --- < ...

JavaScript's async function has the capability to halt execution on its own accord

Presented here is a JavaScript async function designed to populate a sudoku board with numbers, essentially solving the puzzle. To enhance the user experience and showcase the recursion and backtracking algorithm in action, a sleeper function is utilized b ...

Encountered a Node JS error when executing the command { PORT=4001 npm run test}

const app = express(); const port = process.env.PORT || 4000; app.listen(port, function(){ console.log('Listening on port ' + port); }); When I execute this command: $ PORT=4001 npm run test I encounter the following error: PORT=4001 : T ...

django djcelery: creating a task that is transactional does not result in it getting rolled back

I am attempting to perform a task that involves transactions, where the database changes will be rolled back if an email fails to send. Here is my code snippet. Can anyone provide feedback on what I may be doing incorrectly? from celery.task import task ...

Encountered an issue following deployment to Heroku (Application error)

Introduction I recently created a Login form for my project. The frontend is deployed on Netlify at this link, and the backend is hosted on Heroku which can be accessed here. To view the backend logs, click here Here is a snippet of my index.js file: co ...