得到的描述顯示在使用AJAX，PHP，JAVASCRIPT從數據庫中提取的引導模式中。

Question

我一直試圖使描述顯示在引導程序模式中。 我可以從數據庫中提取價格，數量，標價和標題，但是當我嘗試為描述提取數據時，它會使我的信息全部消失。 我試圖弄清楚為什么？

我嘗試了幾種不同的方法，但都無濟於事，無法解決這個問題。 我很想回答這個問題。 這正在停止我的項目的進度，該項目需要盡快完成。

當我向代碼添加描述時，我的信息會在單擊的第一個模式按鈕上消失。 單擊的第二個模式按鈕顯示所有信息，但是當我轉到第四個和第五個模式按鈕時，我得到的信息與第四個模式按鈕相同。 當我從SELECT中取出描述時，除描述外，所有數據都以模式顯示。 我很茫然，確實需要對我做錯了什么有更多的了解。 感謝您的時間。 實際站點位於http://www.pdnauction.com上 ，現在說明位於代碼中，從而可以顯示問題。

    $(document).ready(function(){
    $(document).on('click', '#getProducts', function(e){
    e.preventDefault();
    var id = $(this).data('id');
    $('#products-detail').hide();
    $('#products_data-loader').show();
    $.ajax({
    url: 'empData.php',
    type: 'GET',
    data: 'id='+id,
    dataType: 'json',
    cache: false
    })

    .done(function(data){
    console.log(data.title);
    $('#products-detail').hide();
    $('#products-detail').show();
    $('#id').html(data.id);
    $('#products_title').html(data.title);
    $('#products_price').html("$"+data.price);
    $('#products_list_price').html("$"+data.list_price);
    $('#products_image').html(data.image);
    $('#products_description').html(data.description);
    $('#products_quantity').html(data.quantity);
    $('#products_data-loader').hide();
    })
    .fail(function(){
    $('#products-detail').html('Error, Please try again...');
    $('#products_data-loader').hide();
    });
  });
});





    <?php
    include_once ("core/init.php");
    if($_REQUEST['id']) {
    $sql = "SELECT id, title, price, list_price, quantity, description                   FROM products WHERE id='".$_REQUEST['id']."'"; $resultset = mysqli_query($conn, $sql) or die("database error:".          mysqli_error($conn));
    $data = array();
    while( $rows = mysqli_fetch_assoc($resultset) ) {
    $data = $rows;
    }
    echo json_encode($data);
    }    
    ?>


    <div id="emp-modal" class="modal fade" tabindex="-1" role="dialog"       aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog"> 
    <div class="modal-content">                  
     <div class="modal-header"> 
         <button type="button" class="close" data-dismiss="modal" aria-   hidden="true"></button> 
         <h4 class="modal-title">
         <i class="glyphicon glyphicon-user"></i> Product Description
         </h4> 
     </div>          
     <div class="modal-body">                       
         <div id="products_data-loader" style="display: none; text-   align: center;">
             <img src="ajax-loader.gif"> 
         </div>                       
         <div id="products_data-loader">                                        
             <div class="row"> 
                 <div class="col-md-12">                         
                 <div class="table-responsive">                             
                 <table class="table table-striped table-bordered">
                 <tr>
                 <th>Product</th>
                 <td id="products_title"></td>
                 </tr>
                 <th style="color: green">Price</th>
                 <td id="products_price" style="color: green"></td>
                 </tr>                                         
                 <tr>
                 <th><s style="color: red">List Price</s></th>
                 <td id="products_list_price" style="color: #ff0000"></td>
                 </tr>
                  <tr>
                 <th>Quantity</th>
                 <td id="products_quantity"></td>
                 </tr>    
                 <tr>
                 <th>Description</th>
                 <td id="products_description"></td>
                 </tr>
                 <tr>
                 <th>Gallery</th>
                 <td id="products_image"></td>
                 </tr>                                                                                         
                 </table>                                
                 </div>                                       
               </div> 
          </div>                       
         </div>                              
     </div>           
   <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>  
   </div>              
   </div> 
   </div>
   </div>

Answer 1

一個問題（可能是或可能不是主要的原因，但是您需要在真正調試好之前進行修復）是您有許多具有相同值的ID。 ID必須是唯一的。 如果需要兩個元素具有相同的選擇器，例如“ getProducts”，請使用class =“ getProducts”或data-attribute。 在我的項目中，我喜歡將js和html / css完全分開，因此我使用了data-attribute屬性（存在一些缺點，主要是這種方法的速度較快，但是您可以在此后做更多的閱讀）。

所以我建議：

1.）查看頁面的頁面來源

2.）將所有內容復制並粘貼到此處： https : //validator.w3.org/#validate_by_input

3.）修正驗證器顯示的所有錯誤

如果在那之后您仍然有問題，請回來再次詢問您的問題和/或編輯您的問題。

編輯

除了重復的ID外，您還會注意到類似這樣的問題：

alt="Boss Elite 320-Watt 6.5" Touch Screen Multimedia Car Stereo with Bluetooth, GPS and Rear View Camera - Black, BN965BLC"

在“6.5后由HTML改為關閉舊標簽的時候，居然要關閉BN965BLC后ALT標記，你可能想看看有URL編碼是什么。 https://www.w3schools.com/tags/ ref_urlencode.asp基本上，“符號將更改為％22，空格將更改為％20，依此類推 ，以便alt標記內的內容不會影響html。 如果要在php端執行此操作，請查看rawurlencode（）。 如果要在js端執行此操作，請在JavaScript中編碼URL？

Answer 2

錯誤的主要來源是您的服務器不響應某些ID，並且顯然您的javascript顯示了先前顯示的產品的詳細信息。 請注意，來自http://www.pdnauction.com/empData.php?id=1和http://www.pdnauction.com/empData.php?id=5的響應為空白頁，而位於http：/上/www.pdnauction.com/empData.php?id=2您獲得了預期的結果。

首先，檢查您的服務器端代碼以得到正確的響應。 其次，檢查javascript .done()回調以僅在服務器提供答案時顯示模式。 像這樣：

// … existing code
})
.done(function(data){
    if (!data.id) {
        console.log('no response from server');
        $('#products-detail').html('Error, Please try again…');
        $('#products_data-loader').hide();
        return;
    }

    // … existing code
})
.fail(function(){
// … existing code