Jquery和Ajax不工作

我在我的頁面有3個按鈕。他們是新的按鈕，刪除和編輯。如果我點擊新按鈕，會顯示一個add_new表單，如果我點擊更改edit_form就會出現。Jquery和Ajax不工作

我的問題是爲什麼new_form沒有出現後，我點擊提交在我的edit_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>

請幫助我..謝謝。

來源

2012-09-09 casper

你在你的這兩個AJAX頁面後，嘗試將它添加下面的腳本像getAddress.php和address.php 。我相信它會起作用。

你還有一件事情要寫完了list_address div。 ajax全部響應後list_address將div數據替換爲ajax響應數據。

$（「＃list_address」）。html（response）;

<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>

來源

2012-09-09 08:56:12

Jquery和Ajax不工作

回答

相關問題