so when it comes to Javascript, I have no idea what I am doing.
I have a main page, with two iFrames. The main "content" iFrame holds the main content, in this case, the results from a MySQL database SELECT. The bottom iFrame is used to add rows to the same table.
When the 'add row' form is submitted from the bottom iFrame, I want the 'content' iFrame to load the list of results, and scroll to the newly added result.
I use
Currently, the only way to make this work that I have found is echo
-ing the following code once upon successful row entry:
parent.document.getElementById('content').contentWindow.location.reload();
parent.document.getElementById('content').src = '../pages/results.php#".$id."';
The $id
variable is set with $mysqli->insert_id;
The above code works, but it's obviously bad coding, on slower connections, for example, I can imagine the browser will fail to change the src
as the reload action is still performing.
So, what can I add to my code, or what can I change my code to, to make the javascript either:
Reload the 'content' iFrame to show the new row and then navigate to the anchor to scroll the user to the newly created row. or
Do all of that in one simple action (I've found just using the bottom line of the two lines on it's own doesn't work, so the reload seems necessary to me at the moment.)