Yii:TbCollapse 多链接(href = #collapse 并将状态更新为 be=“1”）

Yii: TbCollapse multi link (href = #collapse and update status to be="1")

本文关键字：更新 状态 be TbCollapse 链接 #collapse href Yii      更新时间：2023-09-26

在本期中，我使用助推器小部件tbcollapse使一些像消息菜单中的收件箱，未读或新消息的状态为0，因此当我单击折叠小部件中的面板标题时，它将打开ID为 #collapse 的div，并将数据库中的状态更改为1（已读），这是可能的???如何？

<?php $collapse = $this->beginWidget('booster.widgets.TbCollapse');
<div class="panel-group" id="accordion">
 <?php for ($a = 0; $a<count($pesan); $a++){ ; ?>
  <div class="panel panel-warning">
    <div class="panel-heading">
      <h4 class="panel-title">
	<a data-toggle="collapse" data-parent="#accordion" href="#collapse<?php echo $a ;?>">
		 <?php echo $pesan[$a]["sender"] ;?>
        </a>
      </h4>
    </div>
    <div id="collapse<?php echo $a ;?>" class="panel-collapse collapse">
      <div class="panel-body">
	   <?php echo $pesan[$a]["message"] ;?>
      </div>
    </div>
  </div>
 <?php }; ?>
 </div>

只需使用 bootstrap 的 collapse 事件来触发 ajax 调用，对于您想要的，最好的选择可能是显示的 .bs.collapse 事件，例如：

$('#myCollapsible').on('shown.bs.collapse', function () {
  //Get the id of the message and use ajax to update the database      
});

编辑 #1

举个小例子：

首先向小组件添加自定义 ID 

<?php $collapse = $this->beginWidget('booster.widgets.TbCollapse',
array('id'=>"myCollapsible")
);?>

在视图的末尾添加一个脚本标签，或者你可以用 yii 的 CClientScript 注册一个脚本。为了简单起见，我将使用脚本标签

<script>
  $(function(){
    $('#myCollapsible').on('shown.bs.collapse', function (e) {
    var target=$(e.target);//get shown element
    if(target.attr('id')===$(this).attr('id'))return;//Event is fired on page load, ignore event on main collapse
      $.post('controllerUrl',{messageId:$(e.target).attr("id")},function(data){//call server to update 
       //do something if everything was ok or display error
      });
    });
  });
</script>

在控制器中，只需添加一个方法来更新消息状态

public function actionUpdateMessage{
   MessageModel::model()->updateByPK($_POST['messageId'],'viewed'=>'1');//update the model whose id was sent, provide some validation if needed
   return;//end processing
}

希望这有帮助

编辑 #2

如果您需要为 ajax 调用放置更多元数据，我建议在您的元素中使用数据属性，例如您可以根据数据库添加 Id

<div id="collapse<?php echo $a ;?>" class="panel-collapse collapse"
   data-messageId="<?php echo $pesan[$a]["id"] ;?>">
  <div class="panel-body">
   <?php echo $pesan[$a]["message"] ;?>
  </div>
</div>

在javascript代码中，您可以使用数据方法检索信息，如下所示

<script>
  $(function(){
    $('#myCollapsible').on('shown.bs.collapse', function (e) {
    var target=$(e.target);//get shown element
    if(target.attr('id')===$(this).attr('id'))return;//Event is fired on page load, ignore event on main collapse
      $.post('controllerUrl',{messageId:$(e.target).data("messageId")},function(data){//call server to update 
       //do something if everything was ok or display error
      });
    });
  });
</script>

编辑 #3

如果使用jquery数据方法检索数据属性不起作用，您仍然可以使用attr方法访问这些属性

 $.post('controllerUrl',{messageId:target.attr("data-messageId")},function(data){//call server to update 
   //do something if everything was ok or display error
  });

如果数据属性 aproach 不起作用，您也可以尝试使用隐藏字段，如下所示：

Firs，而不是设置data-messageId属性，而是在面板折叠div中添加隐藏的输入，如下所示：

<div id="collapse<?php echo $a ;?>" class="panel-collapse collapse">
  <input type="hidden" value="<?php echo $pesan[$a]["id"] ;?>"/>
  <div class="panel-body">
   <?php echo $pesan[$a]["message"] ;?>
  </div>
</div>

然后，在 javascript 中更改以下内容：

$.post('controllerUrl',{messageId:target.find("input").val()},function(data){//call server to update 
   //do something if everything was ok or display error
  });
相关文章：