Update: Problem fixed! you can take the javascript out of the loop and pass a parameter to it, look at the comments to see the full soultions (: thank you!
I tried to keep it as short as I could, except from this line its all important! :)
This is how my loop works:
1) I use a while loop on all the messages found (works)
2) Then Im inserting the message data into an html template inside the while loop..
3) Then I give each message an onclick function with a special id..
heres the wierd part, it all works perfectly fine, after refresh..
let me show you the source codes before I will explain the exact problem:
This is the start of the loop, I just grab the data for that specific message and then close the php to continue with the inside of the loop...
<?php
while($inbox = mysql_fetch_array($sqlinbox))
{
$pm_id = $inbox['id'];
$sender = $inbox['sender'];
$subject = $inbox['subject'];
$message = $inbox['message'];
?>
Now this is whats happenning inside the loop,
First I generate the msg itself:
<li>
<a href="javascript:;" onclick="loadmsg<?php echo $pm_id; ?>()">
<center>
<div>
<strong>
<span class=" label label-danger">
<?php echo $sender; ?>
</span>
</strong>
</div>
</center>
<div style="width:80%; text-align:center; margin:auto;"><?php echo $message; ?></div>
</a>
</li>
And then I generate a simple javascript function for loading that msg inside a div... I know big topic lots of possibilities but the problem is very simple yet beyond my knowledge, please help lets continue.. this is the script:
<?php
echo '
<script>
function loadmsg' . $pm_id . '() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("page-wrapper").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "/LinkMonster/viewmsg.php?msg_id=' . $pm_id . '", true);
xhttp.send();
}
</script>
';
?>
And of course lets close the while loop..:
<?php
}
?>
So basicly that outputs that:
<li>
<a href="javascript:;" onclick="loadmsg16()">
<center>
<div>
<strong>
<span class=" label label-danger">
[email protected] </span>
</strong>
</div>
</center>
<div style="width:80%; text-align:center; margin:auto;">lllllllllll</div>
</a>
</li>
<script>
function loadmsg16() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("page-wrapper").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "/LinkMonster/viewmsg.php?msg_id=16", true);
xhttp.send();
}
</script>
Bigger example (more then 1 msg) - Pastebin.com
Now it all works, when i get a new msg and refresh the page the scripts are being generated as expected and when i click a msg it changes the div named "page-wrapper" to the msg specific page (/LinkMonster/viewmsg.php?msg_id=16)
But, theres always a but, I wanted to take things to a new level and refresh the messages live without refreshing the page itself, so as i get a message it just pop up where it should, so i did that:
<div id="inboxmsgs">
<?php
include("./UpdateMsgs.php");
?>
</div>
<script>
function updateMSGS()
{
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("inboxmsgs").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "/LinkMonster/UpdateMsgs.php", true);
xhttp.send();
}
setInterval("updateMSGS()",1000); //call updateRow() function every 1 seconds.
</script>
So basiclly I take this div named 'inboxmsgs' and I use include to load the msgs for the first time into that div, then I use the same javascript function with a setIntreval of every second to load the messages again and again
That works as well! I send myself a message and it pops up without any problems, live, without refreshing...
So if it all works why I am here?
The javascript functions that loads after each message is not really getting loaded into the page, only into the html, dont get me wrong they are being spawned where they should and they also have the correct values, it just that the chrome says it cant find the function even due its there! and if i refresh the page it just finds the function, its like I need to tell chrome to query that function or something.. Is that make any sense to you? please feel free to ask any questions and even the full system for those who just want it (:
Just to make sure you understood me: Lets say I have 3 msgs in the inbox, if I click them it all works and it shows the messages pages correctly, but then I get a new msg, the msg is showing up correctly, the javascript is also being loaded correctly, I can still click all the 3 msgs I already had, but if I click the new msg (num4), chrome says I couldnt find that function [ex: loadmsg16() ], if I send another msg still I can access all the 3 msgs I already had but now theres 2 extra message I cant click because thier functions are not loaded, now at that point if I refresh the page all 5 messages are fully clickable!
Full Source Code:
<?php
while($inbox = mysql_fetch_array($sqlinbox))
{
$pm_id = $inbox['id'];
$sender = $inbox['sender'];
$subject = $inbox['subject'];
$message = $inbox['message'];
?>
<li>
<a href="javascript:;" onclick="loadmsg<?php echo $pm_id; ?>()">
<center>
<div>
<strong>
<span class=" label label-danger">
<?php echo $sender; ?>
</span>
</strong>
</div>
</center>
<div style="width:80%; text-align:center; margin:auto;"><?php echo $message; ?></div>
</a>
</li>
<li class="divider"></li>
<?php
echo '
<script>
function loadmsg' . $pm_id . '() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("page-wrapper").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "/LinkMonster/viewmsg.php?msg_id=' . $pm_id . '", true);
xhttp.send();
}
</script>
';
}
?>
It will be a lot easier, cleaner and will possible work right away if you just change loadmsg<?php echo $pm_id; ?>() to loadmsg(<?php echo $pm_id; ?>). Note I'm passing the id as a parameter instead of part of the name of the function. Then take your function outside the loop, declare it only once as loadmsg(id) and use the id inside the function as
xhttp.open("GET", "/LinkMonster/viewmsg.php?msg_id="+id, true);