Change PHP Function Argument with AJAX - php

Question

I'm trying to update information from a PHP function on the fly. I use a PHP function on my page:
main();
main() works like:
function main() {
global $news;
$news = api($news);
}
When someone clicks a different 'News' topic on my menu, I want to refresh main() with AJAX to reflect the new news category request. Racking my brain and Stack, I'm not sure where the slip up is. The AJAX request originates from this list:
<div class="mainleft">
<ul>
<li>World News</li>
<li>Sports</li>
</ul>
</div>
My JS looks like the following (adding the alert at the end to try and debug the variable):
$(document).ready(function() {
$(".mainleft > ul > li").click(function(){
$.ajax({
type: "POST",
url: "/includes/ajax.php",
data: $(this).text(),
success: function(msg){
alert($(this).text()); // this alert fires but the result is blank
}
});
});
});
ajax.php looks like:
if ($_POST) {
$news = $_POST;
}
I've tried GET with the same results, so it's something fundamental I'm doing wrong.
UPDATE #1:
Somebody suggested a fix and then deleted the reply, but another member suggested the same fix in a comment. The fix didn't work but they clarified that I need a key/val pair for the POST which changed my javascript to:
data: { news: $(this).text() },
and then my ajax.php to:
if (isset($_POST['news'])) {
$news = $_POST['news'];
}
UPDATE #2:
Thanks to #Sean I understand that I was displaying my debug alert improperly, adding the following to the javascript corrected that and now alerts the proper list item:
context: this
But the PHP function still isn't updating.

Answer 1

Your $(this) in alert($(this).text()); inside your $.ajax is out of scope. You can either save to a var before your ajax call, and reference the var -
$(".mainleft > ul > li").click(function(){
var liText = $(this).text();
$.ajax({
type: "POST",
url: "/includes/ajax.php",
data: liText,
success: function(msg){
alert(liText);
}
});
});
or use context ajax option -
$(".mainleft > ul > li").click(function(){
$.ajax({
type: "POST",
url: "/includes/ajax.php",
context: this,
data: $(this).text(),
success: function(msg){
alert($(this).text());
}
});
});
Note: as #Mark B mentioned, your data should have a key to be able to access in php -
$(".mainleft > ul > li").click(function(){
$.ajax({
type: "POST",
url: "/includes/ajax.php",
context: this,
data: {key: $(this).text()},
success: function(msg){
alert($(this).text());
}
});
});
reference: https://stackoverflow.com/a/1570160/689579 https://stackoverflow.com/a/8070183/689579
jsFiddle: http://jsfiddle.net/h2FLg/ (examples of saving $(this) to var, context:, and out of scope)