Как сбросить / очистить значения из запроса в модале "Bootstrap 4"? - PullRequest
Новая
       32

Как сбросить / очистить значения из запроса в модале "Bootstrap 4"?

0 голосов
/ 24 марта 2019

У меня есть поле для избранных элементов, которое зацикливается с использованием «id» для каждой кнопки «Details».Моя проблема заключается в том, что «Bootstrap 4 modal» использует значения из первой кнопки «Подробности», которая была нажата, даже если я нажимаю кнопку «Детали» другого элемента *

Как сбросить или очистить значения в моем «Bootstrap 4, модальный, а не 3, потому что он продолжает использовать значения самого идентификатора, который использовался, даже если я нажимал на другие кнопки

jQuery Ajax 

 var data = {"id" : id}; //Json string 
        jQuery.ajax({
                url: "/myecommerse/includes/wala2.php",
                type: "POST",   
                data: data, 
                success : function(data){
                    jQuery('body').append(data);
                    jQuery('#details-modal').modal('toggle'); 
                    $('body').on('hidden.bs.modal', '#details-modal', function () {
             $(this).removeData('bs.modal');
        });
                },
                error : function(){
                    alert('something went wrong');
                }

        });

    }

Модальный 


<?php




 include '../core/init.php';
    $id = $_POST['id'];

    $sql = "SELECT * FROM products WHERE id = '$id'";
    $result = $db->query($sql);
    $product = mysqli_fetch_assoc($result);


?>



<!-- Modal -->       
<?php
    ob_start();

?>

<div class="modal fade details-modal" id="details-modal" tabindex="-1" role="dialog" aria-labelledby="details-modal" 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"><?php echo $product['title']; ?></h4>
                <h4 class="modal-title text-center"><?php echo $_POST['id']; ?></h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid">

                    <div class="row">
                        <div class="col-sm-6">
                            <div class="center-block">
                                <img src="<?php echo $product['img']; ?>" alt="<?php echo $product['title']; ?>" class="details img-responsive"/>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <h4>Details</h4>
                            <p><?php echo $product['description']; ?></p>
                            <hr>
                            <p>Price: <?php echo $product['price']; ?></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>Available:3</p>
                                </div>
                                <div class="form-group">
                                    <label for="size">Size</label>
                                    <select name="size" id="size" class="form-group">
                                        <option value="small">Small</option>
                                        <option value="medium">Medium</option>
                                        <option value="large">Large</option>
                                        <option value="extralarge">Extra large</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-shooping-cart"></span>Add to cart</button>
            </div>
        </div>
    </div>

</div>  

<script>
function closeModal(){ 

        jQuery.('#details-modal').modal('hide');

        $('body').on('hidden.bs.modal', '#details-modal', function () {
             $(this).removeData('bs.modal');
        });

        setTimeout(function(){
            jQuery.('#details-modal').remove();
        },500);

    }
</script>

<?php
    echo ob_get_clean();
?>

Спасибо за ответ заранее ..

...