CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap-3bootstrap-modal
skibum-za
skibum-za

Reputation: 43

bootstrap modal detecting which button is pressed when the modal content is a link href

I'm having an issue with detecting which button is pressed in a modal window, when the modal content is from a link href. My real code is all php dynamically generated, but I've included a simple example below using html.

I know that when you use the modal with the href it replaces all the 'modal-content' and therefore I'm guessing that my buttons that are coming from the href are somehow not named what I think or something like that.

Sadly I'm pretty new at this and spent ages yesterday trying to figure this out and haven't managed to get it working. So any help is greatly appreciated.

button.html :-

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>
   <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
   <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
   <style type="text/css">    
   </style>
   <title>Modal Button test with it loading another page (so some php code)</title>
<script type='text/javascript'>
$(window).load(function(){
    $('#myModal .modal-footer button').on('click', function (e) {
       var $target = $(e.target);
        $(this).closest('.modal').on('hidden.bs.modal', function (e) {
           alert('The buttons id that closed the modal is: #' + $target[0].id);
        });
    });
});
</script>
</head>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content"> 
            <form class="form-horizontal" method="post" id="modal_form">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Modal title main</h4>
                </div>
                <div class="modal-body">
                    <p>Some text from the modal code in the main html<p>
                </div>
                <div class="modal-footer">
                    <button type="button" name="in_reserve1" id="confirm-cancel-button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" name="in_reserve2" id="confirm-save-button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
                </div>
            </form> 
        </div>
        </div>        
    </div>    
</div> 

<a type="button" href="modal.html" class="btn btn-info btn-lg" data-toggle="modal" data-id="reservedb" data-target="#myModal">Doesn't Work</a>
<!-- <a type="button" class="btn btn-info btn-lg" data-toggle="modal" data-id="reservedb" data-target="#myModal">Works</a> -->

The commented out button correct detects which button closes the modal.

However, when you run the one with the href it doesn't work.

modal.html is :-

<form class="form-horizontal" method="post" id="modal_form">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Modal title url</h4>
    </div>
    <div class="modal-body">
        <p>Some text from the modal code in the href url<p>
    </div>
    <div class="modal-footer">
        <button type="button" name="in_reserve1" id="confirm-cancel-button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" name="in_reserve2" id="confirm-save-button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
    </div>
</form>

So hopefully someone will point me in the right direction to get this sorted.

Thanks.

Upvotes: 4

Views: 2971

Answers (1)

Mosh Feu
Mosh Feu

Reputation: 29277

The buttons in the modal are completely yours (They are not generating in the script so you can do with them whatever you want).

So, for the cancel button, you can leave the data-dismiss="modal". To the save button you can call your code and when you done, call to hide method.

Example:

$('#confirm-save-button').on('click', function() {
  alert('Saved!!');
  $('#myModal').modal('hide');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" name="in_reserve2" id="confirm-save-button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Upvotes: 5

Related Questions