CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
Felipe Moreira
Felipe Moreira

Reputation: 81

Modal IF in Ajax

I am doing a domain registration and I have two modals. On my Ajax, I made sure that if it returned 1, it would display an alert saying that the domain is available. If it returns 0, it would display an alert saying that the domain is unavailable. However, I want to replace this alert with a Bootstrap modal. The problem is that when the domain is unavailable, it returns the modal of the available domain.

JS: 

$(document).ready(function() {
  $("#salvar-form").click(function() {
    const www = $('.www-ajax').val();
    const dominio = $('.dominio-ajax').val();
    const com = $('#com').val();
    $.ajax({
        method: "POST",
        url: "validardominio.php",
        data: {
          protocol: www,
          dominio: dominio,
          com: com
        },
        beforeSend: function() {
          alert("ENVIANDO...");
        }
      })
      .done(function(dominio) {
        if (dominio == 1) {
          alert('Disponível.');
          $('div').removeClass("hide");
        } else if (dominio == 0) {
          alert('Indisponível');
          $('div').removeClass("hide");
        }
      })
      .fail(function() {
        alert("Não foi possível enviar, tente novamente!");
      });
  });
});

HTML:

    <head>
          <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>

    <form action="validardominio.php" method="POST" id="ajax-form" class="form-inline">
      <button type="button" id="salvar-form" class="btn btn-dominio btn-outline-danger" name="enviar" value="Enviar" data-toggle="modal" data-target="#ExemploModalCentralizado"></button>
      <div class="modal fade hide" id="ExemploModalCentralizado" tabindex="-1" role="dialog" aria-labelledby="TituloModalCentralizado" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
          <div class="modal-content">
            <div class="modal-body">
              Available Domain!
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
            </div>
          </div>
        </div>
      </div>
      <div class="modal fade hide" id="ExemploModalCentralizado" tabindex="-1" role="dialog" aria-labelledby="TituloModalCentralizado" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
          <div class="modal-content">
            <div class="modal-body">
              Unavailable domain!
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
            </div>
          </div>
        </div>
      </div>
    </form>

PHP: 

<?
if (!empty($_POST)) {

    $dominio = $_POST['dominio'] . $_POST['com'];

    function dominio_disponivel($dominio)
    {
        if (checkdnsrr($dominio, 'ANY') && gethostbyname($dominio) != $dominio)
            return false;
        else
            return true;
    }

    if (dominio_disponivel($dominio))
        echo 1;

    else
        echo 0;
}
?>

Upvotes: 0

Views: 211

Answers (1)

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

You are just removing hide class from div and not from specific modal hence it show first modal alway which is for available case. Also, you have same id for both the modal so using id will also not work for you.

Change the modal div ids to unique ids (like available and unavailable) and use those ids to show modal. As you are using bootstrap modal then use its method to show and hide modal like .modal('show') and .modal('hide').

See below code

JS:

 $(document).ready(function() {
      $("#salvar-form").click(function() {
        const www = $('.www-ajax').val();
        const dominio = $('.dominio-ajax').val();
        const com = $('#com').val();

        //hide both modals first
        $('#availableModal').modal("hide");
        $('#unavailableModal').modal("hide");

        $.ajax({
            method: "POST",
            url: "validardominio.php",
            data: {
              protocol: www,
              dominio: dominio,
              com: com
            },
            beforeSend: function() {
              alert("ENVIANDO...");
            }
          })
          .done(function(dominio) {
            if (dominio == 1) {
              alert('Disponível.');
              $('#availableModal').modal("show");
            } else if (dominio == 0) {
              alert('Indisponível');
              $('#unavailableModal').modal("show");
            }
          })
          .fail(function() {
            alert("Não foi possível enviar, tente novamente!");
          });
      });
    });

HTML:

 <head>
          <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>

    <form action="validardominio.php" method="POST" id="ajax-form" class="form-inline">
      <button type="button" id="salvar-form" class="btn btn-dominio btn-outline-danger" name="enviar" value="Enviar" data-toggle="modal" data-target="#ExemploModalCentralizado"></button>
      <div class="modal fade hide" id="availableModal" tabindex="-1" role="dialog" aria-labelledby="TituloModalCentralizado" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
          <div class="modal-content">
            <div class="modal-body">
              Available Domain!
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
            </div>
          </div>
        </div>
      </div>
      <div class="modal fade hide" id="unavailableModal" tabindex="-1" role="dialog" aria-labelledby="TituloModalCentralizado" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
          <div class="modal-content">
            <div class="modal-body">
              Unavailable domain!
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
            </div>
          </div>
        </div>
      </div>
    </form>

Upvotes: 1

Related Questions