XMLHttpRequest PHP Chats - javascript

I am trying to create a system to display messages on 2 or more separate chats( with different messages stored in a db) on the same page. The chats each have ids to differentiate them and I have created a function to go through each chat in use and print the approprite messages for them but only 1 chat gets the messages.
The Code:
The HTML
<div class="full_wrap">
<div class="force-overflow"></div>
<div id="Sidenav" class="side">
<h2>Chat Settings & Info</h2>
<a id="closebtn" href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="authr">
<a>
<div class="authr_img"></div>​
</a>
<form action="mypage.php" method="post">
<div class="authr_name">
<button value="<?php echo $chat_authr ?>" name="userlink" class="subm_as_text"><?php echo $chat_authr; ?></button>
</div>
</form>
</div>
<div class="chat_info">
<div class="chat_descy">
<h2>Chat Description</h2>
<div class="descc">
<h3><?php echo $chat_description; ?></h3>
</div>
</div>
<div class="chat_fol"><h2>Chat users: <?php echo $num_users; ?></h2></div>
<div class="chat_back">
<h2> Change Chat Wallpaper</h2>
<form method="post" action="picture.php" enctype="multipart/form-data">
<input type="file" id="upload" class="custom-file-input" name="chat_wall">
<input type="submit" class="chat_wall_subm" value="Change"/>
</form>
</div>
</div>
<form method="post" action="chat.php" >
<!--<input type="submit" class="chat_leave" name="" value="Leave Chat">-->
<button class="chat_leave" name="chat_leave" value="<?php echo $chat_index; ?>" >Leave Chat</button>
</form>
</div>
<div class="mnav">
<span onclick="openNav()">☰</span>
<i class="material-icons" id="chat_un_small" onclick="chat_un_small()">arrow_upward</i>
<h1><?php echo $chat_title ?></h1>
</div>
<!--one ting-->
<div class="conceal_wrapper">
<div class="msgs" id="5e2dbe2be3b5927c588509edb1c46f7d">
</div>
<form method="post" id="form_5e2dbe2be3b5927c588509edb1c46f7d" class="comform">
<div class="wcom" >
<input maxlength="140" type = "text" id="5e2dbe2be3b5927c588509edb1c46f7d" class="comin" placeholder="My message..." name="sendmsg" autocapitalize="off" autocorrect="off"/>
<input class="hidden_index" type="text" value="5e2dbe2be3b5927c588509edb1c46f7d" name="chat_index"/>
</div>
</form>
</div>
<div class="chat_enlarge">
<div class="chat_enlarge_full" onmouseover="chat_action(this)" onmouseout="chat_action_negative(this)" onclick="chat_enlarge_full()"></div>
<div class="chat_enlarge_standard" onmouseover="chat_action(this)" onmouseout="chat_action_negative(this)" onclick="chat_enlarge_standard()"></div>
<div class="chat_enlarge_small" onmouseover="chat_action(this)" onmouseout="chat_action_negative(this)" onclick="chat_enlarge_small()"></div>
</div>
</div>
<div class="full_wrap">
<div class="force-overflow"></div>
<div id="Sidenav" class="side">
<h2>Chat Settings & Info</h2>
<a id="closebtn" href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="authr">
<a>
<div class="authr_img"></div>​
</a>
<form action="mypage.php" method="post">
<div class="authr_name">
<button value="<?php echo $chat_authr ?>" name="userlink" class="subm_as_text"><?php echo $chat_authr; ?></button>
</div>
</form>
</div>
<div class="chat_info">
<div class="chat_descy">
<h2>Chat Description</h2>
<div class="descc">
<h3><?php echo $chat_description; ?></h3>
</div>
</div>
<div class="chat_fol"><h2>Chat users: <?php echo $num_users; ?></h2></div>
<div class="chat_back">
<h2> Change Chat Wallpaper</h2>
<form method="post" action="picture.php" enctype="multipart/form-data">
<input type="file" id="upload" class="custom-file-input" name="chat_wall">
<input type="submit" class="chat_wall_subm" value="Change"/>
</form>
</div>
</div>
<form method="post" action="chat.php" >
<!--<input type="submit" class="chat_leave" name="" value="Leave Chat">-->
<button class="chat_leave" name="chat_leave" value="<?php echo $chat_index; ?>" >Leave Chat</button>
</form>
</div>
<div class="mnav">
<span onclick="openNav()">☰</span>
<i class="material-icons" id="chat_un_small" onclick="chat_un_small()">arrow_upward</i>
<h1><?php echo $chat_title ?></h1>
</div>
<!--one ting-->
<div class="conceal_wrapper">
<div class="msgs" id="9503e253936e716f18d9c57b4f97d618">
</div>
<form method="post" id="form_9503e253936e716f18d9c57b4f97d618" class="comform">
<div class="wcom" >
<input maxlength="140" type = "text" id="9503e253936e716f18d9c57b4f97d618" class="comin" placeholder="My message..." name="sendmsg" autocapitalize="off" autocorrect="off"/>
<input class="hidden_index" type="text" value="9503e253936e716f18d9c57b4f97d618" name="chat_index"/>
</div>
</form>
</div>
<div class="chat_enlarge">
<div class="chat_enlarge_full" onmouseover="chat_action(this)" onmouseout="chat_action_negative(this)" onclick="chat_enlarge_full()"></div>
<div class="chat_enlarge_standard" onmouseover="chat_action(this)" onmouseout="chat_action_negative(this)" onclick="chat_enlarge_standard()"></div>
<div class="chat_enlarge_small" onmouseover="chat_action(this)" onmouseout="chat_action_negative(this)" onclick="chat_enlarge_small()"></div>
</div>
</div>
So there are 2 chats separated by the full_wrap class. The msgs have different id for the chat index stored unique for each chat in the db
The Javascript:
$( document ).ready(function() {
chat_receivemsgs();
});
function chat_receivemsgs(){
var cusid_ele = document.getElementsByClassName('msgs');
if(cusid_ele.length == 0) {
console.log("hi");
} else {
for (var i = 0; i < cusid_ele.length; ++i) {
var item = cusid_ele[i];
var item_id = item.id;
console.log(cusid_ele.length);
for (var i = 0; i < cusid_ele.length; ++i) {
var item = cusid_ele[i];
var item_id = item.id;
console.log(item_id);
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log("yes");
console.log(item_id);
// document.getElementById(item_id).innerHTML = this.responseText;
$("#"+item_id).html(this.responseText);
}else{
console.log("no");
console.log(item_id);
}
}
xmlhttp.open("GET","receivemsg.php?q="+item_id,true);
xmlhttp.send();
}
}
}
}
receivemsgs.php just selects all messages in the messages table with the index of the index given by item_id. The problem is as stated that only the chat with 9503e253936e716f18d9c57b4f97d618 id receives the messages.
I heard that the requests repeat 4 times but I am not an expert in this field. By using the console, I understood that it ignores the first chat and only generates the messages for 9503e253936e716f18d9c57b4f97d618.
Any help would appreciate.
Also if there is a better way to control more than one chat on the same page, I wold love to know how to.
Thank you for your time.

