Code says detailsmodal function is undefined

[sahilmohile15]

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.

[sahilmohile15]

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

[hericles]

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?

[sahilmohile15]

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

[hericles]

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

[sahilmohile15]

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

[rubberman]

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

[rubberman]

Have the script defined in it's own page, and include that just once in anything that needs to use it.

[sahilmohile15]

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)
            }

[sahilmohile15]

please help me deadline is coming close.

[hericles]

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