'Bootstrap modal is not showing while clicking on update button using jquery

I am using jquery to update the data using bootstrap modal its not showing the modal i don't know why

This is my code for the modal

<div id="updateModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>    

            <div class="modal-body">
                    <div class="form-group">
                        <input type="text" class="form-control" id="name" name="name" placeholder="Enter name" />
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" id="email" name="email" placeholder="Enter email" />
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" id="mob" name="mob" placeholder="Enter Mobile" />
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" id="city" name="city" placeholder="Enter City" />
                    </div>

                <a href="#" id="save" class="btn btn-success pull-right">Update</a>
            </div>

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

This is the jquery code :

    $(document).ready(function(){
       $(document).on('click','a[data-role=update]',function(){
          var id = $(this).data(id);
           var name = $('#'+id).children('td[data-target=name]').text();
           var email = $('#'+id).children('td[data-target=email]').text();
           var mob = $('#'+id).children('td[data-target=mob]').text();
           var city = $('#'+id).children('td[data-target=city]').text();

           $('#name').val(name);
           $('#email').val(email);
           $('#mob').val(mob);
           $('#city').val(city);
           $('#updateModal').modal('toggle');
       });
    });

And this is the code for persons list to be updated : 

<div class="table">
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>Sr. No.</th>
                <th>Name</th>
                <th>Email</th>
                <th>Mobile</th>
                <th>City</th>
                <th>Action</th>
            </tr>
        </thead>

        <tbody>
            <?php while($row = mysqli_fetch_array($query)): $count++;?>
            <tr id="<?php echo $row['id'];?>">
                <td><?php echo $count;?></td>
                <td data-target="name"><?php echo $row['name'];?></td>
                <td data-target="email"><?php echo $row['email'];?></td>
                <td data-target="mob"><?php echo $row['mob'];?></td>
                <td data-target="city"><?php echo $row['city'];?></td>
                <td><a href="#" class="btn btn-success btn-sm" data-role="update" data-id="<?php echo $row['id'];?>">Update</a></td>
            </tr>
            <?php endwhile;?>
        </tbody>

    </table>
</div>

By writing upto this i expect that the modal should pop-up and displays the information in the input fields but while I'm clicking on the update button the modal doesn't pop-ups.

Any help should be appreciated.

jquerymodal-dialog


Solution 1:[1]

You have a mistake in your script.You just missed a quote

please replace the below line 

var id = $(this).data('id');

Solution 2:[2]

In jQuery code,

var id = $(this).attr('data-id');
console.log(id); // test the data-id in console

Solution 3:[3]

Replace your code with the bellow code.you missed out the followin attributes in your link for editing data-toggle="modal" data-target="#updateModal"

">Update

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Soubhagya Kumar Barik
Solution 2 Nilesh
Solution 3 SARULO FRED

Related Questions