Custom Confirm Dialog Box yes no in Javascript and AJAX

custom confirm dialog box yes no in Javascript Ajax
AJAXLeave a Comment on Custom Confirm Dialog Box yes no in Javascript and AJAX

Custom Confirm Dialog Box yes no in Javascript and AJAX

Custom Confirm Dialog Box yes no in Javascript and AJAX

Ajax is very useful and fast web development techniques that much help a user to send and retrieve data from server.

Custom Confirm dialog box is very useful in javascript. That’s very useful. User may be delete a file or data by unconscious mind. So that user may delete a file or data before a alert prompt show if you want to delete or not. If not no action occur but if yes then delete or remove action occure.

Now Show the input.php file:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>AJAX Dinamically Allocated</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2 class="text-center">AJAX Dinamically Allocated</h2>
  <div id="first_portion">
  		<div class="form-group">
        	<label class="control-label col-md-3 col-sm-3 col-xs-12" for="first"> Portion</label>
        <div class="col-md-9 col-sm-9 col-xs-12">
          	<h5>1</h5>
        </div>
      </div>
  </div>
  <div id="dynamically_allocated" style="margin-bottom: 20px;">
  </div>
</div>

<button type='button' style="margin-left: 80px;" class="btn-xs btn-success" id='add_row' value='' style="margin-top: 3px;" onclick=''>Add Row</button>

<script type="text/javascript">
	
	var counter = 1;
    var name_counter = 1;

    function addCounter()
    {
      counter = counter + 1;
      name_counter = name_counter + 1;    }

    function removeCounter()
    {
      counter = counter - 1;
    }

    $(document).ready(function() 
    {

      //dynamically added selects
      $("#add_row").on("click", function() 
      {
          addCounter();

            var dynamically_created_dropzone = $('<div class="form-group" id="'+counter+'">'
                                                +'<label class="control-label col-md-3 col-sm-3 col-xs-12" for="first"> Portion</label>'
                                                +'<div class="col-md-8 col-sm-8 col-xs-12">'
                                                +'<h5>'+counter+'</h5>'
                                                +'</div>'
                                                +'<div class="col-md-1 col-sm-1 col-xs-2">'
                                                +' <button type="button" class="btn-xs btn-danger btn_remove" id="'+counter+'" onclick="rmv_row(this.id);">X</button>'
                                                +'</div>'
                                                +'</div>');

            $("#dynamically_allocated").append(dynamically_created_dropzone);
        });

    });

  function rmv_row(row_id)
  {
      if(confirm("Are you sure?"))
      {
          $("#"+row_id).remove();
          removeCounter();
          alert("Remove row: "+row_id);
      }
  }

</script>

</body>
</html>

That’s all for today. Happy Coding…

Source Code: Click Here

Leave a Reply

Your email address will not be published. Required fields are marked *

Back To Top