jQuery and CSS not working when generated from PHP

Question

I'm trying to create a follow button (like twitter) and it's largely working, however when I generate the HTML from PHP script it's not.

Here's the fiddle to show it working: http://jsfiddle.net/MCam435/HpAWH/10/

Works wonderfully :)

However when I generate it from PHP:

PHP Script

function getTalent($row) {

     return "<div class='talent_result_wrapper' data-experience='" . $row['divTagExp'] . "' data-salary='" . $row['divTagSal'] . "'>
      <div class='talent_result_header'>
        <span class='talent_result_head'>ID: </span>" . $row['CandidateID'] . "
      </div>
        <ul>
          <li><strong>Resides:  </strong>" . $row['Town'] . "</li>
          <li><strong>Salary Required:  </strong>£" . $row['SalaryMin'] . "</li>
          <li><strong>Experience:  </strong>" . $row['CandidateExperience'] . " Years </li>
          <li><strong>Industy:  </strong>" . $row['PrimarySector'] . "</li>
          <li><strong>Specialism:  </strong>" . $row['PrimarySector'] . "</li>
          <br>
          <div id='follow1'><a href='#' class='follow' id='1'><span class='follow_b'> + Tag </span></a></div>
          <div id='remove1' style='display:none'><a href='' class='remove' id='1'><span class='remove_b'> - UnTag </span></a></div>
      </div>";
    }

Main Page

while($row = mysqli_fetch_array($result2)) {
                echo getTalent($row);
            }

The switching between div's doesn't work, even though the output is exactly the same?

Nothing shows in the console. @GrahamWalters how do you mean? The results in the div are being populated with ajax. Nothing is being sent back though at the moment. — Mcam435
– Mcam435, Commented Sep 19, 2013 at 9:38
After calling this function, try to echo out the button toggle part. — Vikas Arora
– Vikas Arora, Commented Sep 19, 2013 at 9:39
You need to bind event on dynamically create elements. Please check the answer below. — Subedi Kishor
– Subedi Kishor, Commented Sep 19, 2013 at 9:39

Reinstate Monica Cellio · Accepted Answer · 2013-09-19 09:41:42Z

3

You can't have multiple elements with the same ID on a page.

     <div id='follow1'><a href='#' class='follow' id='1'><span class='follow_b'> + Tag </span></a></div>
     <div id='remove1' style='display:none'><a href='' class='remove' id='1'><span class='remove_b'> - UnTag </span></a></div>

You need to give those elements all unique IDs. It will work if there is only 1 instance of this on the page, but as soon as you add more than 1 it will start to fail. That's why it works in your example, but not when you use PHP.

answered Sep 19, 2013 at 9:41

Reinstate Monica Cellio

26.2k6 gold badges54 silver badges67 bronze badges

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

3 Comments

Mcam435 Over a year ago

Ahhh... Yeh this was a pretty stupid mistake... I'll check on my code to verify that's the cause, and update. Thank you.

Mcam435 Over a year ago

Updated the PHP script to give each one a unique ID. Worked straight away (of course). Thank you.

Reinstate Monica Cellio Over a year ago

It's an easy mistake to make. Glad I could help :)

Collectives™ on Stack Overflow

jQuery and CSS not working when generated from PHP

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related