link a bootstrap modal with javascript

Question

My background is in Java and object orientated programming and I'm just starting out in bootstrap. I want to load a modal into another page using javascript and then show it on a button click but I'm not sure of the process. Is this even the correct way to go about this or is html/javascript more procedural?

I want to load the modal in createOrder.html into navbar.html and I have the following. Obviously this doesn't work as I only get a darkened screen when I click the button so what is the correct way to do this?

navbar.html

...
<script> 
$(function() {
$("#createOrder").load("createOrder.html"); 
}); 
</script> 

<button type="button" id="createOrderButton" class="btn btn-default navbar-btn" data-toggle="modal" data-target="#createOrder">Create</button>
...

createOrder.html

<!-- Modal -->
<div class="modal fade" id="createOrder" tabindex="-1" role="dialog" aria-labelledby="createOrderLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Create Order</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary">Create</button>
      </div>
    </div>
  </div>
</div>

As a side note I understand bootstrap allows you to do $('#myModal').modal(show) but how would I call that modal if the code for it resides on a different page? and if I want to stick to an MVC architecture wouldn't it make more sense to call it via data attributes?

rg246 · Accepted Answer · 2016-01-18 22:36:02Z

2

It looks like you have 2 div tags with the same ID.

You are loading a div#createOrder inserting it to div#createOrder in your navbar.html

The modal data-target is pointing at #createOrder but the javascript is not functioning correctly because of the 2 ID's and is not unhiding the modal content.

The below should fix it.

navbar.html

<div id="createOrderHolder"></div>
<button type="button" id="createOrderButton" class="btn btn-default navbar-btn" data-toggle="modal" data-target="#createOrder">Create</button>
<script> 
$(function() {
     $("#createOrderHolder").load("createOrder.html"); 
}); 
</script>

answered Jan 18, 2016 at 22:36

rg246

564 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

john Over a year ago

That works, sorta. The modal will pop up but the whole page will be grey out including the modal. I think because the div is showing the modal as well as the button? is there a way to load the createOrder.html into the DOM and then just allow the button to call it without needing a placeholder div?

rg246 Over a year ago

The placeholder div is only there to hold the loading of the external resource, you can attach it to body if you like. The modal however should be clear and not covered over in grey, if that is happening it could be a separate issue?

rg246 Over a year ago

Also remove the fade class from the createOrder Div

badboy · Accepted Answer · 2016-01-20 10:29:48Z

0

John, I believe you would love this modal plugin as you said you are a java programmer:

http://nakupanda.github.io/bootstrap3-dialog/

By introducing this modal plugin into your project, your 'createOrder.html' should look like:

BootstrapDialog.show({....});

Html markups for creating modals are no longer needed.

answered Jan 20, 2016 at 10:29

badboy

1062 bronze badges

1 Comment

john Over a year ago

Thanks for this, I'll take a look at it.

Collectives™ on Stack Overflow

link a bootstrap modal with javascript

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related