CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
osieman
osieman

Reputation: 62

Calling a bootstrap modal form with action buttons

I have a modal form with a button to open a new window in the browser using passed parameters

Here is the call to the modal form

<div class='ts-1-8' onClick='showMsg($row1_desc, $row1_ref)'</div>

Here is the modal form

<div class='modal fade' id='MyModal' tabindex='-1' role='dialog' aria-labelledby='exampleModalLabel' aria-hidden='true'>
  <div class='modal-dialog modal-lg' role='document'>
    <div class='modal-content'>
      <div class='modal-body'>
        <form>
          <div class='form-group'>
            <label for='modal_message' class='col-form-label'>Order:</label>
            <button type='button' class='btn btn-secondary btn-xs' data-dismiss='modal'>OK</button>
            <button type='button' id='meal' class='meal btn btn-secondary btn-xs' data-dismiss='modal'>Meal Data</button>
            <textarea class='form-control' rows='19' cols='30' id='modal_message'></textarea>
          </div>
        </form>
      </div>
    </div>
  </div>

Here is the JavaScript

function showMsg(modal_message, ref)
{
    var win = "";
    var meal = "../command/command?ref="+ref;
    $('#MyModal .meal').click(function() {
        win = window.open(meal, '_blank');
        win.focus();
    });


    
    if (typeof modal_message !== 'undefined'){
        var message = "";
        $("#modal_message").html(modal_message);
        $('#MyModal').modal('handleUpdate');
        $('#MyModal').modal('show');
    }
}

The modal form pops up with the correct information. I can open a new window when I click on the meal button and it passes the correct parameter in variable=ref.

The problem is if I do it again with different data in ref, then the new data is not used... It still remembers the old data.

btw: function showMsg is called by the onclick and then it fires again via the button(meal) in the modal form.

I tried to use jQuery to replace the first onclick but couldn't get it to work $(".ts-1-8").on('click', function(event){

Upvotes: 1

Views: 886

Answers (2)

osieman
osieman

Reputation: 62

I managed to solve this using a hidden textarea in the modal form <textarea class='form-control' rows='1' cols='30' id='modal_hid'></textarea> and to reference it in the JavaScript document.getElementById("modal_hid").value = ref;

Upvotes: 0

Clyde The Cloud
Clyde The Cloud

Reputation: 46

If I understand you correctly, you need to clear everything you've sent to a modal window before you pass in new data. The way you do it depends on what type of elements you need to clear. Usually you just need to write another function that executes each time you close modal window, reseting it to a starting state.

Upvotes: 1

Related Questions