JQuery - Highlight an element using ajax based on values in database

Question

Ok, so I've looked through documentation and Googled this, yet surprisingly I can't find a solution and nobody seems to be having the same trouble I am. I am fairly new to JQuery AJAX, and I am putting together a sort of booking calendar from scratch and I am looking for a way to highlight elements or "dates" in the calendar GUI based on whether that "date" has bookings in the database. Here's the block of JQuery I'm tinkering with, but I feel like I'm way off for some reason.

$(".box").load(function() {
    date_time = $(this).attr('id');
    month = $(this).attr('month');
    year = $(this).attr('year');
    $.ajax({
        type: 'GET',
        url: '/book.me/check.php', 
        data: "date=" + date_time + "&month=" + month + "&year=" + year, 
        success: function(msg) { 
                $(this).css("background-color", "#cccccc");
        }
    });
});

Any help would be appreciated, thanks.

As a side note, it would make your code more flexible and easier to maintain if instead of manually setting the background color you put the styling in your CSS and use addClass to add it: .addClass("highlight"). That way you can easily find all highlighted cells. For instance, if you wanted to remove the highlighting on all the highlighted cells you could do something like $(".box.highlight").removeClass("highlight"); — Useless Code
– Useless Code, Commented Mar 19, 2014 at 4:21

Vinay · Accepted Answer · 2014-03-19 04:06:47Z

1

You are pointing to a different object in success. Use var that = $(this); and that.css("background-color", "#cccccc"); if you are planning to highlight .box like below.

$(".box").load(function() {
    var that = $(this);
    date_time = $(this).attr('id');
    month = $(this).attr('month');
    year = $(this).attr('year');
    $.ajax({
        type: 'GET',
        url: '/book.me/check.php', 
        data: "date=" + date_time + "&month=" + month + "&year=" + year, 
        success: function(msg) { 
                that.css("background-color", "#cccccc");
        }
    });
});

answered Mar 19, 2014 at 4:06

Vinay

6,8774 gold badges34 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mylon James Marcell Over a year ago

Ok, so it didn't "seem" to work. I changed my code to yours and added an error option to the ajax for testing, but it returns nothing, and I'm still not getting the intended result.

Vinay Over a year ago

Is success function called?

Mylon James Marcell Over a year ago

No, It doesn't seem to be doing anything on the load event.

Vinay Over a year ago

debug it. Sounds like you have other problems

Collectives™ on Stack Overflow

JQuery - Highlight an element using ajax based on values in database

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related