Change PHP Function Argument with AJAX

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.

is `$(".mainleft > ul > li")` supposed to be `$(".main > ul > li")` to select your `
` — Sean, Feb 16 '14 at 05:40
-1 for the not putting any research effort into your question. — Ryan, Feb 16 '14 at 05:41
Ah sorry guys! Yes that's a typo (here, not in the actual code), the class is 'mainleft' and I've updated it. — Paul, Feb 16 '14 at 05:42
have you checked your console / developer tools to see if the ajax is being called? — Sean, Feb 16 '14 at 05:45
@Sean - I've added the alert to 'success:' which does fire, that would demonstrate that the AJAX is calling, correct? — Paul, Feb 16 '14 at 05:47
@Paul you're right, the success does it mean the ajax call worked, but still you're server code could failed, in the console/dev tools maybe you're getting an error 500,404, in the success callback you're just alerting a dom node that does not say any about your server code result. In other words a success AJAX call, does not always mean a success in your server code — Allende, Feb 16 '14 at 05:52
You never mentioned in your question that the alert fires. So, can you clarify what is not working? You are not doing anything with `msg` -> `success: function(msg)`. Add that to your alert() to see the returned value? — Sean, Feb 16 '14 at 05:53
@Sean - sorry, I clarified that the alert fires. Network shows the ajax being called every time I click and Console doesn't throw any errors — Paul, Feb 16 '14 at 05:55
you need to send a key:value pair in your `data` parameter, otherwise php won't have anything to stuff into _GET/_POST. `data: {key:$(this).text()}`, then `$_GET['key']` — Marc B, Feb 16 '14 at 06:02
@MarcB, someone else actually suggested that in a reply and then deleted the response, I tried updating that and still didn't work. I'll update my post now to account for that suggestion — Paul, Feb 16 '14 at 06:11

score 0 · Answer 1 · edited May 23 '17 at 10:31

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)

Thanks for the clarification with the alert - it's now displaying the proper alert. But still not updating the PHP function for some reason, I'll keep digging... — Paul, Feb 16 '14 at 06:24

Change PHP Function Argument with AJAX

1 Answers1