Changing the Displayed Content with a Simple Click of a Link

Layout Overview

In the process of developing a tool to streamline work tasks, I want to ensure that I am following best practices. My goal is for the website to initially display only column A, with subsequent columns generated upon clicking links in the previous ones. Additionally, when a different link in column A is clicked, the corresponding column B should replace the existing one, and column C should be removed if visible.

My current approach involves utilizing a well-structured div layout combined with jQuery to add or remove a "hidden" class from child elements. Each column consists of a floated div containing styled links. One idea is to assign a parent container to each possible section and label them accordingly with classes for easy selection. This way, using jQuery's children().addClass("Hidden") on the parent container can hide sections defined to come after the one linked.

Considering the constraints of not having access to a MySQL database at work and unable to use company information on personal projects, Javascript seems to be the primary option. Can someone provide guidance on implementing this concept effectively?

Note: The code snippet below is incomplete but serves as an example of my current train of thought.

//Snippet of function modemBrands for handling Arris options

$('.ModemMods').children().addClass("Hidden");
$(".Arris").removeClass("Hidden");

~

<div class="NavCon">
    <nav>
     <!-- Brand options -->
        <div class="LinkCon">
            <a href="#" onclick="modemBrands('Arris')">Arris</a>
            <a href="#" onclick="modemBrands('Motorola')">Motorola</a>
            <a href="#" onclick="modemBrands('SMC')">SMC</a>
            <a href="#" onclick="modemBrands('Ubee')">Ubee</a>
        </div>

        <div class="ModemMods">
            <div class="LinkCon Arris">
                <a href="#" onclick="modemMods('DG860A')">DG860A</a>
                <a href="#" onclick="modemMods('DG1670')">DG1670</a>
                <a href="#" onclick="modemMods('DG860A')">DG860A</a>
                <a href="#" onclick="modemMods('DG1670')">DG1670</a>
            </div>

            <div class="LinkCon Motorola Hidden">
                <a href="#" onclick="modemMods('DG860A')">DG860A</a>
                <a href="#" onclick="modemMods('DG1670')">DG1670</a>
                <a href="#" onclick="modemMods('DG860A')">DG860A</a>
                <a href="#" onclick="modemMods('DG1670')">DG1670</a>
            </div>

            <div class="LinkCon SMC Hidden">
                <a href="#" onclick="modemMods('DG860A')">DG860A</a>
                <a href="#" onclick="modemMods('DG1670')">DG1670</a>
            </div>

            <div class="LinkCon Ubee Hidden">
                <a href="#" onclick="modemMods('DG860A')">DG860A</a>
                <a href="#" onclick="modemMods('DG1670')">DG1670</a>
            </div>
        </div>

        <div class="ModemRegion">
        </div>

    </nav>
</div>

Is my course of action correct? Should I consider modifying the function associated with column A links to apply the Hidden class to all parent containers of columns B or C every time it is clicked? Or is there a more efficient method to achieve this functionality?

javascriptjqueryhtmlcss

Answer №1

  1. Avoid using onclick and instead utilize addEventListener in vanilla JS or .click() in jQuery.

    Why? Separation of concerns is key. Your HTML should focus on content and layout, CSS for styling, and JS for scripting.

  2. Remember that MySQL is a database system, not a programming language. Consider hard coding values, storing them in a JSON file, or utilizing a database with server side scripting to access the data.

  3. Practice separating data from layout as shown below:

.

var motorola = {name: "Motorola", modems: ["ABC123", "BCD123", "XYZ123"]};
var cisco = {name: "Cisco", modems: ["MEOW123", "LOL123", "STACKOVERFLOW"]};
var vendors = [motorola, cisco];

for (var i in vendors) {
    $link = $("<a>").text(vendors[i].name);
    $link.attr("data-name", i);
    $link.click(vendorClickHandler);
}

function vendorClickHandler(e) {
    var vendorName = $(this).attr("data-name");
    var vendor = vendors.filter(function(t) { return t.name === vendorName })[0]; // search vendors for an element with this name

    for (var i in vendor.modems) {
         // ...
    }
}

This approach demonstrates a solid jQuery-level architecture. While a templating library can enhance it further, it may not be essential at this stage.

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

The bullets in the HTML unordered list are partially hidden from view

My unordered list is experiencing issues with displaying bullets correctly. In Firefox and Internet Explorer, the bullets are only partially shown, while in Chrome they are not visible at all. Adding margin-left: 5px to the <li> element resolves this ...

csshtml-lists

Is it possible to use getJSON to retrieve a value from an HTML tag ID that has already been displayed on a webpage? How about using json_decode

Is there a way to retrieve the value using the HTML tag ID after an HTML page has been rendered? For example, how can I access the date value using the td_date in my JavaScript function? Below is the code snippet that populates the data on the page: listS ...

phpjavascripthtmljson

Create a fresh trail underneath the overlay image

When utilizing fabric.js to draw a new path with isDrawingMode: true enabled (seen on the right side of the screenshot), I am encountering an issue where the path appears above my overlay image, which is a transparent png. https://i.stack.imgur.com/R3fGn. ...

