ajax post not working on ajax get from inside div

Question

i am working on a customer management system and im currently stuck on an issue i have been trying to work out for a week and have now run out of ideas

i have index.php basically its a simple form you submit a customers first name and last name then ajax sends the request to functions2.php to add to a database then reports back success or not then webapp_get_customers retrieves and updated table with the new customer into the webapp_get_customers div without refreshing the page this is working perfectly

however on the get.php page i have a table that selects results from a table then adds the same form below to be able to edit the customers name when i edit on the index page its opening the form correctly in a modal but is not not submitting the form like it cannot find the ajax

so what i am chasing is how can i get it to look into the webapp_get_customers div to see if a form is submitted or am i going about this all wrong. im thinking the browser cannot see the code inside the div that resides on the get.php page its just returning the loaded content

please help its very much 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

You just need to remove send jquery ajax function from the function, and call it in this way :

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

Answer 2

First, if you want check the submit process, you can open develop tools in chrome (or Firefox), click the network panel. All the requests showing there. Second, if you add a form (or other DOM) after the page loaded, the event listener will not be added to it correctly. You need to manually bind it again.

Answer 3

I recommend u to use AjaxSubmit to submit a form, it will handle serialization of form fields for you.

$("#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)
   } 
});