0

Hello i am developing a project but getting an error i don't know why is this happening and i have tried everything i can.
please help me i am providing code below it requires 3 files to understand it so i am sending them:

index.php

<!-- Main Content-->
            <div class="col-md-8">
                <div class="row">
                    <h2 class="text-center">Featured Products</h2>
                    <?php while($product = mysqli_fetch_assoc($featured)): ?>
                        <div class="col-md-3">
                            <h4><?= $product['title']; ?></h4>
                            <img src="<?= $product['images']; ?>" alt="<?= $product['title']; ?>" class="img-thumbnail"/>
                            <p class="list-price text-danger">List Price: <s>$<?= $product['list_price']; ?></s></p>
                            <p class="price">Our Price: $<?= $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';

    ?>

detailsmodal.php:

<?php
    require_once 'Core/init.php';
    $id = $_POST['id'];
    $id = (int)$id;
    $sql = "SELECT * FROM products WHERE id= $id";
    $result = $db->query ($sql);
    $product = mysqli_fetch_assoc($result);
    $brand_id = $product['brand'];
    $sql1 = "SELECT brand FROM brand WHERE id = '$brand_id'";
    $brand_query = $db->query($sql1);
    $brand = mysqli_fetch_assoc($brand_query);
    $sizestring = $product['sizes'];
    $size_array = explode(',', $sizestring);
?>

<!-- Details light box -->
<?php ob_start(); ?>
        <div class="modal fade details-1" id="details-modal" tabindex="-1" role="dialog" aria-lebelledby="details-1" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button class="close" type="button" onclick="closeModal()" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title text-center"><?= $product['title']; ?></h4>
                    </div>
                    <div class="modal-body">
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="center-block">
                                        <img src="<?= $product['images']; ?>" alt="<?= $product['title']; ?>" class="details img-responsive" />
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <h4>Details</h4>
                                    <p><?= $product['description']; ?></p>
                                    <hr />
                                    <p>Price: $39.99</p>
                                    <p>Brand: <?= $brand['brand']; ?></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>
                                        </div><br /> <br />
                                        <div class="form-group">
                                            <label for="size">Size: </label>
                                            <select name="size" id="size" class="form-control">
                                                <option value="Select">Select</option>
                                                <?php foreach ($size_array as $string) {
                                                    $string_array = explode(':', $string);
                                                    $size = $string_array[0];
                                                    $quantity = $string_array[1];
                                                    echo "<option value='.$size.'>'.$size.' ('.$quantity.' Available)</option>";
                                                } ?>

                                            </select>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-default" onclick="closeModal()">Close</button>
                        <button class="btn btn-warning" type="submit"><span class="glyphicon glyphicon-shopping-cart"></span> Add To Cart</button>
                    </div>
                </div>
            </div>
        </div>

        <script>
            function closeModal(){
                jQuery(#details-modal).modal('hide');
                setTimeout (function(){
                    jQuery(#details-modal).remove();
                    jQuery(.modal-backdrop).remove();
                },500)
            }
        </script>
<?php echo ob_get_clean(); ?>

and here's php function where it is defined in
footer.php:

<script>
    function detailsmodal (id) {
              var data {"id" : id};
              jQuery.ajax({
                url : '/Online Store/Includes/detailsmodal.php',
                method : "post",
                data : data,
                success : function(data){
                    jQuery('body').append(data);
                    jQuery('#detail-1').modal('toggle')
                },
                error : function(){
                    alert("Something went worng...");
                }

              });
            }


</script>

please hurry deadline is coming close.
Thank you in advance.

3
Contributors
10
Replies
43
Views
1 Year
Discussion Span
Last Post by hericles
Featured Replies
  • 1

    First thing to check is whether your javascript function is appearing on the page. Once the page is loaded in the browser, view the source and confirm the footer is loading correctly and that the detailsmodal function is part of the page source. Are you getting any other errors from … Read More

  • 1

    It is an error. `var data {"id": id};` isn't valid javascript. `var data = {"id": id};` Read More

  • 1

    Also, you are calling the `detailsmodal()` script before it is defined up in `index.php`. Read More

  • 1

    You need to quote the id in the jquery call `jQuery('#details-modal').modal('hide');` They are strings not variables. Read More

0

The detailsmodal function is supposed to open a modal when user clicks on details.
I forgot to add that

1

First thing to check is whether your javascript function is appearing on the page.
Once the page is loaded in the browser, view the source and confirm the footer is loading correctly and that the detailsmodal function is part of the page source.

Are you getting any other errors from the page in the console?

0

It is appearing perfectly in and console haves another error in function it says unexpected token at this line:

function detailsmodal (id) {
              var data {"id" : id};

which shouldn't be a error

Edited by sahilmohile15

0

its still not working nothing happen insted in console i get error on this lines

function closeModal(){
                jQuery(#details-modal).modal('hide');

            }

the error says Uncaught SyntaxError: Unexpected token ILLEGAL

1

Also, you are calling the detailsmodal() script before it is defined up in index.php.

Votes + Comments
Thanks how can i define it other that including footer.php i can't find a way to do it
0

Thanks it is no longer showing detailmodal is undefined but still not working and giving error for closeModal function.

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

Edited by sahilmohile15: forgot to mention code

1

You need to quote the id in the jquery call
jQuery('#details-modal').modal('hide');
They are strings not variables.

Votes + Comments
Thanks the code is solved and working fine.
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.