Ajax模态错误

Question

This is what I tried so far by using Ajax. The Issue is that I get back alert ("Something went wrong!"). I can't find the solution.

Index.php

<?php
  require_once 'core/init.php';
  include 'includes/head.php';
  include 'includes/navigation.php' ;
  include 'includes/headerfull.php';
  include 'includes/leftbar.php';

  $sql ="SELECT * FROM products WHERE featured = 1 ";
  $featured = $db->query($sql);

?>



<!---Main content--->
<div class="col-md-8">
<div class="row">
<h2 class="text-center">Izdvojeni Proizvodi</h2>
<?php while($product = mysqli_fetch_assoc($featured)) : ?>

<div class="col-md-3">
  <h4><?= $product['title']; ?> </h4>
  <img src="<?= $product['image']; ?>" alt="<?= $product['title']; ?> " 
class="img-thumb" />
  <p class ="list-price text-danger"> List Price <s>$<?= $product 
['list_price'];?></s></p>
  <p class="price">Naša Cijena: $<?= $product ['price'];?></p>
  <button type="button" class="btn btn-sm btn-success" onclick 
="detailsmodal(<?= $product ['id']; ?>)">Details </button>
</div>
<?php endwhile; ?>

 </div>
 </Div>

<?php
 include 'includes/rightbar.php';
 include 'includes/footer.php';
?>

Footer.php

</div>
<footer class ="text-center" id="footer">&copy; Copyright 2017-2018 Lodi  
</footer>

<script>

function detailsmodal(id) {
var data = {"id" : id} ;
jQuery.ajax({
url : 'includes/detailsmodal.php',
method : "post" ,
data : data,
success : function(data){
jQuery ('body').append(data);
jQuery ('#details-modal').modal('toggle');
},
 error: function (){
alert ("Something went wrong!");
 }
 });

}
</script>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<!-- Include all compiled plugins (below), or include individual files as 
needed -->
<script 
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>


  </body>
  </html>


    </body>
    </html>

Details modal.php

 <!--Details Modal --->
 <? ob_start(); ?>
 <div class="modal fade details-1" id="details-modal" tabindex="-1" 
 role="dialog" aria-labelledby="details-1" aria-hidden="true">
 <div class ="modal-dialog modal-lg">
 <div class="modal-content">
 <div class="modal-header">
 <button class="close" type="button" data-dismiss="modal" aria-label="Close">
 <span aria-hidden="true">&times;</span>
 </button>
 <h4 class="modal-title text-center">Levis Jeans</h4>
 </div>
 <div class="modal-body">
 <div class="container-fluid">
 <div class="row">
 <div class="col-sm-6">
 <div class="center-block">
 <img src="images/headerlogo/levis.jpg" alt="Levis Jeans" class="details img-responsive">
 </div>
 </div>
 <div class="col-sm-6">
 <h4>Details </h4>
 <p>These jeans are amazing! They are straight leg,fit great and look sexy.
 </p>
<hr>
<p>Price: $34.99</p>
<p>Brand: Levis</p>
<form action="add_cart.php" method="post">
    <div class="form-group">
     <div class="col-xs-3">
         <label for="quantity"> Quantity: </label>
         <input type="text" class="form-control" id="quantity" name="quantity">


     </div>
     <p>Availabe: 3</p>
   </div><br><br>
    <div class="form-group">
        <label for ="size">Size:</label>
        <select name="size" id="size" class="form-control">
         <option value=""></option>
         <option value="28">28</option>
         <option value="32">32</option>
         <option value="36">36</option>
        </select>
    </div>
 </form>

 </div>
 </div>
 </div>
 </div>
 <div class="modal-footer">
 <button class="btn btn-default" data-dismiss="modal">Close</button>
 <button class="btn btn-warning" type="submit"><span class="glyphicon 
 glyphicon-shopping-cart"></span>Add To Cart</button>
 </div>
 </div>
 </div>
 </div>
 <?php echo ob_get_clean(); ?>

init.php

 <?php

 $db= mysqli_connect('sql***.byethost11.com','****','****','ecom24database');
if (mysqli_connect_errno()) {
 echo'Database connection failed with following errors: ' . mysqli_connect_error();
 die();

}

define ('BASEURL','/ECOMDva');

I have already set up a database for navigation bar and modals products. You can see the error on the website here : http://incloudme.byethost11.com/?i=2

Answer 1

Hi I have visited your website running in Bytehost (freehosting), You have a 403 403 Access denied error on Details modal.php this might be because some free hosting denies permissions files for ajax request please change the folder permission to 755 and next time write your ajax error function like this will alert you the error occurred

function detailsmodal(id) {
var data = {"id" : id} ;
jQuery.ajax({
url : 'includes/detailsmodal.php',
method : "post" ,
data : data,
success : function(data){
jQuery ('body').append(data);
jQuery ('#details-modal').modal('toggle');
},
 error: function(xhr, textStatus, errorThrown){                    
                   alert("fail"+errorThrown);
 }
 });