Search code examples
htmljqueryajaxcodeignitercodeigniter-query-builder

Showing the count of my user and display it on badge. (Codeigniter)

Newbie here. I did an ajax to count the users and display it on my badge, however, whenever I'm clicking on 1 button (Modal with table), it is displaying on all badges. For example. I have 4 users in my first row modal table. The #4 count is displayed to all of my badges. Which is something that is weird. My target is to display the count in my badge dynamically. I have provided a video and images below for better explanation.

https://streamable.com/z6dqgi << This is the output of what I made. (Look at the badge count behaviour)

This is what I aim/target for. enter image description here

View:

<div class="tab-content" id="custom-tabs-two-tabContent">
              
              <div class="tab-pane fade show active" id="custom-tabs-two-all" role="tabpanel" aria-labelledby="custom-tabs-two-all-tab">
                     <table class="table">
                            <thead class="">
                                <tr>
                                <th scope="col"><i class="fas fa-hashtag"></i></th>
                                <th scope="col"><i class="fas fa-mobile-alt mr-2"></i>UUID</th>
                                <th scope="col">Full Name</th>
                                 <th scope="col"><i class="fas fa-envelope-open-text mr-2"></i>Email</th>
                                <th scope="col"><i class="fas fa-phone-alt mr-2"></i>Contact Number</th>
                                <th scope="col"><i class="fas fa-at mr-2"></i>Username</th>
                                <th scope="col">Level</th>
                                <th scope="col">balance</th>
                                <th scope="col">&emsp;&emsp;&nbsp;Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                
                               <?php 
                               foreach($result as $rows) {   $uuid = $rows->uuid;
                               $userID = $rows->userID; ?>     
                                   <?php if($rows->uuid===$_SESSION['uid']): ?>     
                                <tr>
                                <th><?php echo $rows->userID;  ?></th>
                                <td><?php echo $rows->uuid; ?></td>
                                <td><?php echo $rows->firstname; ?>&nbsp;<?php echo $rows->lastname; ?></td>
                                <td><?php echo $rows->email; ?></td>
                                <td><?php echo $rows->mobile; ?></td>
                                <td><?php echo $rows->username; ?></td>
                                <td><?php echo $rows->account_type; ?></td>
                                <td><?php echo $rows->currentPoints; ?></td>
                                <td>
                                   
                                        <button data-id="<?php echo $rows->userID; ?>" class=" fundTable btn btn-success btn-sm text-bold " type="button"  data-toggle="modal" data-target="#fundModal">
                                            <i class="fas fa-hand-holding-usd mr-1"></i> <?php echo $rows->userID; ?>FUND
                                        </button>
                                        
                                        
                                        <button data-id="<?php echo $rows->userID; ?>" class=" allTable btn btn-danger btn-sm text-bold" type="button"  data-toggle="modal" data-target="#editModal">
                                            &nbsp;&nbsp;&nbsp;<i class="fas fa-users"></i>
                                            <span data-id="<?php echo $rows->userID; ?>" class="badge badge-warning navbar-badge"></span>
                                            
                                        </button>   
                                 
                                        
                                        
                                
                                        
                               </td>
                               </tr>
                                     <?php else: ?>
                                                  
                                            <?php endif;?>
                                     <?php } ?>
                            </tbody>
                     </table>
   </div>

<span class="badge badge-warning navbar-badge">2</span>  //this is where the total value should be displayed.                                           
</button>

Model:

public function view($userID = 0){
            $this->db->select("*");
            $this->db->from("users");
            $this->db->where( "uuid=".$userID);
            $query = $this->db->get();
            return $result = $query->result();
            
        }

Controller:

public function view()
    {
        
        if ($this->input->is_ajax_request()) {
            $view_id = $this->input->post('view_id');
            
            if ($post = $this->networks->view($view_id)) {
                $data = array('responce' => 'success', 'post' => $post);
              
            } else {
                $data = array('responce' => 'error', 'message' => 'failed to fetch record');
            }
            echo json_encode($data);
        } else {
            echo "No direct script access allowed";
          
        }
        
    }

Script:

<script>


          $(document).ready(function(){
    $(".allTable").on("click", function(){
        var view_id = $(this).data('id')
    
        $.ajax({
         
           url: "<?=site_url('network/view')?>",

          type: "post",
          dataType: "json",
          data: {
            view_id: view_id  
          },
            success: function(data){
              
              var tbody ="";
              var item =data.post; 


            for(var key in item) {
                    tbody +="<tr>";
                    tbody += "<td>"+item[key].userID+"</td>";
                    tbody += "<td>"+item[key].uuid+"</td>";
                    tbody += "<td>"+item[key].firstname+" "+item[key].lastname+"</td>";
                    tbody += "<td>"+item[key].email+"</td>";
                    tbody += "<td>"+item[key].mobile+"</td>";
                    tbody += "<td>"+item[key].username+"</td>";
                    tbody +="</tr>"
                                 }
           $(".navbar-badge").text(Object.keys(item).length); 
          $(".tbody").html(tbody);
          $('#editModal').modal('show');
            }
     
        });
        })
        });
 
</script>
Solution

  • As you have use .navbar-badge this will target all elements which has that class that's the reason its changing all span tags. Instead , as you are already getting data-id of button you can use this to target only required span using $("span[data-id=" + view_id + "]").text("sometext") .

    Demo code :

    $(document).ready(function() {
  $(".allTable").on("click", function() {
    var view_id = $(this).data('id')

    /*$.ajax({
//somecodes of ajx ..
      */
    // $("span[data-id="+view_id+"]").text(Object.keys(item).length);
    $("span[data-id=" + view_id + "]").text(10);
    // other codes ..
    /*  }
    });*/
  })
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">

<table class="table">
  <thead class="">
    <tr>
      <th scope="col"><i class="fas fa-hashtag"></i></th>
      <th scope="col"><i class="fas fa-mobile-alt mr-2"></i>UUID</th>
      <th scope="col">Full Name</th>
      <th scope="col"><i class="fas fa-envelope-open-text mr-2"></i>Email</th>
      <th scope="col"><i class="fas fa-phone-alt mr-2"></i>Contact Number</th>
      <th scope="col"><i class="fas fa-at mr-2"></i>Username</th>
      <th scope="col">Level</th>
      <th scope="col">balance</th>
      <th scope="col">&emsp;&emsp;&nbsp;Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>
        1
      </th>
      <td>
        123
      </td>
      <td>
        abc
      </td>
      <td>
        [email protected]
      </td>
      <td>
        12213
      </td>

      <td>

        <button data-id="1" class=" fundTable btn btn-success btn-sm text-bold " type="button" data-toggle="modal" data-target="#fundModal">
                                            <i class="fas fa-hand-holding-usd mr-1"></i> FUND
                                        </button>


        <button data-id="1" class=" allTable btn btn-danger btn-sm text-bold" type="button" data-toggle="modal" data-target="#editModal">
                                            &nbsp;&nbsp;&nbsp;<i class="fas fa-users"></i>
                                            <span data-id="1" class="badge badge-warning navbar-badge"></span>
                                            
                                        </button>

      </td>
    </tr>
    <tr>
      <th>
        2
      </th>
      <td>
        1232
      </td>
      <td>
        abc2
      </td>
      <td>
        [email protected]
      </td>
      <td>
        12213
      </td>

      <td>

        <button data-id="2" class=" fundTable btn btn-success btn-sm text-bold " type="button" data-toggle="modal" data-target="#fundModal">
                                            <i class="fas fa-hand-holding-usd mr-2"></i> FUND
                                        </button>


        <button data-id="2" class=" allTable btn btn-danger btn-sm text-bold" type="button" data-toggle="modal" data-target="#editModal">
                                            &nbsp;&nbsp;&nbsp;<i class="fas fa-users"></i>
                                            <span data-id="2" class="badge badge-warning navbar-badge"></span>
                                            
                                        </button>

      </td>
    </tr>

  </tbody>
</table>