CODEWITHSUNDEEP
javascriptphpjqueryajaxhtml
Jcode
Jcode

Reputation: 203

Using $_POST or $_GET with Modal, Refresh based on ID

Here is the html that generates an array of 6 objects called from the DB (this is working fine), and prints them to a bootstrap row.

<div class="row products">
            <?php while($product = mysqli_fetch_assoc($featured)) : ?>

            <div class="col-md-2 col-sm-6">
                <div class="product">
                    <div class="image">
                        <a href="#"><img src=" <?= "images/wheels/wheelphotos/". $product["bigpic"]; ?>" alt= "<?= $product["manufacturer"]; ?>" class="img-responsive"></a>
                        <div class="quick-view-button"><button type="button" onclick="quickModal(<?= $product["recid"]; ?>)" class="btn btn-default btn-sm">Quick view</button></div>
                    </div>
                    <div class="text">
                        <h3> <a href="detail.html"><?= $product["manufacturer"]; ?></a></h3>
                        <p class="price">$<?= $product["rrp"]; ?></p>
                    </div>
                </div>
            </div>

            <?php endwhile; ?>

Here is the Jquery to generate the modal

<script>
        function quickModal(recid) {
            alert(recid)// checked it was receiving ID

            // setting an id object as recid from db
            var data = {"id" : recid};
            jQuery.ajax({
                url : '/MagV4(Final)/includes/quickModal.php',
                method : "post",
                data : data,
                success: function(data){
                    jQuery('body').append(data);
                    jQuery('#product-quick-view-modal').modal('toggle');
                },
                error: function(){
                    alert("something wrong");
                }
            });
        }
    </script>

Here is the modal code, Now I know the ID is being passed (alert from Modal) but the modal doesn't generate new content after the first modal is loaded, (there are 6 different mag wheels) so if for example I load the modal for the first mag with id 1, the second mag which is id 7 also creates a modal for id 1. Using $_POST['id'] doesn't work in the modal for some reason.

 <?php
    require_once '../core/dbcon.php';
    if(isset($_GET['id'])) {
        $id = $_GET['id'];
        $id = (int)$id;
    }
    echo $id;

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

$sql = ""

?>

<?php ob_start(); ?>
<!-- quick view modal box-->
<div id="product-quick-view-modal" tabindex="-1" role="dialog" aria-hidden="false" class="modal fade">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" data-dismiss="modal" aria-hidden="true" class="close">×</button>
                <div class="row quick-view product-main">
                    <div class="col-sm-6">
                        <div class="quick-view-main-image"><img src=" <?= "images/wheels/wheelphotos/". $product["bigpic"]; ?>" alt= "<?= $product["manufacturer"]; ?>" class="img-responsive"></div>

                        <!-- Ribbons
                        <div class="ribbon ribbon-quick-view sale">
                            <div class="theribbon">SALE</div>
                            <div class="ribbon-background"></div>
                        </div>
                        <!-- /.ribbon
                        <div class="ribbon ribbon-quick-view new">
                            <div class="theribbon">NEW</div>
                            <div class="ribbon-background"></div>
                        </div>
                        <!-- /.ribbon-->
                        <div class="row thumbs">
                            <div class="col-xs-4"><img src=" <?= "images/wheels/wheelphotos/". $product["bigpic"]; ?>" alt= "<?= $product["manufacturer"]; ?>" class="img-responsive"></a></div>
                            <div class="col-xs-4"><img src=" <?= "images/wheels/wheelphotos/". $product["bigpic"]; ?>" alt= "<?= $product["manufacturer"]; ?>" class="img-responsive"></a></div>
                            <div class="col-xs-4"><img src=" <?= "images/wheels/wheelphotos/". $product["bigpic"]; ?>" alt= "<?= $product["manufacturer"]; ?>" class="img-responsive"></a></div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <h2 class="product__heading"><?= $product['manufacturer']; ?></h2>
                        <p class="text-muted text-small text-center">Great Tyre for all vehicle types</p>
                        <div class="box">
                            <form action="add_cart.php" method="post">
                                <p class="price"><?= $product['rrp']; ?></p>
                                <div class="row">
                                    <div class="col-md-6 col-md-offset-3">
                                        <div class="form-group">
                                            <label for="modal_size">Choose your size</label>
                                            <select id="modal_size" class="form-control">
                                                <option value=""></option>
                                                <option value=""></option>
                                            </select>
                                        </div>
                                        <p>Current Stock: 3</p>
                                        <div class="form-group">
                                            <label for="modal_quantity">Quantity</label>
                                            <input type="number" value="1" id="modal_quantity" class="form-control">
                                        </div>
                                    </div>
                                </div>
                                <p class="text-center">
                                    <button type="submit" class="btn btn-primary"><i class="fa fa-shopping-cart"></i>&nbsp;Add to cart</button>
                                    <button type="submit" data-toggle="tooltip" data-placement="top" title="Add to wishlist" class="btn btn-default"><i class="fa fa-heart-o"></i></button>
                                </p>
                            </form>
                        </div>
                        <!-- /.box-->
                        <div class="quick-view-social">
                            <h4>Show it to your friends</h4>
                            <p><a href="#" data-animate-hover="pulse" class="external facebook"><i class="fa fa-facebook"></i></a><a href="#" data-animate-hover="pulse" class="external gplus"><i class="fa fa-google-plus"></i></a><a href="#" data-animate-hover="pulse" class="external twitter"><i class="fa fa-twitter"></i></a><a href="#" data-animate-hover="pulse" class="email"><i class="fa fa-envelope"></i></a></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- /.modal-dialog-->
