0

I have been trying to get the description to show up in a bootstrap modal. I can pull the price, quantity, list price, and title from the database but when I try to pull the data for the description it makes my info all disappear. I am trying to figure out why?

I have tried several different things and to no avail I have not been able to figure this issue out. I would love a answer to this issue. It is stopping the progress of my project that needs to be completed soon.

When I add description to the code my info disappears on the first modal button clicked. The 2nd modal button clicked shows all info but then whenI go to the 4th and 5th modal button I get the same info as the 4th modal button. When I take out description from SELECT then all data shows up in modal except for the description. I am at a loss and truly need more understanding of what I might have done wrong. Thank you for your time. The actual site is up http://www.pdnauction.com and right now the description is in the code so that it shows the issues. 

    $(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>
Nathan Nelson
  • 11
  • 5

2 Answers2

0

One issue (that may or may not be the primary cause, but you need to fix before you can really debug well) is you have many id's with the same value. An id must be unique. If you need two elements to have the same selector, e.g. "getProducts", use a class="getProducts" or a data- attribute. In my projects, I like to completely separate js and html/css, so I use data- attributes (there are some drawbacks, mainly speed to this method, but you can do more reading later on that).

So I would recommend:

1.) View the page source of your page

2.) Copy and paste it all into here: https://validator.w3.org/#validate_by_input

3.) Fix all the errors shown by the validator

If after that you still have an issue, come back and ask your question again and/or edit your question.

EDIT

Other than duplicate id's, you'll notice you have some issues with things like this:

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

The " after 6.5 is read by html as closing the alt tag, when actually you want to close the alt tag after BN965BLC. What you may want to look into there is URL encoding. https://www.w3schools.com/tags/ref_urlencode.asp Basically, a " symbol will be changed to %22, spaces are changed to %20, etc. so that the contents inside the alt tag won't affect the html. If you want to do that on the php side, take a look at rawurlencode(). If you want to do that on the js side, Encode URL in JavaScript?

KayakinKoder
  • 3,243
  • 3
  • 23
  • 37
  • IS there anyway you could tell me how to make separate ids for each product that is looped? I am new to this and wanting to learn. Thank you so much. I have corrected all but the duplicate ids and I am stuck trying to figure out how I can loop unique IDs or the process to call IDs from the database with php. Thank you. If I don't sound like I know what I am saying then please correct me. I am a fast learner:) – Nathan Nelson Nov 25 '17 at 03:12
  • Hmm, not quite sure what you're asking, but let me guess. Lets say you have two products, and they each have an id. Product A might have id = 1 in your database, and Product B might have id = 2 in your database. On the html webpage, your goal is to display the information about these two products (title, price, description, etc.) What you want to do is, using php and mysql, first get the details about each product and store the details in a php array. Then to display the details about each product, loop through that php array and php echo the information in the array. – KayakinKoder Nov 25 '17 at 15:59
  • Also, there are still a lot of html errors shown by validator. I would highly recommend fixing all of those first. Those errors can cause a lot of problems, even if your php and everything else is correct. So instead of id="images", change that to class="images" etc. – KayakinKoder Nov 25 '17 at 16:03
0

The main source of your error is that your server does not respond for some of the ids, and apparently your javascript displays the details of the previously shown product. Please note that the response from http://www.pdnauction.com/empData.php?id=1 and http://www.pdnauction.com/empData.php?id=5 are blank pages, while on http://www.pdnauction.com/empData.php?id=2 you have the expected results.

First, check your server side code in order to have the proper responses. Second, make a check in your javascript .done() callback to display the modal only if you have answer from the server. Something like this:

// … 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
dferenc
  • 7,918
  • 12
  • 41
  • 49