Activate HTML links with a single click by utilizing AJAX calls

I have developed a unique sidebar menu that uses ajax calls to load pages.

<div class="sidebar">
    <ul>
        <li><a href='#' onclick="loadProfile()"><i class="icons user-login"></i>Customer Profile</a></li>
        <li><a href='#' onclick="loadContacts()"><i class="icons user-login"></i>Report Incident</a></li>
        <li><a href='#' onclick="loadPage()"><i class="menu complaint-box"></i>Incidents</a></li>
    </ul>
</div>

Here is an example of an AJAX call:

function loadIncidentPage() {
    $.ajax({
        url: "" + AppName + "Pages/Page",
        dataType: 'html',
        success: function (data) {
            //console.log(data);
            $('#main').html(data);
        }
    });
}

I am working with MVC and would like to know how to change the color of links when clicked, then revert back to the initial style color when a different link is clicked.

Any suggestions on achieving this would be greatly appreciated!

javascriptc#ajaxasp.net-mvcvisual-studio

Answer №1

When using ajax to load pages without refreshing the entire page, you can implement the following method:

Within your

loadIncidentPage

function, update a variable accessible to your application after a specific URL is clicked. Then, iterate through all menu items using a foreach loop and modify their CSS as needed.

For example, if you set the variable to

'help/blah/blah2'

when you encounter this link during iteration, simply use .css('class','someclass') or inline CSS to make necessary changes.

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

I'm running into an InvalidSelectorError and I could use some assistance in properly defining

As I gaze upon a massive dom tree, my task using NodeJS/Selenium is to locate an element by the title attribute within an anchor tag and then click on the associated href. Despite being a newcomer to regex, I am encountering numerous errors already. Below ...

javascripthtmlseleniumdomxpath

Ways to prevent ERR_INSUFFICIENT_RESOURCES when making AJAX requests

It's been a while since I dabbled in JavaScript, so please be patient with me. I'm currently developing an application that generates reports on student data using PHP as the backend. Periodically, we need to refresh the database used for these ...

javascriptphpjqueryajax

Guide on how to send a variable to the footer section in Jade using Node.js

In my footer with Jade, I want to show a variable named total. .container .footer hr(style='margin: 30px 0 10px 0;') p #{total} entries in this database. link(rel='stylesheet', href='/css/style.css') scri ...

javascriptnode.jsexpresspug

Revamped Panel: Unleash the Power of J

I am currently working on a web application that utilizes a gridview with an updatepanel. After updating the gridview, I implemented a jQuery function that is called at the end of GridView1_RowUpdating. ClientScript.RegisterClientScriptBlock(this.GetType( ...

c#jqueryasp.netgridview

Is it advisable to include the `engine` attribute in the packages.json file for a web browser library project?

When creating a JS library project meant for browser use, do I need to include the engines field in the packages.json file? ...

javascriptnpm

Learn the process of eliminating a class utilizing this JavaScript function

This script is designed to identify and manipulate elements with the class menu-option-set. When an element within this class is clicked, it adds the class "selected" to that specific element while removing it from all others in the list. My goal is to en ...

javascriptjquery

Angular 6 is showcasing dates in a quirky manner

In my Angular app, users can enter comments. The comments are displayed automatically with the date they were added. However, there is an odd behavior that I've noticed: When a user enters a comment, the time displayed is incorrect. (Check the ...

javascriptangularhtmltypescripttimeago

Chart displaying a comparison between two different dates

I have been using the Morris plugin to create a line graph, but I am facing challenges when it comes to combining two different sets of data in one graph. You can find my initial graph on this fiddle. function formatDate(myDate){ var m_names = new Arr ...

javascriptjquerymorris.js

How can you toggle the visibility of a text based on the selection of a jQuery radio button?

Is it possible to dynamically enable or disable a field based on the selection of a radio button? Here are the rules: The field should only be active when the "Inactive" radio button is selected Check out the code snippet below for reference: Radio B ...

javascriptjquerywebforms

The UglifyJsPlugin in Webpack encounters an issue when processing Node modules that contain the "let" keyword

Below is the code snippet from my project which utilizes Vue.js' Webpack official template: .babelrc: "presets": [ "babel-preset-es2015", "babel-preset-stage-2", ] webpack.prod.config.js new webpack.optimize.UglifyJsPlugin({ compress: { ...

javascriptnode.jswebpackvue.jsuglifyjs2

I am encountering an issue with my authentication system where it is returning

I'm currently experiencing an issue with my authentication system using passport. For some reason, I keep getting an 'undefined' value returned. Can anyone provide assistance? Here is the code snippet in question: app.js passport.use(new L ...

javascriptnode.jsexpressmongoosepassport.js

The web page functions perfectly when running on a local host, however, it encounters issues once hosted on Google Drive

Although the code referenced in the title runs smoothly when launched from my browser on localhost, it encounters issues when I attempt to execute the same webpage from the file stored in Google Drive. While the page appears to load correctly, its function ...

ajaxcross-domain

Library in the .NET ecosystem designed specifically for conducting performance tests on web applications

Currently, I am working on testing a C# application using Selenium Webdriver. Now, I am interested in testing the performance of the application. I have tried using FiddlerCore but it does not provide information on page rendering time or dynamic content ( ...

c#.netfiddlerload-testingperformance-testing

What is the IL Emit method used for calling a delegate instance?

Essentially, I receive an event name as a string in order to retrieve the EventInfo. From there, I identify the event handler type and event argument type using reflection. I then create a new delegate of that type (myEventHandler) and connect it to the ev ...

c#.netreflectionreflection.emit

Complications arise from using WPF's DragMove() function

I'm currently exploring different options to solve a complex issue I've encountered. Recently, I created a sleek loading splash screen without borders that can be moved around by dragging it. However, I noticed a strange bug that occurs when the ...

c#.netwpf

Unable to manage the rotation in Three.js GLTFLoader

Issue Why am I unable to rotate the angle of an object? (scene.rotation.x += 0.03;) The camera can, but the scene object cannot. I've searched for a solution for a long time without success. Here is my code: import * as THREE from 'https://un ...

javascriptthree.jsgltf

The result of combining two JavaScript variables

When I multiply a variable by 2 and assign the value to another variable, why do I get 0? My goal is to toggle the visibility of blocks every time a button is pressed. Oddly enough, it works when I use count++ * 2. For code reference, please refer below: ...

javascriptjqueryvariables

Why do Material UI components fail to render in jsdom while using Jest?

During my UI testing using Jest/React Testing Library, I encountered a peculiar issue. In one of my components, the return statement is structured as follows: const sidebarContentUp = ( <Drawer anchor="left" onClose={onMobileC ...

javascriptreactjsjestjsnext.jsmaterial-ui

The AJAX request functions correctly with the GET method but encounters issues when using the POST method

I have encountered an issue with my AJAX call. The code below is functioning correctly: CSHTML $.ajax({ url: '?handler=Delete', data: { id: $(this).data('id') }, }); CS public void OnGetDelete(int id) { } Howeve ...

c#.netajax.net-corerazor-pages

How can we enhance the efficiency of this JavaScript tab completion script?

This snippet of code is designed for implementation into an AJAX Chat system to facilitate tab auto-completion of user names: var usernames = new Array(); usernames[0] = "Saladin"; usernames[1] = "Jyllaby"; usernames[2] = "CadaverKindler"; usernames[3] = ...

javascriptajaxperformancechat