</div>
<!-- /.modal-->
<!-- /quick view modal box-->
<?php echo ob_get_clean(); ?>

added in the new script but now the modals after the first just flash and then disappear with the same information.

 <script>
    $('a[data-toggle="modal"]').on('click', function(){
        // update modal header with contents of button that invoked the modal
        $('#quick-view-button').html( $(this).html() );
        //fixes a bootstrap bug that prevents a modal from being reused
        $('#product-quick-view-modal').load(
            $(this).attr('href'),
            function(response, status, xhr) {
                if (status === 'error') {
                    //console.log('got here');
                    $('#utility_body').html('<h2>Oh boy</h2><p>Sorry, but there was an error:' + xhr.status + ' ' + xhr.statusText+ '</p>');
                }
                return this;
            }
        );
    });​
</script>

Upvotes: 0

Views: 1784

Answers (1)

Jeromy French
Jeromy French

Reputation: 12121

After further research, I found a few Bootstrap issues mentioning this behaviour here and here. I've asked for issue 5514 to be reopened.

Meanwhile, this jQuery will patch up the problem*:

$('a[data-toggle="modal"]').on('click', function(){
    // update modal header with contents of button that invoked the modal
    $('#myModalLabel').html( $(this).html() );
    //fixes a bootstrap bug that prevents a modal from being reused
    $('#utility_body').load(
        $(this).attr('href'),
        function(response, status, xhr) {
            if (status === 'error') {
                //console.log('got here');
                $('#utility_body').html('<h2>Oh boy</h2><p>Sorry, but there was an error:' + xhr.status + ' ' + xhr.statusText+ '</p>');
            }
            return this;
        }
    );
});​

Please see http://jsfiddle.net/jhfrench/qv5u5/51/ for a working example.*

So, in your case, you'd also edit the calling button from <button type="button" onclick="quickModal(<?= $product["recid"]; ?>)" class="btn btn-default btn-sm">Quick view</button> to <a href="/MagV4(Final)/includes/quickModal.php?recid=<?= $product["recid"]; ?>" data-toggle="modal" class="btn btn-default btn-sm">Quick view</a>. FWIW, I favor this "link invokes modal" approach (vs "button invokes modal") because this also allows the user to right-click the link and open the modal's contents in a new browser tab, should they so-choose. So think through the implications of that UX.

*-For some reason, sometimes when you click the button in the fiddle the modal will show blank. This is not a problem in the application I'm working with, so I suspect it's a problem unrelated to this question/answer.

Upvotes: 1

Related Questions