I have been struggling with this forever and.. it seems like it should be super easy. The goal is to group different functions under different pages, i.e. customer functions like create/read/update/delete should be on customers.php. I have tried SOOOO many ways, studied the cases on stackoverflow and yes, @u_mulder I've tried the event listener, I’ve tried to set the page in my js function using window.location.replace (assign, you name it) as well as in php and more. But I was unable to get any of those to work. And NO, my question was NOT answered at the link you reference. Maybe it is just my inexperience, however, I do not see how that answer helps me when I need to link to . does not get me to customers.php. The menus are in a file located here ../include/adminheader.php. In my situation I need to know how this would work where I do not simply have a '#' where the page link goes. The person who answered my question helped a tremendous amount and allowed me to move forward on a problem that has blocked me for more than 2 months. Believe me I did not go lightly to stackoverflow with my question. Here my original question continues:: .. but I’ll just stick with the penultimate iteration here. I have an HTML document header in a php include file that contains my menus. A submenu of ‘View’ contains options ‘All Customers’ and Single Customer’. These should both take the user to customers.php. Code to follow. No matter which menu item I click on both functions are called.
Menu Syntax contained in include/adminheader.php:
<ul><a href="#">View</a>
<li><a id="allCustomers" href="customers.php" >All Customers</a></li>
<li><a id="singleCustomer" href="customers.php" >Single Customer</a></li>
</li>
On the page customers.php at the bottom of the page I have:
<script>
var grid = document.getElementById("grid");
var search = document.getElementById("search");
var email = document.getElementById("email");
var outputTable = document.getElementById("table");
document.getElementById("allCustomers").onclick = getCustomers();
document.getElementById("singleCustomer").onclick = viewCustomer();
</script>
Here are the javascript functions in my external javascript file located in scripts/adminjs.js
function getCustomers() {
document.getElementById("grid").innerHTML = "";
document.getElementById("table").innerHTML = "";
grid.className = "grid_4cols";
var ajax = new XMLHttpRequest();
ajax.open("GET", "../controller/admincontroller.php?getCustomers=all", true);
ajax.send();
ajax.onreadystatechange = function() {
if (ajax.readyState == 4 && ajax.status == 200) {
var arr = JSON.parse(ajax.responseText);
var result = "";
for (var i = 0; i < arr.length; i++) {
result += "<form action='../controller/admincontroller.php' method='POST' >";
result += "<input type='hidden' id='id' name='id' value ='" + arr[i]['ID'] + "'>" ;
result += "<input type='text' name='fname' value='" + arr[i]['fname'] + "'>" ;
result += "<input type='text' name='lname' value='" + arr[i]['lname'] + "'>";
result += "<input type='text' name='email' value='" + arr[i]['email'] + "'>";
result += "<input type='submit' name='selectCustomer' value='Select' ></form>";
}
grid.innerHTML = result;
}
};
}
function viewCustomer() {
document.getElementById("grid").innerHTML = "";
document.getElementById("table").innerHTML = "";
var ajax = new XMLHttpRequest();
ajax.open("GET", "../controller/admincontroller.php?viewCustomer=all", true);
ajax.send();
ajax.onreadystatechange = function() {
if (ajax.readyState == 4 && ajax.status == 200) {
var arr = JSON.parse(ajax.responseText);
var i = 0;
if (!arr[i]['landline'] ) {
arr[i]['landline'] = "";
}
var table = "<table><tr><td class='th'>First Name:</td><td class='td'>" + arr[i]['fname'] + "</td>";
table += "<td class='th'>Last Name:</td><td class='td'>" + arr[i]['lname'] + "</td></tr>";
table += "<tr><td class='th'>Cell Number:</td><td class='td'>" + arr[i]['phone'];
table += "</td><td class='th'>Landline:</td><td class='td'>" + arr[i]['landline'];
table += "</td><td class='th'>Email:</td><td class='td'>" + arr[i]['email'];
table += "</td></tr><tr><td class='th'>Street:</td><td class='td'>" + arr[i]['street'];
table += "</td><td class='th'>City:</td><td class='td'>" + arr[i]['city'];
table += "</td><td class='th'>Zip:</td><td class='td'>" + arr[i]['zip'];
if (!arr[i]['animal_type']) {
table += "</td></tr><tr><td class='th'>Type of Animal:</td><td class='td'>' '";
table += "</td><td class='th'>Name:</td><td class='td'>' '";
table += "</td><td class='th'>Breed:</td><td class='td'> </td></tr>";
}
if (arr[i]['animal_type']) {
for (i = 0; i < arr.length; i++ ) {
table += "</td></tr><tr><td class='th'>Type of Animal:</td><td class='td'>" + arr[i]['animal_type'];
table += "</td><td class='th'>Name:</td><td class='td'>" + arr[i]['name'];
table += "</td><td class='th'>Breed:</td><td class='td'>" + arr[i]['breed'] + "</td></tr>";
}
}
table += "</table>"
outputTable.innerHTML = table +
"<select onChange='window.location.href=this.value'><option selected disabled>I want to update..</option>" +
"<option value='updatecustomer.php'>Update Contact Info</option>" +
"<option value='updateanimals.php'> Update My Animals</option></select>";
}
};
}
Thanks for your help.
These functions work beautifully when I use a different php page for each function but that's now how this should work. Thank you in advance for your help.
