I need to open a modal using button's onclick, but it is not succeeding. Are there any errors in my code?

Add to Bag button

<button class="btn btn-default" id="addtobag" onclick="addTobag();">Add to Bag</button><br>

Modal

<div class="modal fade" id="addtobagmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                //mycode
            </div>
            <div class="modal-body">
                //mycode
            </div>
            <div class="modal-footer">
                //mycode
            </div>
        </div>
    </div>
</div>

Function

function addTobag() {
    var request = new XMLHttpRequest();
    request.onreadystatechange = function () {
        if (request.readyState === 4 && request.status === 200) {
            if (request.responseText == "OK") {
                $('#addtobagmodal').modal('show');
            } else {
                alert('error');
            }
        }
    };
    request.open("GET", "myBag", true);
    request.send();
}

I need to open a modal using button's onclick, but it is not succeeding. Are there any errors in my code?

Add to Bag button

<button class="btn btn-default" id="addtobag" onclick="addTobag();">Add to Bag</button><br>

Modal

<div class="modal fade" id="addtobagmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                //mycode
            </div>
            <div class="modal-body">
                //mycode
            </div>
            <div class="modal-footer">
                //mycode
            </div>
        </div>
    </div>
</div>

Function

function addTobag() {
    var request = new XMLHttpRequest();
    request.onreadystatechange = function () {
        if (request.readyState === 4 && request.status === 200) {
            if (request.responseText == "OK") {
                $('#addtobagmodal').modal('show');
            } else {
                alert('error');
            }
        }
    };
    request.open("GET", "myBag", true);
    request.send();
}

• javascript
• ajax
• jsp
• bootstrap-modal

• request.responseText = "OK" I assume you intend == – gaetanoM Commented Sep 10, 2018 at 12:03
• does it work if $('#addtobagmodal').modal('show'); is put without XMLHttpRequest ? – benjamin c Commented Sep 10, 2018 at 12:04
• 1 @gaetanoM thanx sir, my mistake. I edited it – Poorna Senani Gamage Commented Sep 10, 2018 at 12:06
• @benjaminc still I get just error alert. – Poorna Senani Gamage Commented Sep 10, 2018 at 12:10
• @PoornaSenaniGamage check ajax response, is it 200 ? – benjamin c Commented Sep 10, 2018 at 12:16

3 Answers 3

The problem is with "myBag" and its content.

Here is mode details :

There are two condition you are checking

First

if (request.readyState === 4 && request.status === 200)

and second

if (request.responseText == "OK")

It means Model will only display when both condition are correct.

Create a text file myBag.txt apply OK (only OK in that file)

Now use below code :

function addTobag() {
    var request = new XMLHttpRequest();
    request.onreadystatechange = function () {
        if (request.readyState === 4 && request.status === 200) {
            if (request.responseText == "OK") {
                $('#addtobagmodal').modal('show');
            } else {
                alert('error');
            }
        }
        else{
            alert('myBag file not found,  request.readyState = ' + request.readyState);
        }

    };
    request.open("GET", "myBag.txt", true);
    request.send();
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="modal fade" id="addtobagmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                //mycode
            </div>
            <div class="modal-body">
                //mycode
            </div>
            <div class="modal-footer">
                //mycode
            </div>
        </div>
    </div>
</div>

<button class="btn btn-default" id="addtobag" onclick="addTobag();">Add to Bag</button><br>

Here make sure that "myBag.txt" is on the same path on the HTML file.

Note file will be:

try below code. just added js and css libs for testing. see what you have missed in your code. for test click on test button to open the same popup.

  function addTobag() {
    var request = new XMLHttpRequest();
    request.onreadystatechange = function() {
      if (request.readyState === 4 && request.status === 200) {
        if (request.responseText = "OK") {
          $('#addtobagmodal').modal('show');
        } else {
          alert('error');
        }
      }
    };
    request.open("GET", "myBag", true);
    request.send();
  }

  function test() {
    $('#addtobagmodal').modal('show');
  }

<html>

  <head>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare./ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
    <script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare./ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
  </head>
  <body>
    <button class="btn btn-default" id="addtobag" onclick="addTobag();">Add to Bag</button><br>
    <button class="btn btn-default" id="addtobag" onclick="test();">Test modal only</button><br>

  <div class="modal fade" id="addtobagmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          //mycode
        </div>
        <div class="modal-body">
          //mycode
        </div>
        <div class="modal-footer">
          //mycode
        </div>
      </div>
    </div>
  </div>

</body>
</html>

You can try writing button code like

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" onclick="addTobag();>Add to Bag </button>

and using modal like

   <div class="modal fade" id="myModal" role="dialog">
                        <div class="modal-dialog">
<div class="modal-content">
            <div class="modal-header">
                //mycode
            </div>
            <div class="modal-body">
                //mycode
            </div>
            <div class="modal-footer">
                //mycode
            </div>
        </div>
    </div>
</div>