Member Avatar for TheFearful

Hey everyone, I am trying to use JQuery to help me load a page on my page so that the user does not have to refresh or move to a new page. So far, I have the code so that the next page's contents will display, but the update button that I have on there won't work and the values are not showing on the table correctly since the values from the first page were not passed. Does anyone have an idea about how to do this? here are some snippets of the code so that you can have an idea of what I did.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>

function loaddata()
{
$(document).ready(function(){
    $('#display_info').load('sqlPage2.php?engineers');
    //var engineers = $(this).;
    alert(engineers);

});
}

The call to the function:

echo "<select name='engineers' id='engineers' onchange='loaddata();'>";

Where the information will be displayed at the end:

<div id="display_info"><b>Engineer info will be listed here...</b></div>

So the page loads with the table that I have, but the values in there are undefined and I don't know how to use the value from the first page to pass it on to the next while still on that same page.
It works when I submit the information and go on to the next page. But now I want everything to be done on one page so that it feels like it's more real-time.

Any tips or help would be awesome. Thanks guys!

  • 2 Contributors
  • 7 Replies
  • 532 Views
  • 4 Hours Discussion Span
  • Latest Post Latest Post by hielo

Recommended Answers

All 7 Replies

Member Avatar for hielo

Get rid of the $(document).ready(function(){...}); "wrapper". You need that only when you need to execute something as soon as the page has loaded. In your case, by the time the user selects something, the page is already loaded, so you just need to make the load() method call immediately.

function loaddata()
{
    $('#display_info').load('sqlPage2.php?engineers');
}
Member Avatar for TheFearful

I did this instead. I still had the $(document).ready(function(){});

since I believe that it's good practice to do so. But instead of an attribute, I used an event handler instead. But I am still having trouble trying to pass the userID so that the table can populate with the real values.

