'JQuery Ajax not passing variables to PHP
I want to pass some variables about a specific chat in order to pull all the chat messages from the database using JQuery and Ajax. I have a list with hidden inputs for each conversation/chat like so:
<ul class="userlist">
<li class="thisuser">
<div class="thisuserimg"><img src="images/userpics/user1.png" alt=""/></div>
<div class="thischatdets">
<p class="thischatuser"><span>This is my username buddy</span><span>Mar 09</span></p>
<b class="thischatad"><span>Closed</span>This is my ad title buddy</b>
<p class="thischatmsg">This is the last msg in the chat buddy</p>
</div>
<input type="text" class="abtitem" value="has-itemid" />
<input type="text" class="abtbuyer" value="has-userid" />
<input type="text" class="abtseller" value="has-userid" />
</li>
<li class="thisuser">
<div class="thisuserimg"><img src="images/userpics/user1.png" alt=""/></div>
<div class="thischatdets">
<p class="thischatuser"><span>This is my username buddy</span><span>Mar 09</span></p>
<b class="thischatad"><span>Closed</span>This is my ad title buddy</b>
<p class="thischatmsg">This is the last msg in the chat buddy</p>
</div>
<input type="text" class="abtitem" value="has-itemid" />
<input type="text" class="abtbuyer" value="has-userid" />
<input type="text" class="abtseller" value="has-userid" />
</li>
<li class="thisuser">
<div class="thisuserimg"><img src="images/userpics/user1.png" alt=""/></div>
<div class="thischatdets">
<p class="thischatuser"><span>This is my username buddy</span><span>Mar 09</span></p>
<b class="thischatad"><span>Closed</span>This is my ad title buddy</b>
<p class="thischatmsg">This is the last msg in the chat buddy</p>
</div>
<input type="text" class="abtitem" value="has-itemid" />
<input type="text" class="abtbuyer" value="has-userid" />
<input type="text" class="abtseller" value="has-userid" />
</li>
<ul>
I have a couple of ajax requests on this page like so:
$(document).ready(function(){
//Send Message
$("#newmsg").submit(function(e){
$.ajax({
type: "POST",
url: "server/server.php",
data: $("#newmsg").serialize(),
success:function(data){
console.log(data);
}
});
e.preventDefault();
});
//Autoreferesh Userlist
setInterval(function() { // this will execute the function every 1s
let url = "server/test.php";
$.get(url, function(d) { // jquery function that 'does' the GET request
$('.userlist').html(d) // when we have a returned request, populate the element above with the body of the returned request ( plain text )
});
}, 3000);
//Load chat messages
$("ul.userlist").on("click","li", function(){
//alert("Chat content loaded successfully!");
//alert($(this).find(".thischatuser span").text());
var abtitem=$(this).find(".abtitem").val();
var abtbuyer=$(this).find(".abtbuyer").val();
var abtseller=$(this).find(".abtseller").val();
event.preventDefault();
$.ajax({
url:"server/test.php",
method:"POST",
data:{abtitem:abtitem, abtbuyer:abtbuyer, abtseller:abtseller},
cache:false,
success:function(data){
let url = "server/test.php";
$.get(url, function(data) { // jquery function that 'does' the GET request
$('.chatarea').html(data) // when we have a returned request, populate the element above with the body of the returned request ( plain text )
});
}
});
});
});
Now, the "Load chat messages" code is responsible for the post and display of the data I need, and it seems to be working because I'm receiving a response from the server. However, the server response shows that the post variables are not sent. Note: Have tried nearly all the available answers on SO but none of them works!
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
