Javascript Variable to Bootstrap Modal

Question

Got what is probably a simple one, but my google is failing me at the moment so hoping i can get a bit of a push in the right direction

I have a HTML page that is basically a bunch of checkboxes. These checkboxes are for simple self evaluation yes/no questionnaire that are weighted with different values based on the questions.

At the end of the questionnaire, you hit calculate results and it used a quick Javascript function to calculate the score and an Alert Popup give you the score

I recently migrated the page to Bootstrap 3 and cleaned it up a bit but want to use a Modal to popup instead of the old style Javascript alert

Is there a simple way of passing the javascript calculated variable from the main page to a Bootstrap Modal

Thanks

EDIT

Right - Worked it out, was calling the JQUERY code

$('#myResults').html(counter);

From within my Model - moved the snippet into the main javascript function and it works. Knew it was going to be a simple one.. Might be time to stop working i think

Thanks

Answer 1

Yes . You can pass variable to bootstrap modal.

Script file

     <script>
 function testFun(variable){

document.getElementById('testH1').innerHTML=variable;
}
</script>

HTML

<button class="btn btn-primary btn-lg" onclick="testFun('testId')" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <h1 id="testH1"></h1>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Answer 2

Take a look at the documentation . I believe what you are going to want to do is add a data-toggle="modal" attribute to your calculate button and then make it so when it calls your calculate function, it changes the content in the modal via Javascript.

The modal is just normal HTML and you can assign ids to whatever you want. From there you can edit it with innerHTML

<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Calculate</a>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <h3 id="myModalLabel"></h3>
  </div>
</div>

Javascript

function calculate() {
    //do some calculation and store it in a variable
    var a = b + c; 
    document.getElementById("myModalLabel").innerHTML = "The final calculation is" + a;
}

Hope I understood your question.

Answer 3

Bootstrap modal doesn't support this functionality. But you could write your own?

function showModal(score){
  $('#myModal .score').html(score);
  $('#myModal').modal('show')
}

so clicking the calculate results what look something like this.

$('#buttonCalcResults').click(function(){
  var score = foo+bar+whatever
  showModal(score);
})

Answer 4

As Jahnux73 already said (or meant) that the modal will be in the same page, where you want it to appear. So in the function where you are calling an alert box you just have to call that modal.

 $('#yourModalId').modal('toggle');

(or you can also use 'show' instead of toggle) And for the calculated values...you just need to add these values to the html of modal. So just get the element.

output = document.getElementById('yourOutputTagId');

and then you can set the properties of that output object; either you want innerHTML or value attribute (according to your design.)

After setting all the required value you call your modal by the function mentioned above.