Message Box Gizmo

[Jacob Fullerton]

For user feedback I'd like to implement the message box gizmo to display a modal message box with variable messages. I have my verification process taking place in the javascript code and would need to be able to enable the modal windows from my javascript code. Any ideas/suggestions on how this can be done? The other alternative is to create a library of modal windows on my html page with specific modal tags for each one that I call from the javascript, but I'm trying to not code more than is necessary for this task.

[swainn]

The message box gizmos use Twitter Bootstrap modals. Take a look at the docs for them here:

http://getbootstrap.com/javascript/#modals

They include descriptions of how to activate the models using JavaScript among other things.

[Jacob Fullerton]

Thanks for the tip to look at the examples you linked in your reply. I have since done that and found the following to be extremely efficient for displaying message boxes in the modal window:

Template

<!--Modal to be called-->

<div class="modal fade" id="ErrorModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">

  <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="exampleModalLabel">Error message</h4>

      </div>

      <div class="modal-body">

          <div id="textDiv">

            <p><span></span></p>

          </div>

      </div>

      <div class="modal-footer">

        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

      </div>

    </div>

  </div>

</div>

Javascript

            $('#ErrorModal').on('show.bs.modal', function (event) {

                $( "p" ).find("span").text("You don't have any features, please provide a boundary and well locations");

            })

            $('#ErrorModal').modal('show')

Result

I found that I had to use the .modal('show') to avoid the error of having the modal window show and then immediately disappear. It turns out that there is a duplicate reference in the tethysplatform libraries where the source code for bootstrap modal windows is called twice. It's called once in the base.html source (<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>), and another instance exists somewhere outside of my knowledge. This prevents the developer currently from simply enacting the bootstrap modal window via the normal interaction unless the above source script is commented out. I will post this comment as a bug that needs looked at as it's beyond me what a good solution is besides what I've mentioned.

[Jacob Fullerton]

The reference for this bug is found here: http://stackoverflow.com/questions/13648979/bootstrap-modal-immediately-disappearing