Wie man modales Formular öffnet, wenn Knopf mit ajax geklickt wird

Question

Das ist, was ich gerade auf "dir.php" habe. Was hier geschehen muss, ist, dass nach dem Klicken auf die Schaltfläche Hinzufügen das modale Formular angezeigt werden soll. Würdest du bitte meinen Code überprüfen und mir sagen, was die Lösung ist? Vielen Dank!

<a class="btn btn-primary btn-md btnAdd" role="button"><i class="fa fa-plus" aria-hidden="true"></i>Add</a> 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() 
      { 
       $(".btnAdd").click(function(){ 
        $.ajax({ 
         url: "modal.php", 
         success: function(returndata){ 
           $('#myModal').modal('show'); 
         }, 
         dataType: "html" 
        }); 
       }); 


      }); 
</script> 

und auf "modal.php" enthält das modale Formular

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button> 
       <h4 class="modal-title" id="myModalLabel">Add</h4> 
      </div> 

      <div class="modal-body"> 
       <div id="form1" action="" method="post"> 
        <div class="modal-body"> 
         <label class="control-label">Name</label> 
         <input type="text" class="form-control" name="name1" /> 
         <label class="control-label">Branch Address</label> 
         <input type="text" class="form-control" name="bAddress1" /> 
         <label class="control-label">Officer-in-Charge</label> 
         <input type="text" class="form-control" name="officer1" /> 
         <label class="control-label">Contact Number</label> 
         <input type="text" class="form-control" name="contactN1" /> 
        </div> 
        <div class="modal-footer"> 
         <input id="submit" type="submit" value="SUBMIT" class="btn" /> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

Versuchen setzen:

<div id="myModal" ...></div> 

in dir.php, dann versuchen Sie:

$('#myModal').html(returndata); 
$('#myModal').modal('show'); 

in die success: Methode.

Answer 2

bearbeiten dir.php Code:

<a class="btn btn-primary btn-md btnAdd" role="button"><i class="fa fa-plus" aria-hidden="true"></i>Add</a> 
    <style type="text/css"> 
     #myModal { 
      display: none; 
     } 
    </style> 
    <!-- add div for show data --> 
     <div id="myModal"> 

     </div> 
    <!-- end --> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() 
       { 
        $(".btnAdd").click(function(){ 
         $.ajax({ 
          url: "modal.php", 
          success: function(returndata){ 
            // $('#myModal').modal('show'); 

            $('#myModal').html(returndata); 
            $('#myModal').modal('show'); 
          }, 
          dataType: "html" 
         }); 
        }); 


       }); 
    </script>