How to make popup modal appear when clicking a link using ajax?

I have few links that when user click on the link, it will appear as popup modal. However, what I have done was there modal appear but without content. I am new to ajax so I quite not understand what should I do.
Below is my HTML:

<div class="modal fade" id="answerModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
  <div class="modal-header">
    <h4 class="modal-title">ANSWER</h4>
    <button type="button" class="close" data-dismiss="modal">&times;</button>
  </div>
<div class="modal-body">
</div>
  <div class="modal-footer">
   <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
</div>
</div>
</div>
<a data-toggle="modal" class="btn" href=#link1 data-target="#answerModal"> VIEW ANSWER → </a>
<a data-toggle="modal" class="btn" href=#link2 data-target="#answerModal"> VIEW ANSWER → </a>
<a data-toggle="modal" class="btn" href=#link3 data-target="#answerModal"> VIEW ANSWER → </a>

Below is my script:

$(document).ready(function(){
$('.btn').click(function(){
  var link = $(this).data('url');
  console.log(ok);
  // AJAX request
  $.ajax({
    url: link,
    type: 'get',
    data: link,
    success: function(response){ 
    // Add response in Modal body
      $('.modal-body').html(response);
    // Display Modal
    $('#answerModal').modal('show'); 
    }
  });
});});});

This is how my modal looks like.

2 thoughts on “How to make popup modal appear when clicking a link using ajax?”

  1. Here are some of the changes and checks that are needed to be done.

    1. remove data-toggle and data-target from your <a> tags, as they ends up opening the modal regardless of api call is successful or not. And in case of API failure there is not content to show in modal.

    2. add a console.log in your success function of api call just to confirm that the api call successful or not.

    3. Make sure that the var link = $(this).data("url"); is not undefined.

    I am also adding a working snippet just for your reference using placeholder api calls, replace them with your actual url you want to hit.

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8" />
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <title>Document</title>
            <link
                rel="stylesheet"
                href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
                integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
                crossorigin="anonymous"
            />
        </head>
        <body>
            <div class="modal fade" id="answerModal" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">ANSWER</h4>
                            <button
                                type="button"
                                class="close"
                                data-dismiss="modal"
                            >
                                &times;
                            </button>
                        </div>
                        <div class="modal-body"></div>
                        <div class="modal-footer">
                            <button
                                type="button"
                                class="btn btn-default"
                                data-dismiss="modal"
                            >
                                Close
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <a class="btn" href="javascript:void(0)" data-url="https://pokeapi.co/api/v2/language/5"> VIEW ANSWER → </a>
            <a class="btn" href="javascript:void(0)" data-url="https://pokeapi.co/api/v2/language/6"> VIEW ANSWER → </a>
            <a class="btn" href="javascript:void(0)" data-url="https://pokeapi.co/api/v2/language/7"> VIEW ANSWER → </a>
            <script
                src="https://code.jquery.com/jquery-3.5.1.js"
                integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
                crossorigin="anonymous"
            ></script>
            <script
                src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
                integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
                crossorigin="anonymous"
            ></script>
            <script>
                $(document).ready(function () {
                    $(".btn").click(function () {
                        var link = $(this).data("url");
                        console.log(link);
                        // AJAX request
                        $.ajax({
                            url: link,
                            type: "get",
                            data: link,
                            success: function (response) {
                                // Add response in Modal body
                                console.log(response)
                                console.log("api successful");
                                $(".modal-body").html(JSON.stringify(response));
                                // Display Modal
                                $("#answerModal").modal("show");
                            },
                        });
                    });
                });
            </script>
        </body>
    </html>
    Reply
  2. I had some changes to your code please check it below.
    Also added if API did not respond success or link is blank then error modal show.

    you added one extra closing bracket at end of your js "});".

    <!DOCTYPE html>
    <html lang="en">
    
      <head>
        <title>Demo</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
    
        <script src="https://code.jquery.com/jquery-3.5.1.js" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
      </head>
    
      <body>
        <div class="modal fade" id="answerModal" role="dialog">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h4 class="modal-title">ANSWER</h4>
                <button type="button" class="close" data-dismiss="modal"> &times; </button>
              </div>
              <div class="modal-body"></div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"> Close </button>
              </div>
            </div>
          </div>
        </div>
        <a class="btn" href="javascript:void(0)" data-url="https://jsonplaceholder.typicode.com/todos/1"> VIEW ANSWER → </a>
        <a class="btn" href="javascript:void(0)" data-url="https://jsonplaceholder.typicode.com/todos/2"> VIEW ANSWER → </a>
        <a class="btn" href="javascript:void(0)" data-url=""> VIEW ANSWER → </a>
        <a class="btn" href="javascript:void(0)" data-url="https://jsonplaceholder.typicode.com/abcd"> VIEW ANSWER → </a>
        <script>
          $(document).ready(function() {
            $(".btn").click(function() {
              var link = $(this).data("url");
              console.log(link);
              // AJAX request
              if (link == undefined || link == '') {
                $(".modal-body").html("<p>if link is not available then Your error message display here!!!</p>");
                $("#answerModal").modal("show");
              } else {
                $.ajax({
                  url: link,
                  type: "get",
                  data: link,
                  success: function(response) {
                    console.log(response)
                    console.log("api successful");
                    $(".modal-body").html(JSON.stringify(response));
                    $("#answerModal").modal("show");
                  },
                  error: function(response) {
                    $(".modal-body").html("<p>Please try after some time...</p>");
                    $("#answerModal").modal("show");
                  },
                });
              }
            });
          });
        </script>
      </body>
    
    </html>
    
    Reply

Leave a Comment