javascripthtml5-canvasfabricjs

How can I invoke a PHP script using AJAX?

I am currently working on implementing a feature that involves multiple tables where users can move table rows between the tables. I want to use ajax to call a php script that will update the database with the new values, specifically assigning a new paren ...

javascriptphpjqueryhtmlajax

Symfony is unable to access uploaded files from an AngularJS interface

For the past 3 days, I've been grappling with uploading files via AJAX to my Symfony2 application using AngularJS. I'm utilizing my Symfony app as an API to deliver data to my Angular front end. While I can successfully post text and other data, ...

javascriptangularjsajaxsymfonyfile-upload

Warning in Next.js: Each element in a list requires a distinct "key" property

Currently, I am in the process of building an e-commerce platform using Nextjs. My current focus is on enhancing the functionality of the myCart page, which serves as a dashboard for displaying the list of items that have been ordered. Below is the code s ...

javascriptnode.jsnext.js

Checking for valid zip code using a regular expression in JavaScript

Thank you for the suggestions, everyone. I have made some modifications to the script based on your advice and it appears to be functioning correctly now. <script src="jquery-1.4.2.min.js" type="text/javascript"></script> <script> $ ...

javascriptjquery

Automate page refresh using Selenium in Java until target element becomes visible

Is there a way to have selenium wait for 3 minutes before refreshing the page until a specific element (in this case, the Download button) is found? I've attempted the code below, but it doesn't seem to be effective. Note: I am trying to upload ...

javascriptjavaselenium-webdriver

Java servlet, Selenium, and JavaScript are a powerful combination of tools that can

I am facing a situation where I need Selenium webdriver to be executed on the client side. On a webpage, I have a form with a Submit button inside it. The action attribute of the form calls a servlet named "servletName". Inside the servlet, the followin ...

javascriptseleniumservletsselenium-webdriverselenium-grid

Achieving asynchronous results in the parent function with TypeScript: a guide

The code structure provided is as follows: import {socket} from './socket'; class A{ Execute(...args[]){ //logic with Promises SomeAsyncMethod1().then(fulfilled1); function fulfilled1(){ SomeAsyncMethod2(args).then(fulfilled2); ...

javascripttypescript

"The variables in the .env file are not reflecting the latest updates. What is the best way

Currently, I am in the process of developing an application using Quasar (Vue) where I have stored my database keys in a .env file. Recently, I encountered an issue when attempting to switch to another instance and updating the keys in the env file. Despit ...

javascriptvue.jscachingenvironment-variablesquasar-framework

Programmatically adding route resolve in Angular using $routeProvider

Is it possible to dynamically add Angular's resolve after it has been initially defined in the app? Let's say we have a setup with routes like this: app.config(['$routeProvider', function ($routeProvider) { $routeProvider ...

javascriptangularjsangular-ui-router

I am looking to adjust the height of my MUI Grid component

Recently exploring React, and I'm looking to set a height limit for MUI Grid. I've structured my project into 3 sections using MUI grid components. My goal is to restrict the page height in order to eliminate the browser scrollbar. If the conten ...

javascriptcssmaterial-uigrid

Basic inquiries concerning Vue.js and JavaScript

Hey there, I recently developed a small app to practice my Vue skills. However, there are a few features that I would like to implement but I'm not sure how to do it just yet. <div class="container" id="app"> <div class="row"> <d ...

javascripthtmlvue.jsvuejs2

Exploring the capabilities of arrays within Ajax

Below is the original code I wrote in JavaScript: var wt_val = []; for (i = 0; i<human_wt.length; i++){ var mult; mult = data_list[basket_list[button_port_name][i]].map(x => x*(wt[i]/100)); wt_val.push(mult); ...

javascriptpythonajaxflask

Tips for creating a responsive background image without excessive scaling:

I'm currently working on a website with a focus on responsibility, and I've incorporated 'waves' SVG images as a background-image. The issue arises when viewing the site on smaller screens, such as mobile devices, where the background a ...

htmlcssbackgroundbackground-image

Avoiding HTML in JavaScript: Tips and Tricks

My application generates numerous elements dynamically based on server data in JSON format. This process involves embedding a significant amount of HTML directly within my JavaScript code, leading to pollution and making it increasingly challenging and l ...

javascriptjqueryhtmlajax

Implementing conditional statements in Puppeteer web scraping

Attempting to extract data from a table... Each country name is wrapped in an <a> tag, however some are not. Unfortunately, when the structure of the HTML changes, the program crashes Code => Output => I have experimented with the following ...

javascriptnode.jsweb-scrapingpuppeteercheerio

Postponed execution for jQuery Ajax universal handlers

As per the jQuery documentation, global Ajax event handlers must be implemented using callback functions on the document. However, local $.ajax() events can utilize promises instead. Is there a method to handle global Ajax events using promises such as .d ...

jqueryajaxeventspromisejquery-events

Positioning two buttons with one on the left and the other on the right

I am currently looking to add an ADD button next to the VIEW button in this layout. An example of what I am trying to achieve can be seen at where you can click on the GRID VIEW icon. <div class="desktop_view product-view grid-list-row-view hide" sty ...

css