problem when calling modal

Question

problem when calling modal

Navigation

#1 by (1 votes)

1

I'm starting to learn about modal, so I looked for some examples and found one that helped me in what I need, but with some error I can not identify. The code is this:

<a href="delete.php?id=<?php echo $id; ?>" class="btn btn-sm btn-danger" data-toggle="modal" data-target="#myModal" data-customer="<?php echo $id; ?>"><i class="fa fa-trash"></i> Excluir</a>

But instead of opening modal.php it opens index.php.

If I do one of these two ways it opens the modal, but it does not get the id.

<a href="#myModal" class="btn btn-sm btn-danger" data-toggle="modal" data-target="#myModal" data-customer="<?php echo $id; ?>"><i class="fa fa-trash"></i> Excluir </a>

or

<a class="btn btn-sm btn-danger" data-toggle="modal" data-target="#myModal" data-customer="<?php echo $id; ?>"><i class="fa fa-trash"></i> Excluir </a>

** obs .:

Where I found this example many have managed to run the code.
The $ id variable takes a selected id from the database (without the modal is working perfectly).
The delete.php function is working perfectly without the modal. **

php html modal

asked by anonymous 11.01.2018 / 23:31

1 answer

Validating a field in a REGEX form Stop a function already started in JQuery

score 1 · Accepted Answer

Use the jQuery .data () API to retrieve the id

<a href="#myModal" ... data-customer="<?php echo $id; ?>"> ...

valorId = $(this).data('customer');

Example - complete code

Library

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Script

<script language="javascript">
$(document).on("click", ".btn-danger", function () {
     valorId = $(this).data('customer');
     $(".modal-footer").html( '<a href="delete.php?id='+valorId+'" class="btn btn-success waves-effect waves-light"> Excluir </a> <button type="button" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon glyphicon-ok-sign"></span> Cancelar</button>' );
     $('#myModal').modal('show');          
});
</script>

HTML

<a href="#myModal" class="btn btn-sm btn-danger" data-toggle="modal" data-target="#myModal" data-customer="<?php echo $id; ?>"><i class="fa fa-trash"></i> Abrir Modal </a>

<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Excluir id</h4>
            </div>
            <div class="modal-body">
             ............
             ............
            </div>
            <div class="modal-footer">

            </div>
        </div>
    </div>
</div>