Updating Database and Page Content at the Same Time

Question

This is a tough one for me. a total of five documents involved in this process. I can't help but feel that I am over complicating this issue. I asked about this previously and THOUGHT I understood the issue, but then I tried to add a simple "loading" modal to the equation, and it broke. What's worse I can't get it working anymore. I have changed too much. Yes I know I should have backed it up, let's get past that. The one language I cannot change at all in this whole element is my DB language, which is MySql.

What I Want to Happen

Page loads all non-archived submissions. The data is structured so that some but not all data is displayed for each row. At least not until the user clicks the "more info" button. NOTE: THIS IS NOT THE PROBLEM BUT ONLY HERE BECAUSE I HAVEN'T BUILT THIS YET, I WILL FOCUS ON THIS LATER.

After the user has finished using the data from one row, I would like the user to be able to archive the data into the database by changing the "archived" field from 0 to 1. After that is accomplished, I would like the row to disappear. If there is a lag and more than a second or two is needed to accomplish this, then a loading modal should appear that will indicate that the page has received the request and prevents the user from pressing the "archive" button multiple times.

What is Happening Now

When the page loads, all non-archived data is displayed in rows that show some but not all information for each record in a table. When the user clicks the "more info" button nothing happens. Note: Again I am not focusing on this issue I know how to fix this. When the user clicks on the "archive" button, it does nothing, but if they click if multiple times it eventually will bring up the "loading" modal and then refresh the page. The row that should have disappeared is still there, and the record still shows a "0" instead of a "1" as it should.

Final Comments Before Code Is Given

I am open to using other languages as I am a fast learner, I just don't know how to integrate them. But if you do respond with that, please also explain why my way is inferior and what I would have to do to make this work. I am still learning AJAX (very much beginner) and PHP (intermediate . . . I think).

The Code

index.php - abridged without head


    Locate My Pet
    Administration
    Hello There! You can review and archive submitted requests here.

    
        
            Submissions
        

        

    



    
    © 2016 TL Web Development and Design
    



    
        
            
                
                Archiving Submission
            

            
                Please wait . . .

submission.php

query($get_all);

    if ($result->num_rows > 0) {
        while($row = $result->fetch_assoc()) {
            if (!$row['archived']) {
                echo "";
                } else {
                    echo "Yes";
                }
                echo    "";
            }
        }
    } else if ($conn->connect_error != NULL) {
        echo "";
    } else {
        echo "";   
    }
?>


    Customer Name
    Address
    Contact
    Pet Info
    Tools


                        
                            " . $row['fName'] . " " . $row['lName'] . "

                            Sent: " . $row['timeEntered'] . "
                        
                        " . $row['address'] . "
" . $row['city'] . " " . $row['state'] . ", " . $row['zip'] ."
                        
                            Primary Phone: " . $row['pPhone'] ."

                            Cell Phone:  " . $row['cPhone'] . "

                            Email: " . $row['email'] . "
                        
                            Pet Name: " . $row['pName'] . "

                            Gender: " . $row['gender'] . "

                            Spayed or Neutered?: ";
                if ($row['spayedNeutered'] = 0) {
                    echo "No 
                            

                            
                        
                    
Error: " . $conn->error . "
No Records were found.

connect.php - some content no included for security reasons

// Create connection
$conn = new mysqli($servername, $username, $password, $dbName);

// Check connection
if ($conn->connect_error) {
    die("Error: " . $conn->error . ")");
}

query.js

$(document).ready(function() {
    "use strict";
    $('#results').load('../_php/submission.php');
    $(".archive").click(function() {
        $('#archiveMessage').modal('show');
        var id = $(this).parent().parent().attr('id');
        $.ajax({
            type: 'POST',
            url: '../_php/functions.php',
            data: {'archive': id},
        });
    });
});

functions.php

query($archive) === TRUE) {
            echo "Record " . $id . " has been archived.";
        } else {
            echo "Error: " . $conn->error;
        }
    }


    if (isset($_POST['callArchive'])) {
        archive($_POST['callArchive']); 
    } else {
        archive(1);
    }
?>

jameshwart lopez · Accepted Answer

Since archive button is dynamically loaded, its the best choice to use .on('click') rather than .click() that does not fires on a dynamically loaded element. Try to read the question and answeres here, specially the selected correct answer.

query.js

$(document).ready(function() {
    "use strict";
    $('#results').load('../_php/submission.php');
    $("#results .archive").on("click",function() {
        $('#archiveMessage').modal('show');
        var id = $(this).parent().parent().attr('id');
        $.ajax({
            type: 'POST',
            url: '../_php/functions.php',
            data: {'archive': id},
            //If you dont want to change your functions.php file use the commented line below instead of the above code
            //data: {'callArchive':id},
        });
    });
});

When the user clicks on the "archive" button, it does nothing, but if they click if multiple times it eventually will bring up the "loading" modal and then refresh the page. The row that should have disappeared is still there, and the record still shows a "0" instead of a "1" as it should.

Since your ajax call data contains post 'archive' in which the value is id and you want to update some data of your request table but you are checking the wrong index of the
POST data(if (isset($_POST['callArchive'])) )
rather change it to if (isset($_POST['callArchive']))

query($archive) === TRUE) {
            echo "Record " . $id . " has been archived.";
        } else {
            echo "Error: " . $conn->error;
        }
    }


    if (isset($_POST['archive'])) {
        archive($_POST['archive']); 
    } else {
        archive(1);
    }
?>

Hope that helps :D