Reputation: 1268

How to display modal on button click

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();
}

Upvotes: 1

Answers (3)

saAction

Reputation: 2065

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.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/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:

Upvotes: 2

Shiv Kumar Baghel

Reputation: 2480

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.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/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>

Upvotes: 2

Avijit Barua

Reputation: 3086

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>

Upvotes: 1

How to display modal on button click

Answers (3)

Related Questions