BS3只是一个标签工作,为什么?

时间:2015-04-05 09:33:28

标签: jquery twitter-bootstrap-3

我开发了带有bootstrap 3标签的消息系统( bs3标签信息:http://getbootstrap....nents/#nav-tabs ) 当然我正在使用它的垂直风格。所以有以下内容;

my message system

我只是发送给 Mustafa 成员',我无法发送给 Alican 成员'。 左边的这个页面设计(所以tab-title)获得php列表到消息标题(使用MySQL DISTINCT)。然后是相同的代码获取消息。

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

黄色按钮,(所以它是"提交按钮")jquery用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后代码;

$("#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标准(所以我在数据 - 之前添加了属性) 例如,m_isim -> data-m-isim

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

我认为我犯了一些错误。我不了解他们。因为我找不到:/(我写的是什么有趣的代码?) 第二个选项卡发布但数据添加到第一个选项卡内(空白和添加的第一个选项卡ID添加的数据库)。聊天列表标记为ul我将其转换为此内容;

<ul class="chat"> - &gt; <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

用户名: fatihmert

密码: sanane123 ,并在您登录时刷新页面。右上角,收件箱&gt;看到所有。

1 个答案:

答案 0 :(得分:2)

问题在于您的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>

Alican的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="21" m_atan="18" m_isim="fatihmert">Gönder</button>
    </span>
    </div>
    <div class="postCevap"></div>
</div>

Button和输入字段具有相同的id,这是不正确的。这就是你的代码无效的原因。请使用类来更好地兼容代码。

注意:避免使用m_alanm_atanm_isimHtml标记中存储数据,请使用标准data-m-alandata-m-isim&amp; &安培; data-m-atan而是。