BS3 只有一个选项卡有效，为什么？

Question

我开发了带有 bootstrap 3 个选项卡的消息系统（bs3 选项卡信息：http://getbootstrap....nents/#nav-tabs）当然，我正在使用它的垂直样式。所以有以下;

我只是发送给Mustafa会员'，我无法发送给Alican会员'。此页面在左侧之前的设计（因此 tab-title）得到 php 消息标题列表（MySQL 不同）。然后使用相同的代码获取消息。

我链接的所有此页面的代码 paste.bin：http://pastebin.com/ekqf7dL9

黄色按钮，（所以它是 "submit button"）jquery post 与 ajax 我对 php 文件的请求。有它的代码；

<button m_isim="<?php echo $_SESSION['uyeIsim'];?>" m_atan="<?php echo $_SESSION['uyeId'];?>" m_alan="<?php echo $msjGelenUye['mesaj_alan_id'];?>" class="btn btn-warning btn-sm" id="btn-chat">Gönder</button>

有关变量的信息

$_SESSION['uyeIsim'] -> user name
$msjGelenUye['mesaj_alan_id'] -> user reciever
m_atan -> transmitter

jQuery post 代码如下;

$("#btn-chat").click(function(event){
    var msjGonderenData = {
        "mesaj_atan_id" : $(this).attr('m_atan'), //user transmitter
        "mesaj_alan_id" : $(this).attr('m_alan'), //user receiver
        "mesaj"         : $("#btn-chat-input").val() //message content
    };

    var msjAtanIsim = $(this).attr('m_isim'); //transmitter name

    //alert(msjGonderenData['mesaj']);  //just control, This is "Mustafa" working but "Alican" doesn't work

    $.ajax({
        type        :"POST",
        url         :"inc/request/msjGonder.post.php",
        data        :msjGonderenData,
        success     :function(cvp){
            if(cvp != "1"){
                $(".postCevap").html(cvp);
            }else{
                //add current message list sent message
                $("ul#"+msjGonderenData['mesaj_alan_id']+".chat").append("<li class=\"right clearfix\"><span class=\"chat-img pull-right\"><img src=\"http://placehold.it/50/FA6F57/fff&text="+msjAtanIsim+"\" alt=\"\" /></span><div class=\"chat-body clearfix\"><div class=\"header\"><small class=\"text-muted\"><span class=\"glyphicon glyphicon-time\"></span>&nbsp;Şimdi</small><strong class=\"pull-right primary-font\">"+msjAtanIsim+"</strong></div><p>"+msjGonderenData['mesaj']+"</p></div></li>");
            }
        }
    });
});

msjGonder.post.php 以下代码；

<?php

include '../db.connect.php';
//bootstrapAlertBox
$msj_atan =  $_POST['mesaj_atan_id']; //transmitter
$msj_alan =  $_POST['mesaj_alan_id']; //reciever
$msj =  $_POST['mesaj'];

if(!isset($msj)){
    echo bootstrapAlertBox("info","<b>Boş</b> mesaj gönderemezsiniz !");
}else{
    try{
        $mdb->insert("mesaj",array(
            'mesaj_atan_id' => $msj_atan,
            'mesaj_alan_id' => $msj_alan,
            'mesaj' => $msj,
            'tarih' => getDateTime(),
            'ip' => getIP()
        ));
        echo "1";
    }catch(Exception $e){
        echo bootstrapAlertBox("danger","<b>Bilinmedik Hata: <u>".$e->getMessage()."</u> Lütfen tekrar deneyin.</b>");
    }
}
?>

如何解决这个问题？感谢您的关注。

问候..

为 (@Franky)

添加

嗯，大概明白了。首先，我的代码转换为 html 标准（所以我在 data- 之前添加了属性）例如，m_isim -> data-m-isim

其次，我删除了repeat every ID属性。在这些操作之后，可以请求第一个和第二个选项卡 POST。

我认为我犯了一些错误。我不认识他们。因为我没有找到：/（我写了什么有趣的代码？）第二个选项卡 posting 但数据已添加到第一个选项卡中（均为空，并且按第一个选项卡 ID 添加了数据库）。聊天列表标签是ul 我把它改成了这个;

<ul class="chat"> -> <ul class="chat" data-code="r21>">, r21; r 是常数，21 数字是用户接收者 ID（来自 db）

我无法解决这个问题。 jQuery 最后的代码如下；

var mesajAlanId = $("span.input-group-btn button").data('m-alan');

$("span.input-group-btn").click(function(event){
    var msjGonderenData = {
        "mesaj_atan_id" : $(".receiver-"+mesajAlanId).data('m-atan'), //user transmitter
        "mesaj_alan_id" : $(".receiver-"+mesajAlanId).data('m-alan'), //user receiver
        "mesaj"         : $("input[data-receiver-text=\""+mesajAlanId+"\"]").val() //message content alan_id
    };

    var msjAtanIsim = $(".receiver-"+mesajAlanId).data('m-isim'); //transmitter name

    alert(msjGonderenData.mesaj);

    $.ajax({
        type        :"POST",
        url         :"inc/request/msjGonder.post.php",
        data        :msjGonderenData,
        success     :function(cvp){
            $(':input','.input-group').not(':button, :submit, :reset, :hidden').val('').removeAttr('checked').removeAttr('selected');
            if(cvp != "1"){
                $(".postCevap-"+mesajAlanId).html(cvp);
            }else{
                //add current message list sent message
                //msjGonderenData.mesaj_alan_id
                $("ul.chat[data-code='r"+msjGonderenData.mesaj_alan_id+"']").append("<li class=\"right clearfix\"><span class=\"chat-img pull-right\"><img src=\"http://placehold.it/50/FA6F57/fff&text="+msjAtanIsim+"\" alt=\"\" /></span><div class=\"chat-body clearfix\"><div class=\"header\"><small class=\"text-muted\"><span class=\"glyphicon glyphicon-time\"></span>&nbsp;Şimdi</small><strong class=\"pull-right primary-font\">"+msjAtanIsim+"</strong></div><p>"+msjGonderenData.mesaj+"</p></div></li>");
            }
        }
    });
});

实时代码已更新； http://famousbook.org/beta-test123321

user-name: fatihmert

密码：sanane123 并且，登录后刷新页面。右上角，收件箱 > 查看全部。

Answer 1

问题出在您的 HTML 代码

下面是 Mustafa 的 html。

<div class="panel-footer">
    <div class="input-group">
      <input type="text" placeholder="Yasla gitsin..." class="form-control input-sm" id="btn-chat-input">
      <span class="input-group-btn">
        <button id="btn-chat" class="btn btn-warning btn-sm" m_alan="31" m_atan="18" m_isim="fatihmert">Gönder</button>
      </span>
    </div>
   <div class="postCevap"></div> 
</div>

Html 对于 Alican.

<div class="panel-footer">
    <div class="input-group">
        <input type="text" placeholder="Yasla gitsin..." class="form-control input-sm" id="btn-chat-input">
    <span class="input-group-btn">
        <button id="btn-chat" class="btn btn-warning btn-sm" m_alan="21" m_atan="18" m_isim="fatihmert">Gönder</button>
    </span>
    </div>
    <div class="postCevap"></div>
</div>

按钮和输入字段相同 id 这是不正确的。这就是您的代码无法正常工作的原因。请使用 class 以获得更好的代码兼容性。

注意：避免使用 m_alan、m_atan、m_isim 在 Html 标签中存储数据使用标准的 data-m-alan、data-m-isim && data-m-atan 相反。

BS3 只有一个选项卡有效，为什么？

BS3 just only the one tab working, why?

jquery

twitter-bootstrap-3