1

SQL クエリの結果に応じて特定の div を表示しようとしています。

私の問題は、div を非同期に切り替えることができないことです。 現在、div を更新するには、ページを更新する必要があります。

  <?php
  //SQL query

   if (foo) {
   ?>

   <div id="add<?php echo $uid ?>">
      <h2><a href="#" class="plus" ?>">Add to list!</a></h2>   
   </div>

   <?php
       } else { 
   ?>
  <div id="remove<?php echo $uid ?>">
     <h2><a href="#" class="minus" ?>">Delete!</a></h2>
  </div>

  <?php     
              }
  <?          


 <script type="text/javascript">
 //add to list

 $(function() {
 $(".plus").click(function(){
 var element = $(this);
 var I = element.attr("id");
 var info = 'id=' + I;
 $.ajax({
 type: "POST",
 url: "ajax_add.php",
 data: info,
 success: function(data){
 $('#add'+I).hide();
 $('#remove'+I).show();
 }
 });
 return false;
 });

 });
 </script>


 <script type="text/javascript">
 //remove 
 $(function() {
 $(".minus").click(function(){
 var element = $(this);
 var I = element.attr("id");
 var info = 'id=' + I;
 $.ajax({
 type: "POST",
 url: "ajax_remove.php",
 data: info,
 success: function(data){
 $('#remove'+I).hide();
 $('#add'+I).show();
 }
 });

 return false;

 });

 });
 </script>

ajax_add.php一部のajax_remove.phpSQL クエリのみが含まれます。

ページを更新せずに切り替えるには、div の #follow と #remove に何が欠けていますか?

4

2 に答える 2

1

「SQL クエリの結果に応じて特定の div を表示しようとしています」

あなたのコードは、SQL クエリの結果に対して何もしていないようです。Ajax 成功コールバックで非表示または表示する div は、クエリの結果ではなく、クリックされたリンクのみに依存します。

とにかく、クリック ハンドラーは、id属性を持たない要素から属性を取得しようとしています。あなたが持っている：

$(".plus").click(function(){
  var element = $(this);
  var I = element.attr("id");

...を持たない.plusアンカー要素はどこにありますか。が定義されているのは、アンカーを含む div です。div からを取得するために使用できますが、HTML に不完全な PHP が含まれているため、アンカーでを定義するつもりだったと思います。ididelement.closest("div").attr("id")idid

<a href="#" class="plus" ?>">
                         ^-- was this supposed to be the id?

これを試して：

<a href="#" class="plus" data-id="<?php echo $uid ?>">

その後：

 var I = element.attr("data-id");

また、2 つの個別のスクリプト要素と 2 つのドキュメント準備完了ハンドラーは必要ないことにも注意してください。同じドキュメント準備内から両方のクリック ハンドラーをバインドできます。そして、あなたの場合、2 つのクリック関数はほぼ同じことを行うため、それらを 1 つのハンドラーに組み合わせることができます。

  <script type="text/javascript">
  $(function() {
    $(".plus,.minus").click(function(){
      var element = $(this);
      var I = element.attr("data-id");
      var isPlus = element.hasClass("plus");
      $.ajax({
        type: "POST",
        url: isPlus ? "ajax_add.php" : "ajax_remove.php",
        data: 'id=' + I,
        success: function(data){
          $('#add'+I).toggle(!isPlus);
          $('#remove'+I).toggle(isPlus);
        }
      });
      return false;
    });    
  });
  </script>
于 2013-09-07T23:07:46.553 に答える
1

私が Ajax Reloading を行うのが好きな方法は、2 つのファイルを使用することです。

  • 1 つ目: すべてのデータが投稿されているメイン ファイル。
  • 2 つ目: db を使用したタスクが作成される ajax ファイル。

それよりも次のように機能します：

Main ファイルでは、ユーザーはボタンをクリックします。ボタンはjQuery ajax関数をアクティブにしています。ajaxファイルがリクエストを取得してポストアウトするよりも（「echo」または同等のものを使用）。この時点で、メイン ファイルが成功し、結果を含む応答が返されます。そして、応答を使用して、特定の div の HTML コンテンツ全体を変更します。

例えば：

jQuery ajax 関数:

$.ajax({
type: 'POST',  // Type of request (can be POST or GET).
url: 'ajax.php', // The link to the Ajax file.
data: {
    'action':'eliran_update_demo', // action name, used when one ajax file handles many functions of ajax.
    'userId':uId, // Simple variable "uId" is a JS var.
    'postId':pId  // Simple variable "pId" is a JS var.
},
success:function(data) {
    $("#div_name").html(data); // Update the contents of the div
},
error: function(errorThrown){
    console.log(errorThrown); // If there was an error it can be seen through the console log. 
}
});

PHP ajax 関数:

if (isset($_POST['action']) ) {
    $userId = $_POST['userId']; // Simple php variable
    $postId = $_POST['postId']; // Simple php variable
    $action = $_POST['action']; // Simple php variable

    switch ($action) // switch: in case you have more than one function to handle with ajax.
    {
        case "eliran_update_demo":
                    if($userId == 2){
                echo 'yes';
            }
            else{
                echo 'no';
            }
        break;
    }
}

そのphp関数では、やりたいことは何でもできます！
このベースで何でもできることを決して忘れないでください。

これがお役に立てば幸いです:)

ご不明な点がございましたら、お気軽にお問い合わせください。:)

于 2013-09-07T23:10:30.837 に答える