CODEWITHSUNDEEP
javascripthtmljquery
Codec737
Codec737

Reputation: 127

How to make an button to make a confirmation box to do a task in Jquery and HTML

In my HTML below button and <p>is used..

<button  class="btn btn-info" id ="btn">submit</button>
<p></p>

I have used Jquery to run my script whenever I click submit button as follows,

$(document).ready(function(){
        $("#btn").click(function(){
          $('#loading').show();
            $.ajax({
                type: 'POST',
                url: 'testme.php',
                success: function(data) {
                    //alert(data);
                    $("p").text(data);
                    $('#loading').hide();

                }
            });
   });
});

This works fine and I could see the loading screen until testme.php executes.

Now I need to make a confirmation box as below before executes...

enter image description here

Is some one clicks Yes I need to go ahead and run my testme.php if not I need to close the window box.

I have checked some examples in below site but could not find a method to combine it with my existing code. Can someone help me on this case?

https://www.jqueryscript.net/demo/Sliding-Confirm-Dialog-Plugin-with-jQuery-Bootstrap-Confirm/

Thanks in Advance!

Update:

Here is my complete code after Rory McCrossan's answer But seems there is an issue ...

<?php
// Initialize the session
session_start();
date_default_timezone_set("Asia/Colombo");//set you countary name from below timezone list
// Check if the user is logged in, if not then redirect him to login page
if(!isset($_SESSION["loggedin"]) || $_SESSION["loggedin"] !== true){
    header("location: login.php");
    exit;
}
?>

<!DOCTYPE html>
<html lang="en">
<head>

    <title>Anomaly Monitoring Dashboard-International Voice</title>


  <link rel="stylesheet" href="styles.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega@5"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm//[email protected]"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega-embed@6"></script>
    

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Sliding-Confirm-Dialog-Plugin-with-jQuery-Bootstrap-Confirm/jquery.confirm.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

  
</head>





<body style=" background-color: #F0F8FF">

<div class="wrapper">
  <div class="sidebar">
    <h2>Anomaly Dashboard</h2>
    <ul>
        
        
    </ul> 
    
</div>
    <div class="main_content">

     <div id="loading" >
         <img id="loading-image" src="./assets/loading.gif" alt="Loading..." />
     </div>
       <?php
            include "adminHeader.php";
        ?>
  


<div class="mytabs">
  <ul class="nav nav-tabs" role="tablist">
        <li class="active"><a href="#summarytab" role="tab" data-toggle="tab">Summary</a></li>
        <li><a href="#SSWtab" role="tab" data-toggle="tab">tab1</a></li>
        <li><a href="#SBCtab" role="tab" data-toggle="tab">tab2</a></li>
        <li><a href="#ctbtab" role="tab" data-toggle="tab">tab3</a></li>

  <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Web <b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a href="#jquerytab" role="tab" data-toggle="tab">jQuery</a></li>
                <li><a href="#bootstab" role="tab" data-toggle="tab">Bootstrap</a></li>
                <li><a href="#htmltab" role="tab" data-toggle="tab">HTML</a></li>
            </ul>
  </li>  
  
 </ul>
</div>



<div class="mytabs">
<div class="tab-content">
  <div class="tab-pane active" id="summarytab">Write something for home tab</div>
  <div class="tab-pane" id="SSWtab">
   

  
    <div class="card">
            <div class="card-body">
     
                <form method="POST">
                    <div class="mb-3">
          

            <button  type='button'  id ="btnnew">submit</button>
            <p></p>
            
                    </div>

                    
                </form>
            </div>

    
</div>
  </div>
  <div class="tab-pane" id="SBCtab">C# is also a programming language</div>
  <div class="tab-pane" id="ctbtab">MySQL is a databased mostly used for web applications.</div>

  <div class="tab-pane" id="jquerytab">jQuery content here </div>
  <div class="tab-pane" id="bootstab">Bootstrap Content here
  <ul>
  <li>Bootstrap forms</li>
  <li>Bootstrap buttons</li>
  <li>Bootstrap navbar</li>
  <li>Bootstrap footer</li>
  </ul>
  </div>
  <div class="tab-pane" id="htmltab">Hypertext Markup Language</div>  
  
</div>
</div>


 


  </div>







    </div>
</div>

</body>
</html>


<script>



  $(window).load(function() {
    $('#loading').hide();
  });


$("#btnnew").confirm({
  
  title: "Delete confirmation",
  text: "This is very dangerous, you shouldn't do it! Are you really really sure?",
  confirm: function(button) {        
    console.log('AJAX request in progress...');
    
    $('#loading').show();
    $.ajax({
      type: 'POST',
      url: 'testme.php',
      success: function(data) {
        $("p").text(data);
      },
      complete: function() {      
        $('#loading').hide();
      }
    });
    
  },
  cancel: function(button) {
    console.log("You aborted the operation.");
  },
  confirmButton: "Yes I am",
  cancelButton: "No"
});




  

    
</script>

Upvotes: 0

Views: 456

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

In the link in your question, it's the second example which is relevant to you. That will bind the event handler to the first button to display the confirmation dialog. From there you can place your $.ajax() logic within the confirm handler for it to be invoked when the user confirms the dialog.

Also note in the example below that I hide the loading spinner in the complete callback. This is to ensure that you don't freeze the UI in a permanent loading state if the AJAX request fails.

$("#btn").confirm({
  title: "Delete confirmation",
  text: "This is very dangerous, you shouldn't do it! Are you really really sure?",
  confirm: function(button) {        
    console.log('AJAX request in progress...');
    
    /* Commented for this demo only   
    $('#loading').show();
    $.ajax({
      type: 'POST',
      url: 'testme.php',
      success: function(data) {
        $("p").text(data);
      },
      complete: function() {      
        $('#loading').hide();
      }
    });
    */
  },
  cancel: function(button) {
    console.log("You aborted the operation.");
  },
  confirmButton: "Yes I am",
  cancelButton: "No"
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Sliding-Confirm-Dialog-Plugin-with-jQuery-Bootstrap-Confirm/jquery.confirm.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<button class="btn btn-info" id="btn">submit</button>
<p></p>

Upvotes: 1

Related Questions