One DIV, multiple UI's, AJAX, and PHP

Question

Hello

I'd like to use a single DIV section, have the remote PHP script send a different UI depending on how it was called, and then have AJAX (jQuery) update the DIV accordingly.

As a newbie, in the JavaScript/AJAX part, I don't really know how to check which UI the user is currently working with, which I need to know to be able to call the PHP script with the right parameters.

Here's some pseudo-code:

<?php

    print "<div id='target'>";

    if($authenticated) {
        //Check status of user in DB
        if($subscribed) {
            print "<input type='button' id='mybutton' value='Unsusbcribe'/>";
        else {
            print "<input type='button' id='mybutton' value='Susbcribe'/>";
        }
    } else {
        print "Username <input type='button' id='username' value=''/>";
        print "Password <input type='password' id='password' value=''/>";
        print "<input type='button' id='mybutton' value='Logon'/>";
    }

    print "</div>";

?>

<script type="text/javascript" src="<?php echo $JQUERY['jquery.js']; ?>"></script>
<script type='text/javascript'>

//All buttons point to this event
$(function() {
    $(':button').click(function() {
        //How were we called?
        switch($(#mybutton))
            {
            //Remote server sends new UI, and AJAX updates DIV locally
            case 'Subscribe':
                    $(#target).html = ajax.post("index.php?action=subscribe");
            case 'Unsuscribe':
                    $(#target).html = ajax.post("index.php?action=unsubscribe");
            case 'Logon':
                    $(#target).html = ajax.post(username : $username, password: $password; "index.php?action=logon");
            }
    });
});

</script>

Thank you for any hint.

---

Edit: For those wanting to use the same method to POST data:

var username = $("#username").val();
$("#target").load("myscript.php", {username : username});

Answer 1

you could do it like this

{   
     case 'Subscribe':
         $("#" + targetId).load("index.php?action=subscribe");
         break;
     case 'Unsubscribe':
         $("#" + targetId).load("index.php?action=unsubscribe");
         break;

.... for more info, see: http://api.jquery.com/load/