在js发布的外部文件中通过Ajax访问id div

时间:2017-02-13 07:41:19

标签: javascript php jquery ajax

我想要一个完整的管理面板Ajax写一个页面,用Ajax调用银行的详细信息......我把这些信息倾倒在一个执行按钮关闭的div上

我的鳕鱼是:

HTML

<html>
<head>

  <script src="file/js/Connection.js"></script>

</head>
<body>

  <div class="row" id="box"></div>

</body>
</html>

连接文件js cod:

$(document).ready(function() {
   show_all();
});


      function show_all() {
         work = "select";
          $.ajax({
              type: "POST",
              url: "server.php",
              data: "work="+work,
              success: function(data) {
                  $("#box").html(data);  
              } 
          });  
      }

和文件server.php:

<?php

$pdo = new PDO('mysql:host=localhost;dbname=Contact', 'root', '');

if (isset($_POST['work'])) {
    $work = $_POST['work'];
    if ($work == 'select') {
        $qcomment = $pdo->query("SELECT * FROM myfeilds");
        while ($XXX = $qcomment->fetch()) {
            $Z1 = $XXX['id'];
            $Z2 = $XXX['name'];
            $Z3 = $XXX['active'];
            echo '


<div class="col-lg-3">
  <div class="row" id="back">
    <div class="col-lg-8" id="Fname">
      <span class="glyphicon glyphicon-check"></span>
        <label>' . $Z2 . '</label>
    </div>
    <div class="col-lg-4" id="Fbtn"> ';

      if ($Z3 == 1) { echo '

      <div class="btn btn-on" id="' . $Z1 . '">
        <div> <span class="glyphicon glyphicon-remove"></span></div>
        <div><span class="glyphicon glyphicon-ok"></span></div>
      </div>';   

       } else { echo '

      <div class="btn btn-off" id="' . $Z1 . '">
        <div> <span class="glyphicon glyphicon-remove"></span></div>
        <div><span class="glyphicon glyphicon-ok"></span></div>
      </div>';
       } echo '


    </div>
  </div>
</div>
';
        }
    }
}

?>

最后我尝试将其写下来并打开javascript代码

$(".btn").on('click',function(e){
    if($(this).hasClass("btn-on")){
    $(this).removeClass("btn-on");
    $(this).addClass("btn-off");

        }
        else {
    $(this).removeClass("btn-off");
    $(this).addClass("btn-on"); 

        }
});

他们告诉我因为在外部文件中执行选择然后你必须使用这段代码才能正常工作

$(document).on("click",".btn",function(event) {
    if($(this).hasClass("btn-on")){
    $(this).removeClass("btn-on");
    $(this).addClass("btn-off");

        }
        else {
    $(this).removeClass("btn-off");
    $(this).addClass("btn-on"); 

        }
});

此代码有效,但只是我第一次进入发烧此页面 如果我得到另一个标签并再次返回,则无效...

我该怎么做:)

1 个答案:

答案 0 :(得分:0)

您可以尝试在Jquery中使用Comet http://www.screenr.com/SNH

希望这有帮助。

此致