Comparing Methods for Populating Dropdown Lists: JavaScript vs Database Integration (Mysql-Django)

I am looking to implement 3 dropdown lists that work together:

Select: State
Select City
Select: Restaurant

When a selection is made in the first dropdown list, it should update the "Select City" list. Similarly, when a selection is made in the second dropdown list, it should update the last one.

I am considering 3 different approaches:

  1. Using Javascript to populate all possible values and using form onchange to trigger the update method.
  2. Populating the dropdowns from a MySQL database.
  3. A combination of both - populating the first 2 with JavaScript and the last one from a database.

Now I am interested in comparing the performance and pros/cons of each approach for hosting, VPS, and PAAS solutions.

javascriptmysqldjangodrop-down-menuweb

Answer №1

To enhance usability, I suggest implementing Ajax calls to update the select boxes.

By opting for this method, you can maintain most of your application logic on the server side, making it easier to conduct tests in many cases.

You can load the initial select box by fetching data in your view and passing it to your template. By disabling the other two select boxes, you can activate/populate them after the first one is selected using an ajax call.

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

Retrieve properties of the chosen MenuItem from a Select component in Material UI

My custom component const myUniqueComponent = ({ title, data, errors, onSubmit, groups }) => { const [state, setState] = useState( Object.assign( { username: "", password: "", group: "", isAdmin: false, ...

javascriptreactjsmaterial-ui

Arrange the divs in numerical order based on the number of downloads

I wrote a basic code to organize parent divs based on their titles. However, when I attempted to do the same for download counts, nothing happened - no errors or actions from the code. There are two functions in total, both of which are triggered by butto ...

javascripthtml

What could be causing my function to execute thrice?

I cannot seem to figure out why my tag cloud is causing the required function to run multiple times instead of just once when I click on a tag. This issue persists whether using jQuery or plain JavaScript. What am I missing? The code I have is very simple, ...

javascriptjqueryhtmlcss

Is there a jade plug-in available that enables manipulation using syntax similar to jQuery?

If I have a list of li elements and I want to use JavaScript to find an element with class X and modify some of its attributes, I know it can be done with regular JavaScript, but I'm unsure of how to select existing elements and manipulate them. Is th ...

javascriptnode.jsexpresspugtemplating

What is the simplest method to create a scroller for engaging narratives?

I am in the process of creating a static but responsive storytelling website using HTML. My objective is to create an effect similar to this: https://i.stack.imgur.com/zIEpU.gif The idea is to have text on the left and a *.jpg image fixed on the right. As ...

javascripthtmlcssscrollbar

Local Storage State Persistence Issue with React Checkbox Component

I am currently working on a React component that features a checkbox. My goal is to have the checkbox toggle between on and off states and save this state in local storage so that even when navigating to another page, the toggle will remain in its previous ...

javascriptreactjslocal-storagestatereact-component

"Moisten" a JavaScript object instance using a JSON array, similar to the way PHP does

When populating PHP objects with data, I typically use the following method: public function hydrate(array $data){ foreach($data as $key=>$value){ $method = 'set'.ucfirst($key); if(METHOD_EXISTS($this,$method)){ ...

javascriptphparraysjsonobject

The PHP SQL IF NOT EXISTS clause is failing to function

Seeking assistance with SQL and PHP. I am trying to INSERT data into my table, but I want to ensure that duplicates are not created. Here is what I have attempted: INSERT INTO friends (id, userid, friendid, accepted) VALUES (null, '1', '20& ...

mysql

Access information from AJAX request beyond the success function

Currently, I am utilizing beautiful soup to extract information from a webpage. A user inputs their zip code upon arriving at the main page of my site, triggering an AJAX request to Django for data retrieval based on the input. The corresponding JavaScript ...

javascriptajaxdjangojquery

Redirect events in Backbone views

Is there a way to navigate to a different page when a specific event is triggered in a View using Backbone? events: { 'click .btn': 'signin' }, render: function() { tmp = this.template(); this.$el.html(tmp); }, signin: func ...

javascriptbackbone.js

MariaDB: Removing Array Key and Value using Mysql JSON_REMOVE

In MariaDB/MySQL, I am dealing with the following JSON data: [{"uid": 5}, {"uid": 6}, {"uid": 7}] user_pst_tb ------------------------------ pst_id | pst_liked_by -------------------------- 1 |[] -------|---------------- . |[{"uid": 9}] ------- ...

mysqlarraysmariadbkey-value

Develop search bar button and file directory components

Within this application, there is a search engine designed to scan through the file tree for specific content. The goal is that upon entering a search query and clicking the Search button, the file tree will filter and display the relevant information. Cu ...

javascriptreactjs

Exploring jQuery Mobile | Moving Seamlessly between Pages

I'm relatively new to JQM and I'm working on creating a mobile application using jQuery Mobile. Here's the goal I'm aiming for: I have multiple HTML pages, each with its own CSS, JavaScript, and JQM components. What I want is to be ab ...

javascriptjqueryhtmljquery-mobilejquery-mobile-pageshow

effective method for iterating through JSON data using JavaScript or jQuery

Upon receiving a JSON object from the server, it looks like this: { "0": { "id": "1252380", "text": "This whole #BundyRanch thing stinks to high hell. Can it be a coincidence that Harry Reid n his son have a financial interest in this land?", ...

javascriptjqueryjson

How can we know when a JavaScript ES6 arrow function comes to a close?

One thing I've been pondering is how an arrow function terminates when it lacks brackets. I encountered this issue when working with ReactJS, where I had a function followed by the start of a class declaration. Here's the snippet: const Search = ...

javascriptreactjsecmascript-6jsx

Counting the number of tasks associated with Django models relations

Attempting to retrieve a function from a table that should be present, but unable to access the value. The goal is to determine the number of completed tasks. models.py class Task(models.Model): title = models.CharField(max_length=55, null=T ...

htmldjangodjango-models

Divine ListTable - The first row is securely locked, preventing any selection or scrolling

I am a newcomer to blessed and I am encountering an issue with my listTable where the top line does not scroll properly. Any advice on how to rectify this? var blessed = require('blessed'); var screen = new blessed.Screen // Function for genera ...

javascriptnode.jsterminal

Stop users from being able to select or highlight text within a content editable div

Is there a method to develop a content-editable div where users are unable to select or highlight content, but can still input information? I'm interested in creating an interface that forces users to delete and enter data character by character, with ...

javascriptjqueryhtmlcssdom

All web resources need to be included in the web_accessible_resources manifest key

I'm encountering an issue with my Angular app. The error message on the client console reads: Denying load of chrome-extension://fiekimdgbphfmnlbiahcfdgcipcopmep/js/lib/angular/angular.min.js.map. Resources must be listed in the web_accessible_resour ...

javascriptangularjsgoogle-chrome

Please log out of the session if the selected item is unavailable

Can someone help me figure out if what I'm attempting in asp.net is feasible? I'm encountering an issue that I could use some expertise on. :) Within my HTML view, I am fetching values from the session and assigning them to select list items. H ...

javascriptasp.netajaxasp.net-mvc