Jquery와 Ajax가 작동하지 않습니다.

Question

내 페이지에 3 개의 버튼이 있습니다. 새 단추, 삭제 및 편집입니다. 새 버튼을 클릭하면 add_new 폼이 표시되고 클릭하여 변경하면 edit_form이 나타납니다.

내 edit_form에서 제출을 클릭하거나 삭제 버튼을 클릭하여 데이터를 삭제 한 후에 new_form이 표시되지 않는 이유는 내 질문에 대한 것입니다.

내 코드는이

 <div id="list_address"> 
     <table> 
      <tr valign="top"> 
       <th>Name</th> 
       <th>Address</th> 
       <th>Action</th> 
      </tr> 
      <tr valign="top"> 
        <td>Name 1</td> 
        <td>Adress 1</td> 
        <td> 
         <span><a href="#" onclick="javascript:show_editform(<?php echo $id_address;?>);"> 
         Edit|</a></span><span><a href="#" 
         onclick="javascript:deleteAddress(<?php echo $id_address;?>);">Delete</a></span> 
        </td> 
      </tr> 
      <tr> 
       <td colspan="3"><span> 
        <button id="btn_add">Add New</button></span> 
       </td> 
      </tr> 
     </table> 
     <div> 

     <div id="boxform"> 
      <div id="edit" style="display:none"> 
        <form id="fm_edit" class="fm_address"> 
         <input type="hidden" value="1" name="submitted" id="submitted"/> 
         <input type="hidden" id="id_address" name="id_address"/> 
         <fieldset> 
          <h3>Edit</h3> 
          <p> 
           <label>Address</label> 
           <input type="text" name="address1" id="address1" > 
           <sup>*</sup> 
          </p> 
          <p> 
           <label>Address (2)</label> 
           <input type="text" name="address2" id="address2" > 
          </p> 
          <p><input type="submit" value="Save"/></p> 
         </fieldset> 
        </form> 
       </div> 
      </div> 
      <div id="add" style="display:none"> 
        <form id="fm_add" class="fm_address"> 
         <input type="hidden" value="2" name="submitted" id="submitted"/> 
         <fieldset> 
          <h3>Edit</h3> 
          <p> 
           <label>Address</label> 
           <input type="text" name="address1" id="address1" > 
           <sup>*</sup> 
          </p> 
          <p> 
           <label>Address (2)</label> 
           <input type="text" name="address2" id="address2" > 
           <sup>*</sup> 
          </p> 
          <p><input type="submit" value="Save"/></p> 
         </fieldset> 

        </form> 
       </div> 
      </div> 
     </div> 

     <script> 
     function getAddress(){ 
      $.ajax({ 
       type: "POST", 
       url: "getAddress.php", 
       success: function(response){ 
       $("#list_address").html(response);    
       } 
      }); 
     } 

     function clear_form() { 
      $(".fm_address").find(':input').each(function() { 
       switch(this.type) { 
        case 'password': 
        case 'select-multiple': 
        case 'select-one': 
        case 'text': 
        case 'textarea': 
        $(this).val(''); 
        break; 
        case 'checkbox': 
        case 'radio': 
         this.checked = false; 
        } 
      }); 
     } 

     function show_editform(id){ 
      $("#add").hide(); 
      $("#edit").show(); 
      $("#id_address").val(id); 
     } 

     function show_insertform(){ 
      $("#edit").hide(); 
      $("#add").show(); 
     } 

     $(document).ready(function() { 
      $("#btn_add").bind('click',function(){ 
       clear_form(); 
       show_insertform(); 
      }); 

     $("form#fm_edit").submit(function() { 
      var data = $("form#fm_edit").serialize(); 
       $.ajax({ 
        type: "POST", 
        url: "address.php", 
        data: data, 
        success: function(response){ 
         alert(response); 
         getAddress(); 
        } 
       }); 
     return false; 
     }); 

     $("form#fm_add").submit(function() {  
      var data = $("form#fm_add").serialize(); 
      alert(data); 
      $.ajax({ 
       type: "POST", 
       url: "address.php", 
       data: data, 
       success: function(response){ 
        alert(response); 
        getAddress(); 
       } 
      }); 
     return false; 
     }); 
    }); 

    </script> 

제발 도와주세요 .. 감사 같다.

Answer 1

당신은 그것을 시도 후 getAddress.php 및 address.php 처럼 모두 아약스 페이지에서 스크립트 아래에 추가합니다. 나는 그것이 효과가있을 것이라고 확신한다.

당신이 쓰는 것 이상의 또 다른 것 list_address div. 아약스 응답 후 모두 list_address div 데이터가 아약스 응답 데이터로 바뀝니다.

$ ("# list_address") .html (응답);

<script> 
     function getAddress(){ 
      $.ajax({ 
       type: "POST", 
       url: "getAddress.php", 
       success: function(response){ 
       $("#list_address").html(response);    
       } 
      }); 
     } 

     function clear_form() { 
      $(".fm_address").find(':input').each(function() { 
       switch(this.type) { 
        case 'password': 
        case 'select-multiple': 
        case 'select-one': 
        case 'text': 
        case 'textarea': 
        $(this).val(''); 
        break; 
        case 'checkbox': 
        case 'radio': 
         this.checked = false; 
        } 
      }); 
     } 

     function show_editform(id){ 
      $("#add").hide(); 
      $("#edit").show(); 
      $("#id_address").val(id); 
     } 

     function show_insertform(){ 
      $("#edit").hide(); 
      $("#add").show(); 
     } 

     $(document).ready(function() { 
      $("#btn_add").bind('click',function(){ 
       clear_form(); 
       show_insertform(); 
      }); 

     $("form#fm_edit").submit(function() { 
      var data = $("form#fm_edit").serialize(); 
       $.ajax({ 
        type: "POST", 
        url: "address.php", 
        data: data, 
        success: function(response){ 
         alert(response); 
         getAddress(); 
        } 
       }); 
     return false; 
     }); 

     $("form#fm_add").submit(function() {  
      var data = $("form#fm_add").serialize(); 
      alert(data); 
      $.ajax({ 
       type: "POST", 
       url: "address.php", 
       data: data, 
       success: function(response){ 
        alert(response); 
        getAddress(); 
       } 
      }); 
     return false; 
     }); 
    }); 

    </script>