The problem lies in how you're using XMLHttpRequest.
See this snippet:
function Obj() {
}
Obj.prototype = {
callFunc: function() {
setTimeout(this.func, 1000);
}
};
function test() {
var ids = ['id1', 'id2'];
for (var i = 0 ; i < 2 ; ++i) {
var id = ids[i];
var obj = new Obj();
obj.func = function() {
console.log(id);
};
obj.callFunc();
}
}
test();
As you can see, the code prints "id2" twice to the console. That's similar to your problem.
What happens is that, in obj.func (in your code, that's xmlhttp.onreadystatechange), the id variable (respectively item_id) comes from the outer function. Its value when obj.func is assigned is not "saved". When the function finally gets executed, it will use the last known value for that variable.
So here's what happens:
i = 0
id = ids[0] = 'id1'
a new Obj is created (let's call it obj1) and assigned to obj
obj1.func is created
obj1.callFunc is called, it programs obj1.func to be called later
i = 1
id = ids[1] = 'id2'
a new Obj is created (let's call it obj2) and assigned to obj
obj2.func is created
obj2.callFunc is called, it programs obj2.func to be called later
obj1.func gets called, it prints the last value of id, that is "id2"
obj2.func gets called, it prints the last value of id, that is "id2"
There are a few ways around that behavior. You could retrieve item_id from PHP's output somehow. You could set item_id to a member of xmlhttp and use that in your function (xmlhttp.item_id = item_id; then inside the function this.item_id). Or you could use bind. With the latter solution, your code becomes:
xmlhttp.onreadystatechange = function(this_item_id) {
if (this.readyState == 4 && this.status == 200) {
console.log("yes");
console.log(this_item_id);
// document.getElementById(this_item_id).innerHTML = this.responseText;
$("#"+this_item_id).html(this.responseText);
}else{
console.log("no");
console.log(this_item_id);
}
}.bind(xmlhttp, item_id);
xmlhttp.open("GET","receivemsg.php?q="+item_id,true);
xmlhttp.send();
By the way, I don't understand why you're iterating twice on cusid_ele (you have two nested loops).

Related

Javascript value not visible in input field value

I have two forms on my page, and I want to pass the data from one input field to another input field using javascript. If the radio input is checked in the first form, the input value should get this value.
My forms:
<form name="news-form" action="p" method="post">
<section id="section-list" style="">
<hr class="solid">
<?php
$text = "";
$headline = "";
$shortdescription = "";
$description = "";
$linktext = "";
$link = "";
$newsID = "";
$xml=simplexml_load_file($xmlurl)or die("Kann keine Verbindung zu $xmlurl aufbauen");
foreach($xml->children() as $news):
$newsID = $news->ID;
?>
<div name="idsection" title ="<?php echo $newsID; ?>">
<section>
<div class="divID">
<label class="label-idnumber">Eintrag Nummer: <?php echo $news->ID; ?> </label>
<input id="NewsID" type="radio" name="NewsID" value="<?php echo $newsID; ?>"></input>
</div>
</section>
.
.
.
.
.
</form>
<form name="newsEntryBea-form" action="" method="post">
<section id="section-bea" style="">
<hr class="solid">
<section>
<div style="float:left;">
<label for="idnumberBea" class="label-header">Eintrag Nummer</label>
<input id="idnumberBea" name="idnumberBea" type="text" value="" readonly> </input>
</div>
</section>
.
.
.
.
.
</form>
My script code:
<script>
function inputToggle(e) {
var sectionnumbers = document.getElementsByName('idsection');
var sectionnumber;
var idnumbers = document.getElementsByName('NewsID');
var idnumber;
for(var i = 0; i < idnumbers.length; i++){
if(idnumbers[i].checked){
idnumber = idnumbers[i].value;
for(var i = 0; i < sectionnumbers.length; i++){
sectionnumber = sectionnumbers[i].title;
if(sectionnumber === idnumber){
document.getElementsByName('idnumberBea').value = idnumber;
console.log("Mein Text im Feld idnumberBea: " + document.getElementsByName('idnumberBea').value);
}
}
console.log("Meine NewsID Nummer: " + idnumber);
}
}
}
</script>
So in the console I get all my values correctly shown, but in the HTML form the value is not displayed.
Can anybody tell what is wrong here?
when you use getElementsByName it get element as an array so you should select the element you want in array like below code document.getElementsByName('idnumberBea')[0].value
var idnumber="hello world"
document.getElementsByName('idnumberBea')[0].value = idnumber;
<input type="text" name="idnumberBea">
You have built a loop inside a loop. in the inner loop you declare variable i again. give here another variable name. then i would think it is better to use let instead of var. To prevent a scope problem in such a case.
First of all, you should check you HTML structures of forms, like closing well the objects and check the input tags and how to use them, couse you are closing them when you should not.
Here is what i got with static values, you have to change the values fields with your php variables:
var radioInput_form1 = document.getElementById('NewsID')
var inputText_form2 = document.getElementById('idnumberBea')
radioInput_form1.addEventListener('click', function(){
inputText_form2.value = radioInput_form1.value
})
<form name="news-form" action="p" method="post">
<section id="section-list" style="">
<hr class="solid">
<div name="idsection" title ="The Title"></div>
<section>
<div class="divID">
<label class="label-idnumber">Eintrag Nummer: 15 </label>
<input id="NewsID" type="radio" name="NewsID" value="15">
</div>
</section>
.
.
.
.
.
</section>
</form>
<form name="newsEntryBea-form" action="" method="post">
<section id="section-bea" style="">
<hr class="solid">
<section>
<div style="float:left;">
<label for="idnumberBea" class="label-header">Eintrag Nummer</label>
<input id="idnumberBea" name="idnumberBea" type="text" value="" readonly>
</div>
</section>
</section>
</form>

Submit button stay in form after click

enter image description hereI want to stay in Form view after a click on submit button
I have a navigation bar with buttons:
<div class="bar blueGrey">
<button class="bar-item button tablink orange" onclick="openNavBarChoise(event,'HomePage')">Home</button>
<button class="bar-item button tablink" onclick="openNavBarChoise(event,'CVsPage')">CV</button>
<button class="bar-item button tablink" onclick="openNavBarChoise(event,'ContactPage')">Contact</button>
</div>
Javascript code:
function openNavBarChoise(evt, choiceName) {
var i, x, tablinks;
x = document.getElementsByClassName('choice');
for (i = 0; i < x.length; i++) {
x[i].style.display = 'none';
}
tablinks = document.getElementsByClassName('tablink');
for (i = 0; i < x.length; i++) {
tablinks[i].className = tablinks[i].className.replace(' orange', '');
}
document.getElementById(choiceName).style.display = 'block';
evt.currentTarget.className += ' orange';
}
when someone click on button Contact go to Contact Form. I want stay in this Form after click on submit, but this code return to HomePage.
<!--/*************** Begin Contact Page ***************/-->
<div id="ContactPage" class="container border choice" style="display:none">
<div class="panelChristos00">
<div class="ImgFPanel">
<img class="ImgPP" id="imgJob" src="Icons\contactSupport.png" alt="contactSupport" width="80px">
</div>
<div id="ergasia" class="firstLine">
<h2>Form</h2>
</div>
<div class="container">
<form id="form0" method="post" >
<div class="requiredM00">
<p style="color:red"><?php echo $requiredMessage;?></p><p style="color:blue"><?php echo $completeMessage;?></p>
</div>
<label for="name">Name <span class="error" style="color:red">*<?php echo $nameErr;?></span></label>
<input type="text" name="name" value="<?php echo $name;?>">
<label for="email">Email <span class="error" style="color:red">* <?php echo $emailErr;?></span></label>
<input type="text" name="email" value="<?php echo $email;?>">
<label for="phone">Phone <span class="error" style="color:blue"> <?php echo $phoneErr;?></span></label>
<input type="text" name="phone" value="<?php echo $phone;?>">
<label for="subject">Message <span class="error" style="color:red">*<?php echo $subjectErr;?></span></label>
<textarea id="subject" name="subject" style="height:200px" ><?php echo $subject; ?></textarea>
<input type="submit" value="Send">
</form>
</div>
</div>
</div>
by default form submit button submit the form to itself to stop this use evt.preventdefault() on form submit button
you could do this it will take you to new tab like you wanted
<form action="your file name">
<input type="text">
<input onclick="e.preventDefault()" type="submit" formtarget="_blank">
</form>
You wanna stay at the contact form and still send the form, right? you need to use ajax to be able to do that.
Attach event handler (on submit) to the form and preventDefault the event to prevent its default behaviour (like going back to the homepage)
var form_el = document.getElementById("form0");
form_el.addEventListener("submit", function(e) {
e.preventDefault(); // this will prevent the page from going back to homepage
var form = new FormData(this);
var XHR = new XMLHttpRequest();
XHR.open("POST", "server.php", true);
// response handler
XHR.onload = function () {
// do something with the response
if (xhr.status === 200) {
var userInfo = JSON.parse(xhr.responseText);
}
};
XHR.send(form);
});

Post data from one form in a while loop

I'm trying to post data from a single form in my PHP inside a while loop to another page using jQuery load. Currently when I view the output, only the first result gets to be submitted. When I click on the rest of the forms it keeps refreshing the page. How can I make all the forms to post unique data from my PHP page?
Here is my PHP script:
while (mysqli_stmt_fetch($select_product)): ?>
<div class="col-md-4 top_brand_left" style="margin-top:40px;">
<div class="hover14 column">
<div class="tm_top_brand_left_grid">
<div class="tm_top_brand_left_grid_pos">
</div>
<div class="tm_top_brand_left_grid1">
<figure>
<div class="snipcart-item block">
<div class="snipcart-thumb">
<img class="lazy" title="" alt="" src="/web/images/spinner.gif" data-original="/web/images/<?php echo $product_image; ?>">
<p><?php echo htmlentities($product_name); ?></p>
<h4><?php echo "₦".$product_price; ?><span></span></h4>
</div>
<div class="snipcart-details top_brand_home_details">
<form id="addToCart" method="post">
<fieldset>
<input type="hidden" name="id" id="id" value="<?php echo htmlentities($product_id); ?>">
<input type="submit" id="add_to_cart" name="add_to_cart" value="Add to cart" class="button">
</fieldset>
</form>
</div>
</div>
</figure>
</div>
</div>
</div>
</div>
<?php endwhile; ?>
Here is my jQuery script:
$("#addToCart").submit(function(event){
event.preventDefault();
var page = $("#page").val();
var id = $("#id").val();
var cat_id = $("#cat_id").val();
var res_name = $("#res_name").val();
var add_to_cart = $("#add_to_cart").val();
$("#feedback").load("/web/cart.php", {
page:page,
id: id,
cat_id: cat_id,
res_name: res_name,
add_to_cart: add_to_cart
});
});
Change all your ids for classes in your PHP loop.
Then on click, look for the closest .column to find the relevant element.
$(".addToCart").submit(function(event){
event.preventDefault();
var column = $(this).closest(".column");
var page = column.find(".page").val();
var id = column.find(".id").val();
var cat_id = column.find(".cat_id").val();
var res_name = column.find(".res_name").val();
var add_to_cart = $(this).val();
$("#feedback").load("/web/cart.php", { // This element is outside the PHP loop and has a unique id.
page:page,
id: id,
cat_id: cat_id,
res_name: res_name,
add_to_cart: add_to_cart
});
});

Scroll bottom does not work on ajax

So I found this piece of code and implemented it into my chat script. What it is meant to do is scroll to the bottom of the chat div which contains the messages of the specific chat. The chat is generated by a chat_generate() function which uses the xmlhttp protocol. The problem is that this gives me some errors. The code is as follows:
Html:
<button onclick="chat_generate(1);"></button>
JS:
function chat_generate(chat_id) {
var id = chat_id.toString();
var check_user_in = "#chat_"+id;
if($(check_user_in).length == 0) {
var open ="";
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myObj = JSON.parse(this.responseText);
/*var text = "Welcome to chat: "+myObj[1];*/
open = [
"<div class='full_wrap' id='chat_"+chat_id+"'> <div class='force-overflow'></div> <div id='nav_"+chat_id+"' class='chat_side'> <h2>Chat Settings & Info</h2> <a id='closebtn' href='javascript:void(0)'",
"class='closebtn' onclick='chat_closeNav("+chat_id+")'>×</a> <div class='authr' style='background-image:url("+myObj[3]+");'> <a> <div class='authr_img' style='background-image:url(pimages/"+myObj[8]+");'></div>​ </a> <form action='mypage.php' method='post'> <div ",
"class='authr_name'><button value='"+myObj[6]+"' name='userlink' class='subm_as_text'> "+myObj[6]+"</button></div> </form> </div> <div class='chat_info'> <div ",
"class='chat_descy'> <h2>Chat Description</h2> <div class='descc'> <h3>"+myObj[2]+"</h3> </div> </div> <div class='chat_fol'><h2>Chat users: 2</h2></div> <div class='chat_back'> <h2> ",
"Change Chat Wallpaper</h2> <form method='post' action='picture.php' enctype='multipart/form-data'> <input type='file' id='upload' class='custom-file-input' name='chat_wall'> <input type='submit' ",
"class='chat_wall_subm' value='Change'/> </form> </div> </div> <form method='post' action='chat.php' > <button class='chat_leave' name='chat_leave' value='$chat_index' >Leave Chat</button> </form> </div> <div class='chat_mnav'> ",
"<span onclick='chat_openNav("+chat_id+")'>☰</span> <i class='material-icons' id='chat_un_small' onclick='chat_un_small("+chat_id+")'>arrow_upward</i> <h1>"+myObj[1]+"</h1> <div class='chat_close' onclick='chat_close("+chat_id+")'><i ",
"class='material-icons' ></i></div> </div> <div class='conceal_wrapper'> <div class='msgs' style='background-image:url("+myObj[4]+")' id='"+chat_id+"'> </div> <form method='post' id='form_"+chat_id+"' class='comform'> <div class='chat_wcom' > <input maxlength='140' type = 'text' id='input_"+chat_id+"' class='comin' placeholder='My message...' name='sendmsg' onkeypress='g(event,"+chat_id+")' ",
"autocapitalize='off' autocorrect='off' /> <input class='hidden_index' type='text' value='"+chat_id+"' name='chat_index'/> </div> </form> </div> <div class='chat_enlarge'> <div class='chat_enlarge_full' onmouseover='chat_action(this)' onmouseout='chat_action_negative(this)' ",
"onclick='chat_enlarge_full("+chat_id+")'></div> <div class='chat_enlarge_standard' onmouseover='chat_action(this)' onmouseout='chat_action_negative(this)' onclick='chat_enlarge_standard("+chat_id+")'></div> <div ",
"class='chat_enlarge_small' onmouseover='chat_action(this)' onmouseout='chat_action_negative(this)' onclick='chat_enlarge_small("+chat_id+")'></div><div class='chat_enlarge_close' onmouseover='chat_action(this)' onmouseout='chat_action_negative(this)' onclick='chat_close("+chat_id+")'></div> </div></div>"
].join("\n");
var cusid_ele = document.getElementsByClassName('open_chat');
if(cusid_ele.length == 0){
alert("No more chat space");
}else{
if($(cusid_ele[0]).replaceWith(open)){
draggables();
startf();
}
}
}
chat_enlarge_standard(chat_id);
scrollOpen(chat_id);
};
xmlhttp.open("GET", "receivechatinfo.php?id="+id, true);
xmlhttp.send();
}else{
alert("The chat is already open");
}
}
function scrollOpen(id) {
var elem = document.getElementById(id);
elem.scrollTop = elem.scrollHeight;
}
I believe that the problem is that the chat html is inserted in place of the open_chat div before the function is called resulting in an error of cannot make something to value of null. But I do not know how to solve this problem in the following case.
Any help would be appreciated.

Reload PHP code after Ajax

i am still learning here folks, so excuse my code if its messy.
I have 3 separate pages as follow:
AccountView.php---Where the data is shown:
<div class="panel-body">
<div id="opentasks">
<!-- view Open tasks -->
<?php $task= new acct; echo $task->accountActiveTasks()?>
</div>
<!-- end view open tasks -->
<!-- start adding quick task -->
<div class="chat-form">
<!-- <form method="post" action="addTask.php"> -->
<div class="input-cont ">
<input type="text" class="form-control col-lg-12" placeholder="Add a quick Task..." name ="quicktask" id="quicktask">
</div>
<div class="form-group">
<div class="pull-right chat-features">
<a href="javascript:;">
<i class="icon-camera"></i>
</a>
<a href="javascript:;">
<i class="icon-link"></i>
</a>
<input type="submit" class="btn btn-danger" name="AddTask" value="Add" onclick="add_quick_task()">
<input type="hidden" name="acct" id="acct" value="<?php echo $_REQUEST['acctname']?>">
<input type="hidden" name="user" id="user" value="<?php $username = $_SESSION['username']; echo $username?>">
</div>
</div>
tasks.js --> graps one input from AccountView.php
function add_quick_task(){
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}else{
xmlhttp = new ActiveXObject("microsodt.XMLHTTP");
}
var acct = document.getElementById('acct').value;
var quicktask = document.getElementById('quicktask').value;
// var taskstatus = 'Active';
var user = document.getElementById('user').value;
xmlhttp.onreadystatechange = function(){
if (xmlhttp.readyState==4) {
document.getElementById('panel-body').innerHTML = xmlhttp.responseText;
}
}
url = "addTask.php?acct="+acct+"&quicktask="+quicktask+"&user="+user;
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
account_functions.php ---Where the PHP function gets the data from mysql
public function accountActiveTasks(){
$varacctname = $_REQUEST['acctname'];
$varViewActiveTasks = mysql_query("SELECT * from tasks WHERE taskresource='$varacctname' && taskstatus='Active'");
while ($rows= mysql_fetch_array($varViewActiveTasks)) {
$this->accttask = $rows['tasktitle'];
$this->acctTaskStatus = $rows['taskstatus'];
$this->acctTaskOwner = $rows['taskowner'];
echo "<div class=\"timeline-messages\">
<div class=\"msg-time-chat\">
<img class=\"avatar\" src=\"img/chat-avatar.jpg\" alt=\"\">
<div class=\"message-body msg-in\">
<span class=\"arrow\"></span>
<div class=\"text\">
<p class=\"attribution\">$this->acctTaskOwner at 1:55pm, 13th April 2013</p>
<p> $this->accttask</p>
</div>
</div>
</div>
<!-- /comment -->
</div>";
}
My goal is that every time the tasks.js runs, the php code in AccountView.php is refreshed. sort of like appending the data. Currently the data gets pushed to the mysql table but i have to refresh to see it. I would like for it to show automatically on success.
Try it
window.location.reload();
What is panel-body that is a class.In the response you are adding response to it i think your intention is to have id="panel-body"
If you want to append the response to the "panel-body" Div you may use this jquery statement
if (xmlhttp.readyState==4) {
$('#panel-body').append(xmlhttp.responseText);
}

Categories

Resources