$(document).ready(function(){
    $('#engineers').on('change', function()
    {
        $('#display_info').load('sqlPage2.php');
    });
Member Avatar for hielo

With the new code you have, you just need this.value:

$(document).ready(function(){
    $('#engineers').on('change', function()
    {
        $('#display_info').load('sqlPage2.php?' + this.value );
    });

For the sake of completeness, with the old code, you needed to pass the value to loaddata() by adding this.data as a parameter:

echo "<select name='engineers' id='engineers' onchange='loaddata(this.value);'>";
Member Avatar for TheFearful

I got rid of the onchange attribute and instead used the .on('change') in the function instead and got rid of loaddata as I no longer need to call the function since the above line of code is listening for an event to happen.

However, I now have the table being populated. The issue I'm facing now is that the update button won't work.

Member Avatar for hielo

The issue I'm facing now is that the update button won't work

I don't know what button you are referring to. You need to show your code.

Member Avatar for TheFearful

The code is rather long. But I'll show what I have.

Page 1:

<!DOCTYPE html>
<html>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>



$(document).ready(function(){
    $('#engineers').on('change', function()
    {
        $('#display_info').load('sqlPage2.php', $('#engineers'));
    });

});

</script>
</head>

<body>
<?php
    $servername = 'localhost';
    $username = 'root';
    $password = '';
    $dbname = 'DBASE'; //Changed for privacy matters

    //create connection
    $conn = mysqli_connect($servername, $username, $password, $dbname);

    //check connection
    if(!$conn)
    {
        die("Connection Failed: " . mysqli_connect_error());
    }

    //lets you know that connection is successful
    echo "Connected Successfully". "<br>";

    //sql command to select parts of a table from the database and then sort them
    $sql = "SELECT UserID from engineers group by UserID";
    //The results are stored here
    $result = mysqli_query($conn, $sql);

    //Http lines of code in php syntax since we are using php after all
    echo "<h1>". "SALES ENGINEERS". "</h1>";
    echo "<form action='sqlPage2.php' method= 'post'>";
    echo "Select the User that you want to Update <br><br>";
    echo "User ID: &nbsp &nbsp &nbsp &nbsp &nbsp";
    echo "<select name='engineers' id='engineers'>";
    echo "<option value=''> Drop down from SE list </option>";
    //This will go through every entry in the table from the database
    //and then put all the found entries in the dropdown menu.
    while($row = mysqli_fetch_array($result))
    {
        //makes the entry visible in the dropdown menu
        echo "<option value='". $row['UserID']."'>". $row['UserID']. "</option>";
    }
    echo "</select>";

    echo "<br><br>";

    //echo "<input type = ". "'submit'". "value =". "'Submit'/>";
    echo "<input type = 'submit' value = 'Submit'/>";
    echo "</form>";

    //This is after you make any changes to the information
    //for the choice selected from the next page
    //You will not see the change on this page, but will see it on the next page
    //once you go back on it and the change will also appear within the database
    if(isset($_POST['update']))
    {
        $EmployeeID = $_POST['EmployeeID'];
        //These are the inputs that will be updated
        $FirstName = $_POST['FirstName'];
        $LastName = $_POST['LastName'];
        $Extension = $_POST['Extension'];
        $Telephone = $_POST['Telephone'];
        $Email = $_POST['Email'];
        $PPhone = $_POST['PersonalPhone'];
        $MPhone = $_POST['Mobile'];
        $TeleAgent = $_POST['TelephoneAgent'];
        //The SQL command to update the above
        $sql2 = "UPDATE engineers SET FirstName = '$FirstName', LastName= '$LastName', Extension='$Extension', Telephone='$Telephone', Email='$Email', PersonalPhone='$PPhone', Mobile='$MPhone', TelephoneAgent='$TeleAgent' WHERE EmployeeID='$EmployeeID'";
        //The result of the command will be saved here and will update the database
        $res = mysqli_query($conn, $sql2);
    }


    //closes the connection to the database
    mysqli_close($conn);
?>
<div id="display_info"><b>Engineer info will be listed here...</b></div>
</body>
</html>

Second PHP Page

<?php
    $servername = 'localhost';
    $username = 'root';
    $password = '';
    $dbname = 'DBASE';

    //create connection
    $conn = mysqli_connect($servername, $username, $password, $dbname);

    //check connection
    if(!$conn)
    {
        //will tell you if the connection failed
        die("Connection Failed: " . mysqli_connect_error());
    }

    //Checks the previous page for the choice selected from the Dropdown menu


    if(isset($_POST['engineers']))
    {
        $UserID = $_POST['engineers'];
        //SQL command to pull information from the table where Sales Engineers are
        $sql = "SELECT * FROM engineers where UserID='$UserID'";
        //The result is saved here
        $result = mysqli_query($conn, $sql);

        //Will fetch the information
        //Slightly redundant since we will only be selecting only one 
        //entry at a time
        while($row = mysqli_fetch_array($result))
        {
            $EmployeeID = $row["EmployeeID"];
            $FirstName = $row["FirstName"];
            $LastName = $row["LastName"];
            $Extension = $row["Extension"];
            $Telephone = $row["Telephone"];
            $Email = $row["Email"];
            $PPhone = $row["PersonalPhone"];
            $MPhone = $row["Mobile"];
            $TeleAgent = $row["TelephoneAgent"];

        }
    }




    //Closes the connection
    mysqli_close($conn);
?>


<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>


</script>

</head>
<body>


    <table style="color:purple;border-style:groove; height:150px;width:350px">
         <form action ="sqlPage.php" id="updateInfo" method = "post" onsubmit="return confirm('Are you sure you want to make these changes?')">
         <div>
            <td>
                <!-- This will be hidden so that the user cannot change the value of the EmployeeID since 
                     that is a permanent thing
                -->
                <input type="hidden" name="EmployeeID" value ='<?php echo $EmployeeID;?>'/>
            </td>
            <tr>
                <!-- These next few lines will print out the textboxes of the selected UserID from the previous page -->
                <td style="color:red;background-color:aqua;" class="auto-style3">First Name:</td>
                    <td class="auto-style4">
                        <input name="FirstName" type="text" value='<?php echo  $FirstName; ?>'/>
                    </td>
            </tr>

            <br><br>
            <tr>
                <!-- Same as above -->
                <td style="color:red;background-color:aqua;" class="auto-style3">Last Name:</td>
                    <td class="auto-style4">
                        <input name="LastName" type="text" value='<?php echo  $LastName; ?>'/>
                    </td>
            </tr>

            <tr>
                <!-- Same as above -->
                <td style="color:red;background-color:aqua;" class="auto-style3">Extension:</td>
                    <td class="auto-style4">
                        <input name="Extension" type="text" value='<?php echo  $Extension; ?>'/>
                    </td>
            </tr>

            <tr>
                <!-- Same as above -->
                <td style="color:red;background-color:aqua;" class="auto-style3">Telephone:</td>
                    <td class="auto-style4">
                        <input name="Telephone" type="text" value='<?php echo  $Telephone; ?>'/>
                    </td>
            </tr>

        <tr>
                <!-- Same as above -->
                <td style="color:red;background-color:aqua;" class="auto-style3">Email:</td>
                    <td class="auto-style4">
                        <input name="Email" type="text" value='<?php echo  $Email; ?>'/>
                    </td>
            </tr>

            <tr>
                <!-- Same as above -->
                <td style="color:red;background-color:aqua;" class="auto-style3">Personal Phone:</td>
                    <td class="auto-style4">
                        <input name="PersonalPhone" type="text" value='<?php echo  $PPhone; ?>'/>
                    </td>
            </tr>

            <tr>
                <!-- Same as above -->
                <td style="color:red;background-color:aqua;" class="auto-style3">Mobile:</td>
                    <td class="auto-style4">
                        <input name="Mobile" type="text" value='<?php echo  $MPhone; ?>'/>
                    </td>
            </tr>

            <tr>
                <!-- Same as above -->
                <td style="color:red;background-color:aqua;" class="auto-style3">Telephone Agent:</td>
                    <td class="auto-style4">
                        <input name="TelephoneAgent" type="text" value='<?php echo  $TeleAgent; ?>'/>
                    </td>
            </tr>

            <!-- This will be the button you press to finalize the updated information for that selected Sales Engineer -->
            <td style="color:red;background-color:aqua;" class="auto-style3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <input name="update" input type="submit" value="Update" id="update" style="color:white;background-color:brown; height:30px" />
                    </td>

        </form>      
        <!-- Will refresh the page so that you can undo any changes that you have made if necessary -->
        <form action="sqlPage2.php">
                <td style="color:red;background-color:aqua;" class="auto-style3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <A HREF="javascript:history.go(0)"></A>
                            <INPUT TYPE="button" onClick="history.go(0)" VALUE="Cancel" style="color:white;background-color:brown; height:30px" />
                </td>
                </div>
            </form>

    </table>

<div id="txtHint"><b>This will update the user</b></div>

</body>
</html>
Member Avatar for hielo

On line 20 of Page 2, you are expecting a "field/parameter" named "engineers" as a POST request, but on line 13 of Page 1, you are not passing an object -- you need to extract the value of #engineers and pass it onto to Page 2. The load() method will emit a POST request if you pass an object as a second argument OR a GET request if you pass a string. Since Page 2 uses $_POST, then on line 13 of Page 1 you need:

$('#display_info').load('sqlPage2.php', {'engineers': $('#engineers').val()}  );

For the sake of completeness, if you wanted to use $_GET on Page 2 instead, then you would need:

$('#display_info').load('sqlPage2.php', 'engineers='+ encodeURIComponent( $('#engineers').val() )  );

Lastly, on Page 2 you should be generating just the <table> markup, not the <html>,<head>,<body> tags. As a matter of fact,
Page 2 is sending code to "re-include" the jquery library. Your Page 1 already included jquery, and since you are using ajax, the browser does not refresh the page -- which means that you don't "loose" the jquery library when you send the request.

As for the <table> on Page 2, the first <form> tag should "hug" the <table>. The second <form> seems unnecessary. Since you are using ajax, the page actually loaded is Page 1, but your second form is targetting Page 2. The net effect is that the browser will navigate to Page 2. You should be really refreshing Page 1.

<?php
//Page 2
    $servername = 'localhost';
    $username = 'root';
    $password = '';
    $dbname = 'DBASE';
    //create connection
    $conn = mysqli_connect($servername, $username, $password, $dbname);
    //check connection
    if(!$conn)
    {
        //will tell you if the connection failed
        die("Connection Failed: " . mysqli_connect_error());
    }
    //Checks the previous page for the choice selected from the Dropdown menu
    if(isset($_POST['engineers']))
    {
        $UserID = mysqli_real_escape_string ($conn, $_POST['engineers']);

        //SQL command to pull information from the table where Sales Engineers are
        $sql = "SELECT * FROM engineers where UserID='$UserID'";
        //The result is saved here
        $result = mysqli_query($conn, $sql);
        //Will fetch the information
        //Slightly redundant since we will only be selecting only one 
        //entry at a time
        while($row = mysqli_fetch_array($result))
        {
            $EmployeeID = $row["EmployeeID"];
            $FirstName = $row["FirstName"];
            $LastName = $row["LastName"];
            $Extension = $row["Extension"];
            $Telephone = $row["Telephone"];
            $Email = $row["Email"];
            $PPhone = $row["PersonalPhone"];
            $MPhone = $row["Mobile"];
            $TeleAgent = $row["TelephoneAgent"];
        }
    }
    //Closes the connection
    mysqli_close($conn);
?>

    <form action ="sqlPage.php" id="updateInfo" method = "post" onsubmit="return confirm('Are you sure you want to make these changes?')">
    <table style="color:purple;border-style:groove; height:150px;width:350px">
            <td>
                <!-- This will be hidden so that the user cannot change the value of the EmployeeID since 
                     that is a permanent thing
                -->
                <input type="hidden" name="EmployeeID" value ='<?php echo $EmployeeID;?>'/>
            </td>
            <tr>
                <!-- These next few lines will print out the textboxes of the selected UserID from the previous page -->
                <td style="color:red;background-color:aqua;" class="auto-style3">First Name:</td>
                    <td class="auto-style4">
                        <input name="FirstName" type="text" value='<?php echo  $FirstName; ?>'/>
                    </td>
            </tr>

            <tr>
                <!-- Same as above -->
                <td style="color:red;background-color:aqua;" class="auto-style3">Last Name:</td>
                    <td class="auto-style4">
                        <input name="LastName" type="text" value='<?php echo  $LastName; ?>'/>
                    </td>
            </tr>
            <tr>
                <!-- Same as above -->
                <td style="color:red;background-color:aqua;" class="auto-style3">Extension:</td>
                    <td class="auto-style4">
                        <input name="Extension" type="text" value='<?php echo  $Extension; ?>'/>
                    </td>
            </tr>
            <tr>
                <!-- Same as above -->
                <td style="color:red;background-color:aqua;" class="auto-style3">Telephone:</td>
                    <td class="auto-style4">
                        <input name="Telephone" type="text" value='<?php echo  $Telephone; ?>'/>
                    </td>
            </tr>
        <tr>
                <!-- Same as above -->
                <td style="color:red;background-color:aqua;" class="auto-style3">Email:</td>
                    <td class="auto-style4">
                        <input name="Email" type="text" value='<?php echo  $Email; ?>'/>
                    </td>
            </tr>
            <tr>
                <!-- Same as above -->
                <td style="color:red;background-color:aqua;" class="auto-style3">Personal Phone:</td>
                    <td class="auto-style4">
                        <input name="PersonalPhone" type="text" value='<?php echo  $PPhone; ?>'/>
                    </td>
            </tr>
            <tr>
                <!-- Same as above -->
                <td style="color:red;background-color:aqua;" class="auto-style3">Mobile:</td>
                    <td class="auto-style4">
                        <input name="Mobile" type="text" value='<?php echo  $MPhone; ?>'/>
                    </td>
            </tr>
            <tr>
                <!-- Same as above -->
                <td style="color:red;background-color:aqua;" class="auto-style3">Telephone Agent:</td>
                    <td class="auto-style4">
                        <input name="TelephoneAgent" type="text" value='<?php echo  $TeleAgent; ?>'/>
                    </td>
            </tr>
            <!-- This will be the button you press to finalize the updated information for that selected Sales Engineer -->
            <td style="color:red;background-color:aqua;" class="auto-style3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <input name="update" input type="submit" value="Update" id="update" style="color:white;background-color:brown; height:30px" />
                    </td>

        <!-- Will refresh the page so that you can undo any changes that you have made if necessary -->

                <td style="color:red;background-color:aqua;" class="auto-style3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <INPUT TYPE="button" onclick="location.reload(true)" VALUE="Cancel" style="color:white;background-color:brown; height:30px" />
                </td>

    </table>
    </form>
<div id="txtHint"><b>This will update the user</b></div>
Edited by hielo
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.