不工作阿賈克斯阿賈克斯後，從裏面的div

Question

我是一個客戶管理系統和IM目前停留在一個問題我一直在試圖找出了一個星期的工作得到，現在已江郎才盡

我有index.php基本上它是一個簡單的形式，你提交一個客戶的名字和姓氏然後阿賈克斯發送請求functions2.php添加到數據庫，然後報告成功與否，然後webapp_get_customers檢索並更新與新客戶的表到webapp_get_customers DIV而無需刷新頁面，這是在get.php頁面上可以正常使用

然而

我有一個從表中選擇結果的表，然後在下面添加到b相同的形式e能夠編輯客戶名稱時，我在索引頁上編輯其打開窗體中正確的模式，但不是不提交表單，因爲它不能找到ajax

所以我追求的是我怎樣才能得到它查看webapp_get_customers div來查看錶單是否被提交，或者我是否會做出這種錯誤。即時通訊思想瀏覽器無法看到駐留在get.php頁面上的DIV裏面的代碼它只是返回加載的內容

請幫助其非常apreciated

<form name='frm_details' class='frm_details' id='frm_details0' action=''> 
<input type='text' class='form-control' name='cu_fname' required> 
<input type='text' class='form-control' name='cu_lname' required> 
<input type='submit' value='Save' > 
</form> 

    <script> 
     $(function() { 
      $('form.frm_details').on('submit', function(event) { 
       event.preventDefault(); 
       $.ajax({ 
        url: '/limitless/functions2.php', 
        type: 'post', 
        dataType: 'json',      
        data: $(this).serialize(), 
         success: function(data) { 
          if(data.status == '1') 
          { 
           $('#info').addClass('alert alert-danger no-border').html(data.message); 
          } 
          if(data.status == '2') 
          { 
           $('#info').addClass('alert alert-danger no-border').html(data.message); 
          }        
         } 
       }); 
      }); 
     }); 
    </script> 

    <script> 
    function webapp_get_customers(){ 
     $.ajax({ 
     type: 'GET', 
     url: '/limitless/get.php', 
     dataType: 'html' 
     }).done(function(data) { 
     $('#webapp_get_customers').html(data); 
     }); 
    } 
    webapp_get_customers(); 
    </script>  


    <div id='webapp_get_customers'></div> 

Answer 1

我建議ü使用ajaxSubmit會提交一個表單，它會爲你處理表單域的序列化。

$("#yourFormSelector").ajaxSubmit({ 
    type: "POST", 
    url: url, 
    beforeSend: function (msg) { 
     //Do something before sending your request 
    }, 
    success: function (data, status, xhr) { 
     //Do something on success 
    }, 
    error: function (xhr, status, error) { 
     //Do something on success 
    }, 
    complete: function (event, xhr, option) { 
     //Do something on complete (whether it was successful or not) 
    } 
}); 

Answer 2

首先，如果你想檢查提交過程，你可以在Chrome（或Firefox）中打開開發工具，點擊網絡面板。顯示在那裏的所有請求。其次，如果在加載頁面後添加表單（或其他DOM），則事件偵聽器將不會正確添加到它。您需要再次手動綁定它。

Answer 3

你只需要從功能刪除發送jQuery的AJAX功能，並調用它以這樣的方式

<form name='frm_details' class='frm_details' id='frm_details0' action=''> 
    <input type='text' class='form-control' name='cu_fname' required> 
    <input type='text' class='form-control' name='cu_lname' required> 
    <input type='submit' value='Save' > 
    </form> 

     <script> 
      $(function() { 
       $('form.frm_details').on('submit', function(event) { 
        event.preventDefault(); 
        $.ajax({ 
         url: '/limitless/functions2.php', 
         type: 'post', 
         dataType: 'json',      
         data: $(this).serialize(), 
          success: function(data) { 
           if(data.status == '1') 
           { 
            $('#info').addClass('alert alert-danger no-border').html(data.message); 
           } 
           if(data.status == '2') 
           { 
            $('#info').addClass('alert alert-danger no-border').html(data.message); 
           }        
          } 
        }); 
       }); 
       $.ajax({ 
        type: 'GET', 
        url: '/limitless/get.php', 
        dataType: 'html', 
        success: function(data) 
        { 
        //alert(html); 
        $('#webapp_get_customers').html(data); 
        } 
       }); 

      }); 
     </script>  

     <div id='webapp_get_customers'></div>