looksgoodhoss looksgoodhoss - 5 months ago 9
PHP Question

How do I change the colour of the first LI value that is added through a XMLHttpRequest?

I am working on a project where the user can go to a particular page and browse a particular feed. This feed is dynamically added through an

XMLHttpRequest
, which will give a
#Cat=(value)
parameter to the PHP parser, which will then carry out the appropriate action.

Within this page, there are several LI elements that will be used for the user to filter/cycle through the feeds.These LI elements will be different for each page - they are dynamically added from the database.

I have successfully managed to change the colour of the LI whenever the user clicks on that particular LI or if the URL changes to include the category.

I have done this by: downloading all categories from the database, and displaying them appropriately. I then get the #Cat= value from the URL, and perform a switch statement - if the Cat value equals the LI value, then change the LI value's colour.

My problem, however, is that the first LI (regardless of the page, it isn't a typo) will not change. For example: one page will have the url
#Cat=Front
Page, if I click on the category Front Page it will not change because it is the first LI. On another page, the url will also be
#Cat=Front
Page and if I click on the category Front Page it will change the colour because it is not the first LI.

I presume it is my
JavaScript/JQuery
that is causing the issue.

JavaScript/JQuery:


activeCat("Default");

$(window).on( "hashchange", function()
{
var Url = window.location.href;
var Category = Url.substring(Url.indexOf("#Cat=") + 5);
var Cat = decodeURI(Category);
activeCat(Cat);
});

function activeCat(cat)
{
switch (cat)
{
case "Default":
$("#channelCategories li").first().css("color", "#2980b9");
break;
case "Front Page":
$('ul li').each(function(i)
{
if($(this).hasClass('channelCategory'))
{
$(this).css("color","black");
}
});
alert("Channel has front-page category");
$("#channelCategories li:contains('Front Page')").css("color", "#2980b9");
break;
case "United Kingdom":
$('ul li').each(function(i)
{
if($(this).hasClass('channelCategory'))
{
$(this).css("color","black");
}
});
$("#channelCategories li:contains('United Kingdom')").css("color", "#2980b9");
break;


PHP:


while($record = mysqli_fetch_array($myData))
{
$Category = $record["Category"];
if($i <= 5)
{
$html .= "<a href='#Cat=$Category' class='noLink' id='$Category'><li class='channelCategory noLink Text'>$Category</li></a>";
}
else if ($i > 5)
{
//$dropContent[$j] .= "<a href='#Cat=$Category'><li class='channelCategory itemLink Text'>$Category</li></a>";
$dropContent[$j] .= $Category;
$j++;
}
$i++;
}


My Question: when the category is default, how do I change the colour of the first LI? Also when viewing the first LI, how do I change the colour of it?

Any help would be greatly appreciated.

Thanks.

EDIT: Thanks to everyone who tried to help me. I do not understand why my code was not working, but I have implemented a work around: when the first li is added, I am adding a unique class name to its anchor tag - and to select the first li I am merely searching for that class name.

Answer

Try replace id to class in tag <a> (jQuery selector with id get always the first item) then try add/remove class ($( ).addClass('firstDefault') and change color using css.

Debuggin it, var Cat really come with "Default" value?

Comments