CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
rtom
rtom

Reputation: 209

Sending HTML code to ajax

I need to send this HTML block as a response(or request?) to ajax script, probably I also need this php part... Basically i want to open a modal box with data generated from variable that i am getting from JS, and when a tried to generate my modal outside of ajax it didnt update well. 

if(!empty($_SESSION['modalBoxID'])){
    $sql = "SELECT * FROM vehicle WHERE vehicle.id='{$_SESSION['modalBoxID']}'";
    $sqlquery = $db->query($sql);
    $_SESSION['modalBoxID'] = NULL;
}
?>


 <div class="modal-body display-content">
            <div class="container-fluid">
            <?php while($details = mysqli_fetch_assoc($sqlquery)) : ?>


                <div class="col-md-4"><img src=<?php echo $details['image'];?> class="image-responsive">

                <div class="col-sm-6">
                    <form action="add_cart.php" method="post">
                    <div class="form-group">
                        <label for="quantity">Quantity:</label>
                        <input type="text" class="form-control" id="quantity" name="quantity">
                    </div>
                    </form>
                </div>
                <div class="col-sm-6">
                    <br/>
                    <button type="button" class="add-to-basket btn btn-success" >ADD TO CART</button>
                </div>
                </div>
                <div class="col-md-1"></div>
                <div class="col-md-7" id="desc">
                    <p><b>Model:</b> <?php echo $details['model'];?></p>
                    <p><b>Engine:</b>  <?php echo $details['engine'];?></p>
                    <h4>Description</h4>
                    <p><?php echo $details['description'];?></p>
                    <hr>
                    <hr>
                </div>

            </div>
            </div>
            <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
  <?php endwhile; ?>
</div>

Here is JS script that i need to send it to

$(document).ready(function(){
// Otevre modal
$('.show-modal').click(function(){
    var product_id = $(this).attr('data-id');
        $.ajax({
        type: 'POST',
        cache: false,
        data: {modalID : product_id},
        url: 'includes/getID.php', // tomuto souboru predas idecko produktu, zapises do kosiku atd.
        success: function(data) {
            $('.modal-body').html(data)
            $("#itemBox").modal('show');
            // treba nejaka hlaska, ze byl pridan do kosiku
        }
    });


    // kod co otevre modal, mkrni na bootstrap manual jak je otevira nebo si otevreni nadefinuj sa
    //$('.product_id').val(productID);
});
    $(document.body).on('hidden.bs.modal', function () {
          $("#itemBox").removeData('bs.modal');
        });

Upvotes: 1

Views: 4323

Answers (2)

rtom
rtom

Reputation: 209

I solved the problem by modifing my JS to look like this 

$(document).ready(function(){
// Otevre modal
$('.show-modal').click(function(){
    var product_id = $(this).attr('data-id');
        $.ajax({
        type: 'POST',
        cache: false,
        data: {modalID : product_id},
        //datatype: 'html',
        url: 'includes/getID.php', // tomuto souboru predas idecko produktu, zapises do kosiku atd.
        success: function(data) {
            $("#itemBox").attr('data-id',product_id)
            $("#itemBox").modal('show').on('shown.bs.modal', function () {
                $(this).find(".modal-content").html(data)
            });


            // treba nejaka hlaska, ze byl pridan do kosiku
        }
    });


});

Upvotes: 0

Scott
Scott

Reputation: 21892

You're missing a couple quotes in the php...

....and you'll want to use dataType: 'html' for the ajax call.

$('.show-modal').click(function(){
    var product_id = $(this).attr('data-id');
        $.ajax({
        type: 'POST',
        cache: false,
        data: ({modalID : product_id}),
        dataType: 'html',
        url: 'includes/getID.php', // tomuto souboru predas idecko produktu, zapises do kosiku atd.
        success: function(data) {
            $('.modal-body').html(data)
            $("#itemBox").modal('show');
            // treba nejaka hlaska, ze byl pridan do kosiku
        }
    });

Upvotes: 1

Related Questions