jQuery AJAXリクエストでHTMLコンテンツを置き換えます。

Question

jQueryとPHPを使用してAJAXフィルタを作成しようとしています。私のユーザーがドロップダウンから原料を選択すると、データベースに、その原料を含むレシピが存在するかどうか、そしてユーザーがレシピを作成したかどうかがわかります。このクエリは完全に機能し、各レシピのHTMLをループして作成することができます。私はAJAX経由でHTMLを更新したい。現時点では私は私のAJAXのためにこれを持っている：それは私がした後、以下のHTMLとIDの料理レシピでのdivのデフォルトのデータを置き換えたいと呼ばれていたときに

$(document).ready(function() { 
    $('#filterButton').click(function(e) { 
     e.preventDefault(); 
     // When the filter button is clicked, grab the ingredient ID and the cuisine ID 
     var mainIngred = $('#sel1').val(); 
     var cuisine = $('#cuisine').val(); 
     var userID = $('#userIDHidden').val(); 

     var data = { 
      "ingredID" : mainIngred, 
      "tagID"  : cuisine, 
      "userID" : userID 
     } 

     var filterajaxurl = '/recipe-project/filter-ajax.php'; 

     $.ajax({ 
      url: filterajaxurl, 
      type: "POST", 
      data: data, 
      success:function(data) { 
       $("#cookbook-recipe").html(data); 
      } 
     }); 
    }); 
}); 

これは、私が呼び出すPHPスクリプトですPHPがループし、各レシピを取得しました。以下は

include_once('classes/class-database-functions.php'); 
$db_functions = new Database_Functions();  
$ajax_recipes = $db_functions->ajax_filter_search(23,6);  
$recipes_array = array();  
foreach ($ajax_recipes as $ajax_recipe) { 
    $search_recipes = $db_functions->get_single_recipe($ajax_recipe); 
    $rows = mysqli_fetch_array($search_recipes, MYSQL_ASSOC); 
    array_push($recipes_array,$rows); 
} ?> 


    <?php 
     if (isset($recipes_array)) { 
      foreach ($recipes_array as $single_recipe) { ?> 
       <div class="col-md-4 portfolio-item"> 
        <a href="single-recipe.php?id=<?php echo $single_recipe['recipe_id'];?>"> 
         <?php if ($single_recipe['recipe_image'] == '') { ?> 
          <img class="img-responsive" src="http://placehold.it/300x200" alt=""> 
         <?php } else { ?> 
          <img class="img-responsive" src="<?php echo $single_recipe['recipe_image']; ?>" alt=""> 
         <?php } ?> 
        </a> 
        <h4> 
         <a href="#"> 
          <?php echo $single_recipe['recipe_name']; ?> 
         </a> 
        </h4> 
       </div> 
      <?php } } else { ?> 
      <div class="col-md-4 portfolio-item"> 
       <h4>Please Add Some Recipes</h4> 
      </div> 
     <?php } ?> 

が、私はボタンをクリックすると、HTMLが交換されません。しかし、私のデフォルトのHTML

<button id="filterButton" class="btn btn-lg active" role="button">Filter Recipes</button> 
<div id="cookbook-recipes" class="col-md-9"> 
      <?php 
      if (isset($recipes_array)) { 
      foreach ($recipes_array as $single_recipe) { ?> 
      <div class="col-md-4 portfolio-item"> 
       <a href="single-recipe.php?id=<?php echo $single_recipe['recipe_id'];?>"> 
        <?php if ($single_recipe['recipe_image'] == '') { ?> 
         <img class="img-responsive" src="http://placehold.it/300x200" alt=""> 
        <?php } else { ?> 
        <img class="img-responsive" src="<?php echo $single_recipe['recipe_image']; ?>" alt=""> 
        <?php } ?> 
       </a> 
       <h4> 
      <a href="#"> 
      <?php echo $single_recipe['recipe_name']; ?> 
      </a> 
     </h4> 
      </div> 
      <?php } } else { ?> 
      <div class="col-md-4 portfolio-item"> 
       <h4>Please Add Some Recipes</h4> 
      </div> 
      <?php } ?> 
     </div> 

であると私はコンソールのエラーが出ていない、誰もがなぜ見ることができますか？

Answer 1

お手伝いがあります。

variable内のすべてのHTMLを設定し、最終的にそれをエコー：

あなたのJSで

$html_reponse = ""; 
<?php 
if (isset($recipes_array)) { 
    foreach ($recipes_array as $single_recipe) { 
     $html_reponse .= "<div class='col-md-4 portfolio-item'>"; 
      $html_reponse .= "<a href='single-recipe.php?id=".$single_recipe['recipe_id']."'>"; 
       if ($single_recipe['recipe_image'] == '') { 
        $html_reponse .= "<img class='img-responsive' src='http://placehold.it/300x200' alt=''>"; 
       } else { 
        $html_reponse .= "<img class='img-responsive' src='".$single_recipe['recipe_image']."' alt=''>"; 
       } 
      $html_reponse .= "</a>"; 
      $html_reponse .= "<h4>"; 
       $html_reponse .= "<a href='#'>".$single_recipe['recipe_name']."</a>"; 
      $html_reponse .= "</h4>"; 
     $html_reponse .= "</div>"; 
    } 
}else{ 
    $html_reponse .= "<div class='col-md-4 portfolio-item'>"; 
     $html_reponse .= "<h4>Please Add Some Recipes</h4>"; 
    $html_reponse .= "</div>"; 
} 

echo $html_reponse;exit; 

：

success:function(data) { 
    // remove this alert after your testing. 
    // It is just to placed that we successfully got the reponse 
    alert("We got Response"); 
    // Just showing response in Browser console 'press F12 shortcut to open console in your browser' 
    console.log(data); 
    // removing existing HTML from the container and then entering new one! 
    $("#cookbook-recipe").empty().html(data); 
} 

それはまだ動作しない場合は、あなたが応答を取得して、いくつかの問題がある可能性があります。 Ajax successコールバックイベントが発生していることを確認してください。