jquery / javascript ajax not working when loaded into page via jquery load()

Have tried looking at answers similar but can’t quite understand it.
I have tested the following code [www.mangocleaning.com/testing/pg1.php][1] and it works fine when used directly on its own page. However, when I load it via ajax load() to act as content within a current page it stops working. Can anyone help please? I copy and paste a lot and have limited understanding so please make it as simple for me to understand as you can please. Many thanks

 <script>

      function showEdit(editableObj){$(editableObj).css("background","#FFF");} 
      function saveToDatabase(editableObj,column,id) {
      $(editableObj).css("background","#CCC url(loaderIcon.gif) no-repeat right");
       $.ajax({
        url: "pg3.php",
        type: "POST",
        data:'column='+column+'&editval='+editableObj.innerHTML+'&id='+id,
        success: function(data){
    $(editableObj).css("background","#CCC");
    }        
});
}

</script>

</head>

<form name='userForm'id='userForm' method>
<div><input type='text' name='company_name' placeholder='Company Name' /></div>
<div><input type='text' name='contact' placeholder='Contact' /></div>
<div><input type='text' name='priority' placeholder='Priority' /></div>
<div><input type='text' name='email_to' placeholder='Email to' /></div>
<div><input type='text' name='email_from' placeholder='Email from' /></div>
<div><input type='text' name='begin_message' placeholder='Dear / Hi / Hello' /></div>
<div><input type='text' name='message_text' placeholder='Message content' /></div>
<div><input type='text' name='end_message' placeholder='Many thanks / Kind regards' /></div>
<div><input type='submit' value='Submit' /></div>
</form>



<div class="table_outer">
<table class="table1" id="table1">

<thead>
    <th>id</th>
    <th>Company</th>
    <th>Person</th>
        <th>Email to</th>
        <th>Email from</th>
        <th>Begin message</th>
        <th>Text</th>
        <th>End message</th>
        <th>Delete</th>
</thead>

<?php
require_once("pg5.php");
$db_handle = new DBController();
$sql = "SELECT * from InvoiceEmailData";
$data = $db_handle->runQuery($sql);

foreach($data as $data_variable=>$dsdjgskjghkjfh) {
?>

<tr>
    <td contenteditable="false" onBlur="saveToDatabase(this,'id','<?php echo $data[$data_variable]["id"]; ?>')" onClick="showEdit(this);"><?php echo $data[$data_variable]["id"]; ?></td>
    <td contenteditable="true" onBlur="saveToDatabase(this,'Company','<?php echo $data[$data_variable]["id"]; ?>')" onClick="showEdit(this);"><?php echo $data[$data_variable]["Company"]; ?></td>
    <td contenteditable="true" onBlur="saveToDatabase(this,'Person','<?php echo $data[$data_variable]["id"]; ?>')" onClick="showEdit(this);"><?php echo $data[$data_variable]["Person"]; ?></td>
    <td contenteditable="true" onBlur="saveToDatabase(this,'EmailTo','<?php echo $data[$data_variable]["id"]; ?>')" onClick="showEdit(this);"><?php echo $data[$data_variable]["EmailTo"]; ?></td>
    <td contenteditable="true" onBlur="saveToDatabase(this,'EmailFrom','<?php echo $data[$data_variable]["id"]; ?>')" onClick="showEdit(this);"><?php echo $data[$data_variable]["EmailFrom"]; ?></td>
    <td contenteditable="true" onBlur="saveToDatabase(this,'BeginMessage','<?php echo $data[$data_variable]["id"]; ?>')" onClick="showEdit(this);"><?php echo $data[$data_variable]["BeginMessage"]; ?></td>
    <td contenteditable="true" onBlur="saveToDatabase(this,'Text','<?php echo $data[$data_variable]["id"]; ?>')" onClick="showEdit(this);"><?php echo $data[$data_variable]["Text"]; ?></td>
    <td contenteditable="true" onBlur="saveToDatabase(this,'EndMessage','<?php echo $data[$data_variable]["id"]; ?>')" onClick="showEdit(this);"><?php echo $data[$data_variable]["EndMessage"]; ?></td>

     <td> <input type="submit" id='<?php echo $data[$data_variable]["id"] ?>' value='Delete' class="delete-button"  /> </td>
</tr>

<?php
}
?>

</table>

JQUERY/AJAX TO SEND AND THEN RECEIVE BACK FORM DATA TO/FROM PG2  TO ADD TO TABLE ABOVE - ALSO DELETE ROWS USING DELETE QUERY FROM PG3
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script>
<script>

delete_task(); // Call the delete_task function
$(document).ready(function(){
    $('#userForm').submit(function(){

    $.ajax({
        type: 'POST',
        url: 'pg2.php', 
        data: $(this).serialize()
            })

    .done(function( data ) {$(data).appendTo('#table1').hide().fadeIn(2000);delete_task();
            })

    .fail(function() { alert( "Posting failed." ); });
        return false;

        });
    });

function delete_task() {
    $('.delete-button').click(function(){
    var current_element = $(this);
    var id = $(this).attr('id');

    $.post('pg4.php', { list_entry_id: id }, function() {
    current_element.parent().fadeOut(300, function() { $(this).closest('tr').remove(); });

});
    });

}


Source: ajax

Leave a Reply