0

I have been trying to implement the accepted answer to this question but have not been able to get the modal to display.

The buttons that should trigger the modal are coded like this:

<a class="btn btn-success btn-xs openModal" data-target="#myModal" data-id=1><span class="glyphicon glyphicon-edit"></span> Edit</a>

The script that should be triggered when the button is clicked is:

<script>
        alert("id=" + $(this).attr('data-id'));
        $('.openModal').click(function () {
            var id = $(this).attr('data-id');
            $.ajax({url: "testModal.php?id=" + id, cache: false, success: function (result) {
                    $(".modal-content").html(result);
                }});
        });
</script>

I added an alert() command so I can tell if the script is executed.

I do not see the alert dialog when I click on any of the buttons that should trigger it. I do see the alert dialog when the page is first loaded for some reason.

I have tried placing the script in the head section of the html file and also at the end of the body section but it is not executed in either case.

The html for the modal is

<div style="margin-top:5%;" class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content"></div>
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Edit Venue</h4>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>

Can someone please explain why the script is not being executed when a button is clicked?

Thanks, Pete

Community
  • 1
  • 1
Pete
  • 351
  • 1
  • 6
  • 16
  • where's is the HTML I don't see it – jonju Aug 02 '16 at 20:00
  • make sure you don't have multiple `div` with class name `.modal-content`. a little modification to the script: `$('#myModal .modal-content').html(result);` to be more specific – jonju Aug 02 '16 at 20:29
  • Now the only option is to look at your `testModal.php` code – jonju Aug 02 '16 at 21:27

2 Answers2

1

Add data-toggle attribute to anchor tag for showing modal

<a class="btn btn-success btn-xs openModal" data-toggle="modal" data-target="#myModal" 
   data-id=1><span class="glyphicon glyphicon-edit"></span> Edit</a>

Actually the script is getting executed but you are putting the alert at the wrong place. Try code below

<script>        
    $('.openModal').click(function () {
        alert("id=" + $(this).attr('data-id'));
        var id = $(this).attr('data-id');
        $.ajax({url: "testModal.php?id=" + id, cache: false, success: function (result) {
              $(".modal-content").html(result);
              $('#myModal').modal('show');// this is optional if adding data-toggle attribute does not work. try this. In your case, it's better to remove the data-toggle attribute and use this instead.
        }});
    });
</script>

PS: modal might not show if you encountered error in server side.

jonju
  • 2,711
  • 1
  • 13
  • 19
  • Thanks, I should have noticed that. Please see my comment on the post by TheNLGhost for more info. – Pete Aug 02 '16 at 19:04
  • try alert(result) in the script and see if you get the data – jonju Aug 02 '16 at 19:06
  • Yes it's working there is nothing wrong in the `$.ajax`. I've tested it my self and it's working. Apparently the problem is in your `testModal.php` – jonju Aug 02 '16 at 19:19
  • I added the alert(result) after the ajax call and the data is coming back from my php script correctly so the problem seems to be in the line $(".modal-content").html(result). I tried adding the line you suggested after that but still no modal (tried it with and without data-toggle="modal"). There's definitely a div with class modal-content in the html file. – Pete Aug 02 '16 at 19:52
  • is it `modal-content` or `.modal-body`?. Usually it's the later one. Add your entire modal html to your question. I think we are very close – jonju Aug 02 '16 at 19:54
  • Here's the html fro the modal: – Pete Aug 02 '16 at 19:56
  • Just added the html for the modal to my question. Originally, my php script was creating the modal-header, modal-body, and modal-footer divs but since the header and footer are always the same I added them to the html along with an empty modal-body div and changed my php script to return just a couple of lines of html. Also changed the script to set the html of the modal-body class instead of modal-content. Unfortunately, still no modal. – Pete Aug 02 '16 at 20:17
  • It's working perfectly fine here https://jsfiddle.net/un8tu600/ .NOTE: Generally we put `contents` of modal inside `.modal-body` and I suggest you to do the same(until unless you specifically want to do it). – jonju Aug 02 '16 at 20:24
  • I se the jsfiddle works but still not working here. I guess it must be something to do with other things in my html file. Sorry, didn't understand your comment about contents inside modal-body. – Pete Aug 02 '16 at 21:22
  • add this `$('#myModal .modal-content').html(result);` instead of `$('.modal-content').html(result);` – jonju Aug 02 '16 at 21:29
  • Tried that, still no good. The weird thing is I stripped everything out of my html page until it only included the code in your jsfiddle and it still doesn't work. Only things left that could be affecting it are the and – Pete Aug 02 '16 at 22:09
  • No, the modal doesn't show. Looking at your jsfiddle again, I don't think it works as expected. Something is displayed but it's not in the center of the screen as a normal Bootstrap modal would be and it's also a transparent grey color instead of the normal white background. Thanks for trying to solve my issue but it feels like there's a basic problem with bootstrap modals that is preventing this from working. I already have some js that pops up a modal window so I will use that instead. – Pete Aug 03 '16 at 16:12
  • But I tried it in my local and it works as expected. – jonju Aug 03 '16 at 16:17
  • Just discovered the problem. I opened the javascript console in Chrome and saw an error message that Bootstrap requires jQuery. My links to jQuery were after the Bootstrap links, when I switched them round, all works correctly. Thanks for the help, sorry I didn't notice that before. – Pete Aug 03 '16 at 16:48
  • Yeah jQuery plugin shall always load before loading other plugins that uses this. It's good to hear that your problem is finally solved. And BTW don't append data from php to `.modal-content` instead append in `.-modal-body` unless you need to do so – jonju Aug 03 '16 at 16:52
  • I you think I really help you solving your problem. Please accept my post – jonju Aug 03 '16 at 16:58
  • Yes, I'm appending to modal-body now. I accepted your answer. – Pete Aug 03 '16 at 17:03
0

You might want to consider using this:

$('.openModal').on('shown.bs.modal', function () {
    // Whatever you want to do here.
})

Be sure to check out the bootstrap docs.

Side note: I haven't tried the code myself.

  • Thanks, I tried your suggestion but the script is still only executed when the page loads, not when I click a button. I'm off to check the docs now. – Pete Aug 02 '16 at 18:47
  • it's for catching modal show event. if the modal does not show then I guess it won't fire – jonju Aug 02 '16 at 18:47
  • @Pete, just to make sure, you know that you should put your alert inside the function if you want to execute the alert on click? –  Aug 02 '16 at 18:50
  • @TheNLGhost. Thanks. I moved the alert and also moved the script to the end of the body section and now it is executing. However, I have an echo statement right at the start of the testModal.php file and I never see the output from it so for some reason my php script is not being called by AJAX. Th name is correct in the url and it is in the same directory as the html file that includes the script. Any ideas? – Pete Aug 02 '16 at 19:03
  • @Pete have you tried using alert() or console.log() to see the output? Ohh and since I get the idea you want to have some more flexibility with your Modal. I use this since a few weeks back and it works like a charm: https://nakupanda.github.io/bootstrap3-dialog/. –  Aug 02 '16 at 19:12
  • @TheNLGhost. I tried the alert(result) and it shows the correct data coming back from the php script so not sure what is going wrong after that. Thanks for the link on using bs modals, very useful. – Pete Aug 02 '16 at 19:55
  • @Pete you might want to try 'show.bs.modal' instead of 'shown.bs.modal' –  Aug 02 '16 at 19:58