Using AJAX to implement CSS class effects

Question

Using AJAX to implement CSS class effects

Currently, I am facing an issue with applying a highlighting effect to list items in a menu using a snippet of code. The menu items are just POST and I have created a second step to the menu where I want to apply the same effect to any element with a class of .highlight. However, my current code is not working as expected:

[deleted old code]

I could create a new id (let's say, '#highlighter2) and duplicate the code. But I am wondering if there is a more efficient way to apply the effect to a class instead of ID?

UPDATE (here is my updated code):

The script above DOES work on the first ul. The issue arises with the second ul, which appears via jquery (possibly due to being initially set to hidden). Here is the relevant HTML structure (it might be a bit complex, but note the hidden second div. This could be causing the problem. While the first list works perfectly fine with all the highlights, the second list doesn't respond.)?

//When the DOM is ready:

<script type="text/javascript">
$(document).ready(function() {

$('#foo li, #foo2 li').click(function() {
    // perform ajax actions
    $(this).siblings('li').removeClass('highlight');
    $(this).addClass('highlight');
});

//On click of a link in div:
$('#selectCompany a').click(function() {
    //Fade in second box:

    //Fetch id from clicked link:
    var id = $(this).attr('id');


    $.ajax({
        type: 'POST',
        url: 'getFileInfo.php',
        data: {'id': id},
        success: function(msg){
            //all echoed content from PHP file will be in the 'msg' variable:
            $('#selectCompanyUser').html(msg)
            $('#selectCompanyUser').fadeIn(400);
        }
});
    });
});
</script>
<div id="selectCompany" class="panelNormal">
<ul id="foo">
<?
// check if any rows were returned 
if (mysql_num_rows($membersresult) > 0) { 
    // yes 
    // display them one after another 
    while($row  = mysql_fetch_object($membersresult)) { 
        echo "<li>"."<a href=\"#\""." id=\"".$row->company."\">".$row->company."</a>"."</li>";
    }  
} 
else { 
    // no 
    // show status message 
    echo "No rows found!"; 
} 

// free up result set memory 
mysql_free_result($membersresult); 

// close connection 
mysql_close($link); 
 ?>

  </ul>
</div>


<!-- Second Box: initially hidden with CSS "display: none;" -->

<div id="selectCompanyUser" class="panelNormal" style="display: none;">
<div class="splitter"></div>

</div>

javascript html css

Answer 1

Answer №1

If you want to simplify your code block, you can create #highlighter2 and turn your existing code into a function that takes the ID value. Then, you can call this function twice like so:

function setHighlight(id) {
    var context = document.getElementById(id);
    var items = context.getElementsByTagName('li');
    for (var i = 0; i < items.length; i++) {
        items[i].addEventListener('click', function() {
            // perform AJAX operations

            // remove "highlight" class from all list items
            for (var j = 0; j < items.length; j++) {
                var classname = items[j].className;
                items[j].className = classname.replace(/\bhighlight\b/i, '');
            }

            // add "highlight" class to the clicked item
            this.className += ' highlight';
        }, false);
    }
}

setHighlight("highliter1");
setHighlight("highliter2");

With jQuery, you can achieve the same functionality more succinctly with the following code:

$("#highlighter1 li, #highlighter2 li").click(function() {
    // do AJAX stuff
    $(this).siblings('li').removeClass('highlight');
    $(this).addClass('highlight');
});

If any of the elements you want to click on are not present initially when using jQuery, you should consider using the live method instead:

$("#highlighter1 li, #highlighter2 li").live("click", function() {
    // do AJAX stuff
    $(this).siblings('li').removeClass('highlight');
    $(this).addClass('highlight');
});

Answer 2

If you want to simplify your code block, you can create #highlighter2 and turn your existing code into a function that takes the ID value. Then, you can call this function twice like so:

function setHighlight(id) {
    var context = document.getElementById(id);
    var items = context.getElementsByTagName('li');
    for (var i = 0; i < items.length; i++) {
        items[i].addEventListener('click', function() {
            // perform AJAX operations

            // remove "highlight" class from all list items
            for (var j = 0; j < items.length; j++) {
                var classname = items[j].className;
                items[j].className = classname.replace(/\bhighlight\b/i, '');
            }

            // add "highlight" class to the clicked item
            this.className += ' highlight';
        }, false);
    }
}

setHighlight("highliter1");
setHighlight("highliter2");

With jQuery, you can achieve the same functionality more succinctly with the following code:

$("#highlighter1 li, #highlighter2 li").click(function() {
    // do AJAX stuff
    $(this).siblings('li').removeClass('highlight');
    $(this).addClass('highlight');
});

If any of the elements you want to click on are not present initially when using jQuery, you should consider using the live method instead:

$("#highlighter1 li, #highlighter2 li").live("click", function() {
    // do AJAX stuff
    $(this).siblings('li').removeClass('highlight');
    $(this).addClass('highlight');
});

Answer 3

Answer №2

Modify the replacement in /highlight/ig, it functions properly on http://jsfiddle.net/8RArn/

var container = document.getElementById('highlighter');
var elements = container.getElementsByTagName('li');

for (var index = 0; index < elements.length; index++) {
    elements[index].addEventListener('click', function() {
        // perform AJAX operations

        // eliminate the "highlight" class from all list items
        for (var j = 0; j < elements.length; j++) {
            var className = elements[j].className;
            elements[j].className = className.replace(/highlight/ig, '');
        }

        // apply the "highlight" class to the clicked item
        this.className += ' highlight';
    }, false);
}

Answer 4

Modify the replacement in /highlight/ig, it functions properly on http://jsfiddle.net/8RArn/

var container = document.getElementById('highlighter');
var elements = container.getElementsByTagName('li');

for (var index = 0; index < elements.length; index++) {
    elements[index].addEventListener('click', function() {
        // perform AJAX operations

        // eliminate the "highlight" class from all list items
        for (var j = 0; j < elements.length; j++) {
            var className = elements[j].className;
            elements[j].className = className.replace(/highlight/ig, '');
        }

        // apply the "highlight" class to the clicked item
        this.className += ' highlight';
    }, false);
}

Answer 5

Answer №3

Those advising to only use jQuery are misguiding you. While it may offer a quick fix, it can never replace the essential skill of learning Javascript.

Javascript has a powerful feature called closures that can easily solve this issue:

var addTheListeners = function (its) {
    var itemPtr;

    var listener = function () {
        // do AJAX stuff

        // visit only one item
        if (itemPtr) {
            var classname = itemPtr.className;
            itemPtr.className = classname.replace(/\bhighlight\b/i, '');
        }

        // set the "highlight" class on the clicked item
        this.className += ' highlight';
        itemPtr = this;
    }

    for (var i = 0; i < its.length; i++) {
        its[i].addEventListener ('click', listener, false);
    }
}

and then:

var context = document.getElementById ('highlighter');
var items = context.getElementsByTagName ('li');
addTheListeners (items);

You can call add the listeners for distinct sets of doc elements multiple times.

addTheListeners works by using a closure to store the list's currently selected item, allowing the listener functions below it to access this variable even after addTheListeners has finished executing.

This code is more efficient than yours due to two reasons:

Avoids iterating through all items just to remove a class from one of them
Avoids defining functions inside a for loop, preventing potential problems with closures

Answer 6

Those advising to only use jQuery are misguiding you. While it may offer a quick fix, it can never replace the essential skill of learning Javascript.

Javascript has a powerful feature called closures that can easily solve this issue:

var addTheListeners = function (its) {
    var itemPtr;

    var listener = function () {
        // do AJAX stuff

        // visit only one item
        if (itemPtr) {
            var classname = itemPtr.className;
            itemPtr.className = classname.replace(/\bhighlight\b/i, '');
        }

        // set the "highlight" class on the clicked item
        this.className += ' highlight';
        itemPtr = this;
    }

    for (var i = 0; i < its.length; i++) {
        its[i].addEventListener ('click', listener, false);
    }
}

and then:

var context = document.getElementById ('highlighter');
var items = context.getElementsByTagName ('li');
addTheListeners (items);

You can call add the listeners for distinct sets of doc elements multiple times.

addTheListeners works by using a closure to store the list's currently selected item, allowing the listener functions below it to access this variable even after addTheListeners has finished executing.

This code is more efficient than yours due to two reasons:

Avoids iterating through all items just to remove a class from one of them
Avoids defining functions inside a for loop, preventing potential problems with closures

Using AJAX to implement CSS class effects

Answer №1

Answer №2

Answer №3

Similar questions

Using maxCDN to deliver static files within a Node application

The issue arises when applying Tailwind styling to template variables that have widget attributes in Django

Selectors within 'not' in document.querySelectorAll are failing to function as expected

In Angular 4 applications, all vendor CSS files are converted into style tags at the beginning of the HTML document

Link a YAML file with interfaces in JavaScript

Executing AJAX requests to trigger a function in a separate MVC controller using Jquery

Adjusting canvas size to match content dimensions

Empower your presentations with slick cloning technology

When utilizing scoped slots in BootstrapVue, you may encounter an error stating "Property or method 'data' is not defined."

Update content without reloading the page

Analyzing Compatibility and Ensuring Security

What is the most efficient way to display a dynamic alphabetical order list?

Display data in Bootstrap table using JQuery and JSON

convert a list of options into a dropdown selection menu

Designing a patterned rectangle filled with stylish text

Error message: Icons failing to display in conjunction with template output | 404 error code

Is it possible to generate a 3D building structure using an existing image with Jquery and Css?

Detecting collisions between a ThreeJS camera and a 3D object model using raycasting

Storing data locally and replacing the current URL with window.location.href

How can I create an HTML form input slider/range that accepts non-numeric values?