Ways to add a CSS class to an ID that immediately follows

Question

Ways to add a CSS class to an ID that immediately follows

I've been working on an editable table using the HTML5 attribute contenteditable. Everything was going smoothly until I had an idea to highlight the cell that was just updated by adding a class called alert-danger from Bootstrap.

Once a cell is successfully updated, data is sent back to the parent page to inform the result div about the status. Currently, the status is displayed on top of the table, but I wanted to also add the class to the specific cell. So, I included

$("td[id="+cols3_key+"").addClass('alert-danger');

when the data is returned. I expected the latest cell to be applied with the alert-danger class, but unfortunately, it didn't work as intended. Here's my script:

Javascript

var message_status = $("#status");
$("td[contenteditable=true]").blur(function(){
    var cols3_key = $(this).attr("id") ;
    var value = $(this).text() ;
    $.post('inc/ajax.php' , cols3_key + "=" + value, function(data){
        if(data != ''){
            $("td[id="+cols3_key+"]").addClass('alert-danger');
            message_status.slideDown();
            message_status.text(data);
            //hide the message
            setTimeout(function(){message_status.slideUp()},3000);
        }
    });
});

The question is: How can I modify this line to target the cell that was just processed?

$("td[id="+cols3_key+"").addClass('alert-danger');

Best Regards,

javascript jquery html css twitter-bootstrap

Answer 1

Answer №1

Here is a suggestion for you: make sure to close the square bracket in your code.

$('td[id="+cols3_key+"]').addClass('alert-danger');

Alternatively, you can use the following code:

$('td[id$="cols3_key"]').addClass('alert-danger');

Answer 2

Here is a suggestion for you: make sure to close the square bracket in your code.

$('td[id="+cols3_key+"]').addClass('alert-danger');

Alternatively, you can use the following code:

$('td[id$="cols3_key"]').addClass('alert-danger');

Answer 3

Answer №2

If you want to add the class 'alert-danger' using jQuery, you can simply use

$(this).addClass('alert-danger');

instead of

$("td[id="+cols3_key+"").addClass('alert-danger');

If you encounter issues with $(this) in the post callback, you can try using

$("td#"+cols3_key+"").addClass('alert-danger');

When using jQuery to access IDs, remember that you need to use the # symbol. For example, to access <td id='test'></td>, you would write

$('td#test').addClass('newClass');

Answer 4

If you want to add the class 'alert-danger' using jQuery, you can simply use

$(this).addClass('alert-danger');

instead of

$("td[id="+cols3_key+"").addClass('alert-danger');

If you encounter issues with $(this) in the post callback, you can try using

$("td#"+cols3_key+"").addClass('alert-danger');

When using jQuery to access IDs, remember that you need to use the # symbol. For example, to access <td id='test'></td>, you would write

$('td#test').addClass('newClass');

Answer 5

Answer №3

You had a missing ], so instead of $("td[id="+cols3_key+"]") you can simplify it to $("#"+cols3_key)

Keep in mind, the first solution may require extra single quotes if the id contains special characters:

For example: $("td[id='"+cols3_key+"']")

The second approach will work regardless.

Alternatively, consider a more efficient method:

1) Place your ajax call in a function to handle specific elements for each call.

2) Directly reference the element without concerning yourself with the id.

Here's an example:

   var update = function($element){
        var value = $element.text();
        $.post('inc/ajax.php' , $element.attr('id') + "=" + value, function(data){
            if(data != ''){
                $element.addClass('alert-danger');
                message_status.slideDown();
                message_status.text(data);
                //hide the message
                setTimeout(function(){message_status.slideUp()},3000);
            }
        });
   }

var message_status = $("#status");
$("td[contenteditable=true]").blur(function(){
    update($(this));
});

Answer 6

You had a missing ], so instead of $("td[id="+cols3_key+"]") you can simplify it to $("#"+cols3_key)

Keep in mind, the first solution may require extra single quotes if the id contains special characters:

For example: $("td[id='"+cols3_key+"']")

The second approach will work regardless.

Alternatively, consider a more efficient method:

1) Place your ajax call in a function to handle specific elements for each call.

2) Directly reference the element without concerning yourself with the id.

Here's an example:

   var update = function($element){
        var value = $element.text();
        $.post('inc/ajax.php' , $element.attr('id') + "=" + value, function(data){
            if(data != ''){
                $element.addClass('alert-danger');
                message_status.slideDown();
                message_status.text(data);
                //hide the message
                setTimeout(function(){message_status.slideUp()},3000);
            }
        });
   }

