Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I am calling a bootstrap modal via a jquery inside of a function for an error message as follows: 

$('#validateButton').click(function() {

    var registrationLocation = $('#url').val();

    if (registrationLocation.indexOf("http") ==0) {
        // TODO - hardcoded DataFlow - this MUST be fixed!
        var hc06DfUrn = "urn:sdmx:org.sdmx.infomodel.datastructure.Dataflow=ESTAT:HC06(1.0)";
        $.getJSON("/" + webappName + "/ws/rest/registerservice?url=" + registrationLocation + "&dataflowurn="+hc06DfUrn, registerFileSuccess).error(displayErrorDialog);
    } else {
        $.getJSON("/" + webappName + "/ws/rest/registerfile?url=" + registrationLocation, registerFileSuccess).error(displayErrorDialog);
    }
    $('#errorDialog').modal('show')
});

Heres my html for the modal: 

<div id="errorDialog" class="modal hide fade">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">Modal header</h3>
        </div>
            <div class="modal-body">
            <p>One fine body…</p>
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            <button class="btn btn-primary">Save changes</button>
        </div>
  </div>

I am seeing the fade effect but no modal is appearing when i inspect the html on the page the modal seems to empty: 

<div class="modal-backdrop fade in">
    <div></div>
</div>

Any ideas?

share|improve this question
I don't see anything wrong with your markup or the call to the modal. If you open dev tools and check the Console are you getting any javascript errors when you click the button? – DMase05 Apr 18 at 17:02

1 Answer

up vote 0 down vote accepted

You need to create a DIV for the modal body to be placed (container):

<div class="modal-backdrop fade in" id="myModal">
    <div id="myModalContainer"></div>
</div>

Then on button click pass the modal body into the container DIV:

$('#validateButton').click(function () {
    var url = "/SomeModal/Url";
    $.get(url, function (data) {
        $('#myModalContainer').html(data);
        $('#myModal').modal('show');
    });
});
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.