javascript - How to display modal on button click - Stack Overflow

admin管理员组

文章数量:1395248

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

Share Improve this question Follow edited Sep 10, 2018 at 14:44 Andrew Thompson 169k4141 gold badges222222 silver badges436436 bronze badges asked Sep 10, 2018 at 11:57 Poorna Senani GamagePoorna Senani Gamage 1,26822 gold badges2020 silver badges3232 bronze badges 6

• 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

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 2

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>

本文标签： javascriptHow to display modal on button clickStack Overflow