CODEWITHSUNDEEP
javascriptphpmysql
Ronaldo
Ronaldo

Reputation: 117

Modal alert window not opening nor displaying message

I'm working on an admin dashboard. The file in question is called client-edit.php that contains a form which gets updated in client-update.php. I can update all fields no problem, but I'm stuck at display a modal alert. Here's a snippet of my code:

client-edit.php

<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!--custom style-->
  <link rel="stylesheet" href="../bootstrap/4.4.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="../css/style2.css">

 <!-- required for tooltips -->
  <script src="../ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <link rel="stylesheet" href="../vendors/ti-icons/css/themify-icons.css">
  <link rel="stylesheet" href="../vendors/base/vendor.bundle.base.css">  
  
  
<!-- modal window editor   -->
<script src="../ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="modal.min.css" />  
<script src="../bootstrap/3.3.6/js/bootstrap.min.js"></script>  

</head>
<body>

<form name="clientupdate" id="form1" method="post">
<!-- FORM ELEMENTS IN HERE -->
<button class="btn btn-success" type="submit" >Save</button>
</form>



<!-- Alert Dialog -->
<div class="modal fade" id="myModal"  role="dialog">
<div class="modal-dialog">
    <div class="modal-content">
            <div class="modal-body">
                <div id="messages"></div>
            </div>
    </div>
</div>
</div>
<!-- End alert dialog box -->


</body>
</html>


        <script>
            $('#form1').submit(function(e) {

                var form = $(this);
                var formdata = false;
                if(window.FormData){
                    formdata = new FormData(form[0]);
                }

                var formAction = form.attr('action');

                $.ajax({
                    type        : 'POST',
                    url         : 'client-update.php',
                    cache       : false,
                    data        : formdata ? formdata : form.serialize(),
                    contentType : false,
                    processData : false,
                    dataType: 'json',

                    success: function(response) {
                        //TARGET THE MESSAGES DIV IN THE MODAL
                        if(response.type == 'success') {
                           $('#messages').addClass('alert alert-success').text(response.message);
                            $('#myModal').modal('toggle');
                        } else {
                            $('#messages').addClass('alert alert-danger').text(response.message);
                             $('#myModal').modal('toggle');
                        }

                    }
                });
                e.preventDefault();
            });
        </script>

client-update.php


// if successfully updated. 
$success = true;

if($success == true) {
   // $output = json_encode(array('type'=>'success', 'message' => 'Successfully Updated.'));
   $output = "successful";
} else {
    $output = json_encode(array('type'=>'error', 'message' => 'There was an error saving.'));
}

//die($output);
echo json_encode($output);

Not sure where the problem lies.

Upvotes: 0

Views: 165

Answers (1)

andres castellanos
andres castellanos

Reputation: 79

you are using this two jquery. You should use just one and try to use the last version.

<script src="../ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="../ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Upvotes: 1

Related Questions