var message_status = $("#status");
$("td[contenteditable=true]").blur(function(){
    update($(this));
});

Answer 7

Answer №4

At last,

With the generous assistance from all of you and the invaluable tip from @TrueBlueAussie, I have managed to find my way out of this predicament. Below is the complete script.

HTML

<h2 class="lead text-danger">HTML5 Inline Edit</h2>
<div id="status"></div>
<table class="table table-bordered table-striped">
    <tr>
        <td id="table_col1:1" contenteditable="true">
            content1
        </td>
        <td id="table_col1:2" contenteditable="true">
            content2
        </td>
        <td id="table_col1:3" contenteditable="true">
            content3
        </td>
    </tr>
</table>

CSS

    #status{
    background:#ff0000;
    border:solid 1px #ccc;
    border-radius:5px;
    color:#fff;
    display:none;
    padding:5px;
    width:100%;    
}

Javascript

$(window).load(function(){
        var message_status = $("#status");
        $("td[contenteditable=true]").blur(function(){
            var cols3_key = $(this).attr("id") ;
            var value = $(this).text() ;
            $.post('' , cols3_key + "=" + value, function(data){
                if(data != ''){
                    $('td[id="'+cols3_key+'"]').addClass('alert-danger');//this is the trick. I need a couple of single quotes here to express that I need a var not an id name

                    message_status.slideDown();
                    message_status.text(data);
                    //hide the message
                    setTimeout(function(){message_status.slideUp()},3000);
                    setTimeout(function(){$('td[id="'+cols3_key+'"]').removeClass('alert-danger')},3000);
                }
            });
        });
});

Check out the live demonstration - http://jsfiddle.net/nobuts/Lroqpk7x/9/

Answer 8

At last,

With the generous assistance from all of you and the invaluable tip from @TrueBlueAussie, I have managed to find my way out of this predicament. Below is the complete script.

HTML

<h2 class="lead text-danger">HTML5 Inline Edit</h2>
<div id="status"></div>
<table class="table table-bordered table-striped">
    <tr>
        <td id="table_col1:1" contenteditable="true">
            content1
        </td>
        <td id="table_col1:2" contenteditable="true">
            content2
        </td>
        <td id="table_col1:3" contenteditable="true">
            content3
        </td>
    </tr>
</table>

CSS

    #status{
    background:#ff0000;
    border:solid 1px #ccc;
    border-radius:5px;
    color:#fff;
    display:none;
    padding:5px;
    width:100%;    
}

Javascript

$(window).load(function(){
        var message_status = $("#status");
        $("td[contenteditable=true]").blur(function(){
            var cols3_key = $(this).attr("id") ;
            var value = $(this).text() ;
            $.post('' , cols3_key + "=" + value, function(data){
                if(data != ''){
                    $('td[id="'+cols3_key+'"]').addClass('alert-danger');//this is the trick. I need a couple of single quotes here to express that I need a var not an id name

                    message_status.slideDown();
                    message_status.text(data);
                    //hide the message
                    setTimeout(function(){message_status.slideUp()},3000);
                    setTimeout(function(){$('td[id="'+cols3_key+'"]').removeClass('alert-danger')},3000);
                }
            });
        });
});

Check out the live demonstration - http://jsfiddle.net/nobuts/Lroqpk7x/9/

Ways to add a CSS class to an ID that immediately follows

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Having trouble utilizing Reactjs Pagination to navigate through the data

Unable to Retrieve Response from jQuery AJAX in a Function

Limit the precision of decimal number output to a specific value

What is the best method to determine the mean score by utilizing the ID values obtained from API responses?

What could be causing the issue with the width: 100% not rendering correctly in this

What could be causing my div to not appear when using jquery's show function?

"Exploring the best locations for storing CSS, JS, and image files in Spring

Mastering the Art of Disabling buttons in Vue Based on Conditions

Adding dynamic content to CSS in Next.JS can be achieved by utilizing CSS-in-JS

Distinguishing between fonts on a website and Invsion (a tool utilized by designers and front end developers)

What is the best way to establish a maximum limit for a counter within an onclick event?

What is the best way to implement jQuery in Katalon to manipulate the DOM element?

A guide on transforming JSON data into HTML using Rails

How can transitions be activated in Bootstrap 4 carousel?

Exploring Typescript for Efficient Data Fetching

Hover effects on the navigation bar combined with an image featuring a sub navigation menu

Restrict access to table records by specifying an array of row identifiers

Adding 7 days to a JavaScript date

Using two different typefaces to accommodate two distinct languages on a single webpage

Sophisticated Arrangement of Div Elements