0

I was using the following code to search for a particular piece of text within a div, and if found, to add another class to the div.

<div class="res">Full HD</div>    

$(document).ready(function () {
  $('div.res').each(function () {
    if ($(this).text() === "Full HD") {
      $(this).addClass('fullhd');
     }
  });
});

It worked great and thank you to this community for helping me figure out how to do that.

However, I am instead pulling the text that I want the function to search for, ie "Full HD", from the database using the following PHP and now it no longer works, as I reluctantly expected.

<div class=\"res\">".$suggested_videos[$i]['definition']."</div>

I sort of understand why this no longer works but have a hard time articulating it so I apologize for that. Is there something I can add to the javascript function to search for "Full HD" within the ['definition'] column of my database and to then add the correct class ('fullhd') based upon if it finds it or not?

EDIT:

So the javascript function I was using was in fact working correctly with the php database and didn't need to be changed at all. The issue was due to me not capitalizing "Full HD" on the database. It was pulling "Full HD" from the database instead of "FULL HD", and thus when searching for "FULL HD", nothing was found, and thus no class was being added. Thank you for the replies and the potential workarounds. It means a lot to know there are people out there willing to help a stranger. I can't wait to give back.

Sean
  • 515
  • 7
  • 17
  • 2
    How do we know what `$suggested_videos[$i]['definition']` is? – StackSlave Feb 13 '18 at 00:42
  • 1
    What do you mean it no longer works?
    ".$suggested_videos[$i]['definition']."
    is a small piece of php code. Is that php code and the missing code around it creating html that looks like
    Full HD
    ? Javascript will not search your database. It will (mainly) interact with the html generated by your php and served by the server. Do you have a staging site that is pulling from the server that we can look at?     – JasonB Feb 13 '18 at 00:48
  • ['definition'] is a varchar type column from the database which is storing the "Full HD" text. I'm not sure if that helps and I apologize for my inability to technically communicate. I am very new to this. I just added the entire php snippet to the OP to give some more context. – Sean Feb 13 '18 at 00:54

1 Answers1

0

Since you are outputting your content via PHP anyhow, you could simply add a conditional on the server / PHP side checking for what $suggested_videos[$i]['definition'] is, and then add the class there. See the following:

<?php

echo '<div class="res ';

if ($suggested_videos[$i]['definition'] === 'Full HD') {
    echo 'fullhd';
}

echo '">' . $suggested_videos[$i]['definition'] .'"</div>';
?>

Untested but it should lead you down the correct path.

Some further clarification: your JavaScript runs within the frontend of a website / in a user's browser, and has no direct access to the database. PHP runs on your server (even if it's your local development machine) and will generate the content to be output to the frontend, before the user even sees it. The above checks the content and adds the <div> class if the conditional is correct. This may also be of use to you: https://stackoverflow.com/a/6369454/823549.

1000Nettles
  • 2,314
  • 3
  • 22
  • 31
  • Awesome info and resource. Knowing that the output from the server would be generated before anything else, is what led me to realize I must've been searching for the wrong string. Turns out it was working because I had "Full HD" instead of "FULL HD" on the database. Thank you very much! – Sean Feb 13 '18 at 01:30
  • You're welcome! If it has been helpful for you, could you please accept my answer? Cheers. :) – 1000Nettles Feb 13 '18 at 01:34