Within my parent window, I have a div where I want to display newly entered records that are added into the database.
The following code snippet represents the div within the parent window:
<div id="divTable"></div>
A button resides in the child window with the purpose of triggering an update function:
<input type="button" name="submit" value="Submit" onclick="updateTable();"/>
Additionally, there is an external JavaScript file containing a function for updating the table after data entry:
function updateTable()
{
if(insertThis()==true)
{
alert("Your details have been successfully submitted! Please click 'View' to see all records.");
}
//What should be included here?
}//updateTable(w, h)
Amidst the JavaScript functions, there exists another script dedicated to displaying the table through AJAX:
function displayTable()
{
var page = "database.php"
var parameters = 'action=update';
var xmlhttp = new XMLHttpRequest();
if(xmlhttp==null)
{
alert("Unfortunately, your browser does not support AJAX!");
return false;
}
xmlhttp.onreadystatechange=function()
{
document.getElementById("divTable").innerHTML=xmlhttp.responseText;
};
xmlhttp.open("GET", page+"?"+parameters, true);
xmlhttp.send(null);
}//displayTable()
Moreover, a PHP file specifically handles the insertion of queries into the database. In the child window, text fields and radio buttons are provided for user input according to database requirements.
For the updateTable() function, what should be implemented? Should it include the displayTable() function or utilize other methods like windows.opener? Researching online led to various examples, but they lack guidance on using external JavaScript files. This has caused some confusion.
The goal post-user submission is immediate display of the table upon clicking the 'Submit' button. Currently, an additional button is utilized in the parent window to view the table again after exiting. The desired outcome is to eliminate this step and directly display the table at the designated div section.
To ensure clarity, in the displayTable() function,
document.getElementById("divTable").innerHTML=xmlhttp.responseText;P.S. Preferably seeking solutions utilizing raw JavaScript due to limited exposure to jQuery as a beginner in the programming language.