Javascript Yii:TbCollapse多链接（href=#折叠并更新状态为=“1”）

在本期中，我使用booster widgets tbcollapse在消息菜单中创建了一些类似收件箱的功能，未读或新消息的状态为0，因此当我单击collapse widgets中的面板标题时，它将打开id为#collapse的div，并将数据库中的状态更改为1（已读），可能吗？？？怎么做？

只需使用bootstrap的collapse事件触发ajax调用，因为您想要的可能是最好的选项是show.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")
);?>

希望这有帮助

编辑#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>

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

首先，不要设置数据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>

还没有工作，我认为id没有定义，id主键来自$pesan[$a][“id”]，没有任何变化@pablo，messageId仍然没有定义。。。我尝试直接定义，但仍然没有改变..$。post（'controllerUrl'，{messageId:1}，函数（数据）{}）；？您是如何在控制器中检索messageId的？另外？url真的是controllerUrl吗？我建议使用createUrl，如下所示：
<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>

<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>

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

<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>

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