Jquery Ajax loop request problem with attribute

Question

I want to get the name of two contestants from the database using PHP loop and at the same time calculate the total vote of each candidate and display it using ajax jquery but am only getting the first candidate votes while the other candidate is not even showing anything, not even 0.

index.php

<h4 class="header-title mb-3">Presidential Result</h4>
<div class="">
   <div class="row text-center">
    <?php
        $sql = "SELECT * FROM contestants WHERE post='president'";
        $query = mysqli_query($conn, $sql);
        while($row=mysqli_fetch_array($query)){
     ?>
      <div class="col-md-6">
        <p class="text-muted mb-0 mt-3" id="contestname"><?php echo $row['fullname']?></p>
         <h2 class="fw-normal mb-3" id="precount">
                                                    
          </h2>
      </div>
   <?php
      }
    ?>                                                
 </div>

The index.php only displays the name of the contestants/candidates.

Query.js

function view_pres_count(){
    var presname =$('#contestname').html();
    
    $.ajax({
        url: 'prescount.php',
        method: 'post',
        data:{present:presname},
        success: function(data){
            data = $.parseJSON(data);
            $('#precount').html(data.html);
        }
    })

}

in Query.js I passed each name to presname using the tag id. At this point even without the ajax request, if I log presname to console I only got the first candidate name. Any way out of this?

mplungjan · Accepted Answer · 2022-02-05 14:05:23Z

1

IDs need to be unique. Change to class and do

const presnames = $('.contestname').map(function() {
  return this.textContent.trim()
}).get()
console.log(presnames)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<h4 class="header-title mb-3">Presidential Result</h4>
<div class="">
  <div class="row text-center">
    <div class="col-md-6">
      <p class="text-muted mb-0 mt-3 contestname">
        Jimmy Carter
      </p>
      <h2 class="fw-normal mb-3" class="precount">
      </h2>
    </div>
    <div class="col-md-6">
      <p class="text-muted mb-0 mt-3 contestname">
        Ulyssus Grant
      </p>
      <h2 class="fw-normal mb-3" class="precount">

      </h2>
    </div>
  </div>

You will need to give more details of your precount html but I suggest you return an array and loop over

$(".precount").each(function(i) { $(this).html(data[i].html) })

edited Feb 5, 2022 at 14:05

answered Feb 5, 2022 at 12:54

mplungjan

180k29 gold badges183 silver badges246 bronze badges

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

3 Comments

LibertyTech Over a year ago

This seems not working, it even remove the count for the first candidate

mplungjan Over a year ago

Yes it works if you return expected result which would be something like [ { "html" : "297 electoral votes" } , { "html" : "294 electoral votes"}]

LibertyTech Over a year ago

Thanks, it's working now, I could get the two candidates from the console but after adding my ajax request the count of the second candidate is replicated for the first candidate and if I use $(".precount").each(function(i) { $(this).html(data[i].html) }) i got nothing

Collectives™ on Stack Overflow

Jquery Ajax loop request problem with attribute

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