CODEWITHSUNDEEP
javascriptphpbootstrap-modal
higashikata
higashikata

Reputation: 11

Open modal with javascritp

I'm trying to open a modal with javascript, if the ajax form is executed, can someone help me? i am using bootstrap library and jquery basically if the form is sent so that no error occurs then the modal should open just as the form is sent to the database

index.html

<html>
    <head>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="js/main.js"></script>
    </head>

    <body>
        <form method="post">
            <input type="text" id="nome" name="nome" placeholder="Digite o nome" />
            <br/>
            <input type="email" id="email" name="email" placeholder="Digite o email" />
            <br/>
            <input type="button" id="btn_gravar" value="Salvar" name="salvar" />
        </form>
        <div id="resposta"></div>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="js/main.js"></script>
           
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
            Launch demo modal
          </button>
          
          <!-- Modal -->
          <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                  ...
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                  <button type="button" class="btn btn-primary">Save changes</button>
                </div>
              </div>
            </div>
          </div>

        
    

    </body>
  

</html>

here is my javascript form for the request from both backend and front

main.js

$("#btn_gravar").on("click",function(){
    var txt_nome = $("#nome").val();
    var txt_email = $("#email").val();
   
    console.log(txt_email + " - " + txt_nome);

    $.ajax({
        url: "create.php",
        type: "post",
        data:{
            nome: txt_nome, email: txt_email
        },
        beforeSend : function(){
            $("#resposta").html("Enviando...");
          
        }
    }).done(function(e){
        $("#resposta").html("Dados registrado amigo com sucesso...");
        $("#exampleModal").modal("show");//<--this line that was to open the modal
       
        
    })
})

$("#btn_atualizar").on("click",function(){
    var txt_nome = $("#nome").val();
    var txt_email = $("#email").val();
    var txt_id = $("#id").val();
    
    console.log(txt_email + " - " + txt_nome);

    $.ajax({
        url: "update.php",
        type: "post",
        data:{
            nome: txt_nome, email: txt_email, id: txt_id
        },
        beforeSend : function(){
            $("#resposta").html("Enviando...");
        }
    }).done(function(e){
        $("#resposta").html("Dados atualizado com sucesso...");
        window.location="read.php";
    })
})

Upvotes: 0

Views: 159

Answers (3)

Md. Al Amin Hossain
Md. Al Amin Hossain

Reputation: 51

<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<script>
  jQuery(document).ready(function()
  {
   jQuery("#btn_gravar").on("click",function(){
    var txt_nome = jQuery("#nome").val();
    var txt_email = jQuery("#email").val();
    jQuery.ajax({
        url: "<?=base_url()?>/Test/insert_data/",
        type: "get",
        data:{
            nome: txt_nome, email: txt_email
        },
        beforeSend : function(){
            jQuery("#resposta").html("Enviando...");
        }
    }).done(function(e){
        jQuery("#resposta").html("Dados registrado amigo com sucesso...");
        jQuery("#exampleModal").modal("show");//<--this line that was to open the modal
       
        
      })
    })

    jQuery("#btn_atualizar").on("click",function(){
      var txt_nome = jQuery("#nome").val();
      var txt_email = jQuery("#email").val();
      var txt_id = jQuery("#id").val();
      
      console.log(txt_email + " - " + txt_nome);

      jQuery.ajax({
          url: "update.php",
          type: "post",
          data:{
              nome: txt_nome, email: txt_email, id: txt_id
          },
          beforeSend : function(){
              jQuery("#resposta").html("Enviando...");
          }
      }).done(function(e){
          jQuery("#resposta").html("Dados atualizado com sucesso...");
          window.location="read.php";
      })
    })
  });

  </script>
  <body>
    <form method="post">
      <input type="text" id="nome" name="nome" placeholder="Digite o nome" />
      <br/>
      <input type="email" id="email" name="email" placeholder="Digite o email" />
      <br/>
      <input type="button" id="btn_gravar" value="Salvar" name="salvar" />
    </form>
    <div id="resposta"></div>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
      Launch demo modal
    </button>

    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
  </body>

This work for me

Upvotes: 0

Daniel J&#39;eszenszky
Daniel J&#39;eszenszky

Reputation: 76

As Paul Mahardika wrote, move main.js and jquery before the closing body tag. You have to move the bootstrap javascript after jquery, because it uses it.

Like this:

<body>
...
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>        
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>        
    <script src="main.js"></script>
</body>

Or just move bootstrap after jquery in <head> and wrap your code in main.js in a document.ready function:

$(document).ready(function(){
    ...insert your current main.js code here
});

And you can remove main.js and jquery below <div id="resposta"></div>

Upvotes: 0

Paul Mahardika
Paul Mahardika

Reputation: 109

Please move

 <script src="js/main.js"></script>

and

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

in before </body> or you can move it to inside <head> tag

Upvotes: 1

Related Questions