0

I am not sure if this is the right place to ask for help with my final project or if I should use a more general programming forum, but hopefully you guys can help me out.

How do you modify the HTML of a web page using information stored in a SQL table once the user selects a specific row (presumably with Java Script DOM)?

In my case I am building a site about college football teams. I already have a SQL table that has all the teams listed along with details such as team colors (hex codes) and a URL for an image of their logo. I want the user to be able to select any team from a list and then make colors and logo on the page change based on their selection. I have already created a drop down menu with all the team names by using Flask application.py to query the SQL table and Jinja to set the template. Once the users has selected a specific teams how do I go about accessing the corresponding information in that specific row of the table and then use that information to modify the HTML on the page?

0

Here's an approach, based on

  1. manipulate the DOM in js
  2. why read the database twice if one read will do
  3. HTML5 data attributes.

Here is a repro to demonstrate how I'm thinking. See it in action here

<!DOCTYPE html>
<head><title>Pick a color</title></head>
<label for="pickit">Color Picker</label>
<select id="pickit" onchange="showme(this);">
<option value="noop" >Pick a color</option>
<option value="red" data-color="rgb(255,0,0)" data-image="red.png">Red</option>
<option value="green" data-color="rgb(0,255,0)" data-image="green.png">Green</option>
<option value="green" data-color="rgb(0,0,255)" data-image="blue.png">Blue</option>
</select>
<div id="showit">
<p>In living color</p>
</div>

<script>
function showme(obj) {
// get the selected index of obj
// get the data-color and data-image from selected index
picked = obj.children[obj.selectedIndex];
newcolor = picked.dataset.color
document.getElementById('showit').setAttribute('style','color: '+newcolor+';')
return;
}
</script>

Recap: it stores the data from the database in the HTML using custom data attributes, then changes the color in javascript function based on which option is selected. Of course the javascript function may be defined in a scripts.js.

Answers to comments
Q: ... how do I get the data from the SQL table into the HTML without typing it in manually?
A: Since team colors and logo are stored in the db, assumed they would be selected and passed to the html, then used in the parameter substitution in the foreach that builds the <option> elements. Much like pset7 history page.

Q: Also would this method work with separate HTML pages?
A: This assumes you want to change the DOM on the "selection page" before the users submits the form. It is separate and distinct from any other HTML that may be served from the form action.

Q: How would this method compare to making an Ajax request to the server.
A: To my mind it is easier, reduces traffic, and saves a read or reads on the database. It is certainly another option.

9
  • Since I'm dealing with college football teams, there are more than 120 options. Would this approach be reasonable with such a large data set? Dec 13 '18 at 16:30
  • I don't see why not. Naturally the answer is based on what I think I know. Dec 13 '18 at 16:42
  • I'd prefer document.getElementById('showit').style.color = newcolor; developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style
    – Blauelf
    Dec 13 '18 at 17:05
  • Thanks for the help. I've been playing with your example, DinoCoderSaurus, and I mostly understand how it works but I have some more questions. First and foremost, how do I get the data from the SQL table into the HTML without typing it in manually? Also would this method work with separate HTML pages? (i.e users select their team on the home page and then it takes them to a custom page with the chosen colors, logo, and other information?) Dec 14 '18 at 4:43
  • @DavidZangardi You'd have to save the selected team. Could be in the browser (multiple APIs like cookies, which are also sent to the server on each request, or LocalStorage, or SessionStorage, IndexedDB, maybe others), or on the server, returned to the browser in some part included in all pages.
    – Blauelf
    Dec 14 '18 at 10:06

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .