显示我的用户数量并将其显示在徽章上.(Codeigniter) [英] Showing the count of my user and display it on badge. (Codeigniter)
本文介绍了显示我的用户数量并将其显示在徽章上.(Codeigniter)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
新手在这里.我做了一个ajax来计算用户数并将其显示在我的徽章上，但是，每当我单击1个按钮(带有表的模式)时，它就会显示在所有徽章上.例如.我的第一行模式表中有4个用户.#4计数显示在我所有的徽章上.这是很奇怪的事情.我的目标是在徽章中动态显示计数.我在下面提供了一个视频和图像，以提供更好的解释.
查看:
< div class ="tab-content"id ="custom-tabs-two-tabContent"< div class ="tab窗格淡入淡出显示活动"；id ="custom-tabstwo-all"角色=标签"aria-labelledby ="custom-tabs-all-all-tab"< table class ="table">< thead class ="">< tr>< th范围="col"> i类="fas fa-hashtag"</i>/th< th scope ="col"> i class ="fas fa-mobile-alt mr-2"</i UUID< th< th scope ="col">全名</th>< th scope ="col">< i class ="fas fa-envelope-open-text mr-2"</i> Email< th><范围="col">< i class ="fas fa-phone-alt mr-2"</i>联系电话</th>< th scope ="col"> i class ="fas fa-at mr-2"</i>用户名/th.< th scope ="col">等级</th>< th scope ="col">余额< th< th scope ="col">& emsp;& emsp;& nbsp; Actions/th</tr></thead>< tbody><?phpforeach($ 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->用户名;</td>< td><?php echo $ rows-> account_type;</td>< td><?php echo $ rows-> currentPoints;</td>< td>< button data-id ="<?php echo $ rows->用户ID；?>"class ="fundTable btn btn-成功btn-sm文本粗体"type ="button"data-toggle ="modal"data-target =#fundModal"< i class ="fas fa-hand-holding-usd mr-1"</i><?php echo $ rows-> userID;?>基金</button>< button data-id ="<?php echo $ rows->用户ID；?>"class ="allTable btn btn-danger btn-sm text-bold"type ="button"data-toggle ="modal"data-target =#editModal"< i class ="fas fa-users"</i>< span data-id ="<?php echo $ rows->用户ID；?>"class =徽章徽章警告导航栏徽章"</span></button></td></tr><?php else:?><?php endif;?><?php}?></tbody></table></div>< span class =徽章徽章警告导航栏徽章"< 2</span>//这是应该显示总价值的地方.</button> 型号:
公共功能视图($ userID = 0){$ this-> db-> select("*");$ this-> db-> from(用户")；$ this-> db-> where("uuid = .. $ userID);$ query = $ this-> db-> get();return $ result = $ query-> result();} 控制器:
公共功能view(){如果($ this-> input-> is_ajax_request()){$ view_id = $ this-> input-> post('view_id');如果($ post = $ this-> networks-> view($ view_id)){$ data = array('responce'=>'success'，'post'=> $ post);} 别的 {$ data = array('responce'=>'error'，'message'=>'未能获取记录');}回声json_encode($ data);} 别的 {回声不允许直接脚本访问"；}} 脚本:
< script>$(document).ready(function(){$(.allTable").on("click"，function(){var view_id = $(this).data('id')$ .ajax({url:<?= site_url('network/view')?>"，类型:"post"，dataType:"json"，数据: {view_id:view_id}，成功:功能(数据){var tbody ="；var item = data.post;for(项中的var键){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> 解决方案
当您使用 .navbar-badge 时，它将以具有该类的所有元素作为目标，这就是其更改所有span标签的原因.相反，当您已经获得按钮的 data-id 时，可以使用 $("span [data-id =" + view_id +]将此按钮仅定位到所需的跨度").text("sometext").
演示代码 :
$(document).ready(function(){$(.allTable").on("click"，function(){var view_id = $(this).data('id')/* $.ajax({//一些ajx的代码..*///$("span [data-id =" + view_id +]").text(Object.keys(item).length);$("span [data-id =" + view_id +]").text(10);//其他代码../*}}); */})}); < 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">全名</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>联系电话</th>< th scope ="col">< i class ="fas fa-at mr-2"></i>用户名</th>< th scope ="col">级别</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>a@gmail.com</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>基金</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>a2@gmail.com</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>基金</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> 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.
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">   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; ?> <?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">
<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>
解决方案
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">   Actions</th>
</tr>
</thead>
<tbody>
<tr>
<th>
1
</th>
<td>
123
</td>
<td>
abc
</td>
<td>
a@gmail.com
</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">
<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>
a2@gmail.com
</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">
<i class="fas fa-users"></i>
<span data-id="2" class="badge badge-warning navbar-badge"></span>
</button>
</td>
</tr>
</tbody>
</table>
这篇关于显示我的用户数量并将其显示在徽章上.(Codeigniter)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
