CODEWITHSUNDEEP
javascriptjquery
AlexMdg
AlexMdg

Reputation: 115

Jquery : Can't find the bug, probably something with the ID?

I'm trying to make a planning that is an HTML table where each cell has an ID built on DateTime format. Then I send a JSON with booked time-slots from django model and try to change the class of the cells with the corresponding ID with Jquery.

delivery_planning.js :

dates = booked_json.replace(/"/g, '"');
booked_dates = JSON.parse(dates);
count = booked_dates.length-1;

for (i=0; i<=count; i++) {
    var date_id = "#" + booked_dates[i];
    $(date_id).toggleClass("available unavailable");
    console.log(date_id); 
};

console.log() shows me that the ID are at good format : 

#2018-09-15_13:30:00

and when I inspect the cells in firefox I have the same ID format : 

td#2018-09-15_13:30:00.available

Can anyone see why the class is not changing? I've tried several variations in the format with no results. I can add views.py and template.html to show the construction of IDs if needed.

Upvotes: 1

Views: 54

Answers (1)

Ram
Ram

Reputation: 144699

The query doesn't select any element as the selector contains : character. It has a special meaning for jQuery selector engine. You either need to escape the : chars:

$('#2018-09-15_13\\:30\\:00')

Or better, use document.getElementById:

$(document.getElementById(booked_dates[i])).toggleClass('...')

Upvotes: 2

Related Questions