Using JQuery to do a GET request with POST variables

Question

I want to call a url from an onclick event and pass it POST variables. I do not want to do this via hidden inputs and a form submit. Of course I want to do this using jquery.

The url will have to be loaded into a popup window.

The question, since I am a jquery newbie, is how?

Answer 1

Take a look at the $.post function. This will send an AJAX request to your chosen URL, but unlike a regular form submission, it won't reload or change the current page.

---

Edit responding to comments:
You could fudge it by dynamically creating a form with a hidden input for each variable. Set the form's target to "_blank" and then submit it and that should open your other page in a new window.

$('#myLink').click(function() {
    var $f = $('<form></form>')
        .attr({
            method : 'post',
            target : '_blank',
            action : 'myOtherPage.php'
        })
        .appendTo(document.body)
    ;
    var myHiddenVariables = {
        id : 17,
        name : "Joe Bloggs"
    };
    for (var i in myHiddenVariables) {
        $('<input type="hidden" />')
            .attr({
                name : i,
                value : myHiddenVariables[i]
            })
            .appendTo($f)
        ;
    }
    $f[0].submit();
    return false;
});

Answer 2

The following will make an AJAX post to the server with two parameters. In the callback function it opens a popup and populates it with the returned html.

$("#aLink").click(function()
{
    $.post("some_url", {param1:"foo", param2:"bar"}, function(html)
    {
     newWindow= window.open ("","newwindow","menubar=1,resizable=1,width=350,height=250");
     newWindow.document.write(html);
    });

    return false;
});