Pass value to another page using jquery

Question

Hi, this is my first time to post here. I have a problem on my jquery script. My goal is, I need to send values of a certain link to another page, so that the other page can use the value. I think using ajax post can do the job but I cant get any result. Here is my code:

$(function() {
    var myLink = $('#link');

    $('.class').click(function() {
        var cell1 = $(this).closest('tr').find('td:eq(4)').text();
        var cell2 = $(this).closest('tr').find('td:eq(3)').text();
        var cell3 = $(this).closest('tr').find('td:eq(2)').text();

        var data = 'cell1=' + cell1 + '&cell2=' + cell2 + 'cell3=' + cell3;

    });
});

So I want to know how can I send those value to another page just by clicking the table cell using ajax post. I want to display open it to a new window.

I hope you can help me with this, thank you very much in advance. ;)

Answer 1

If you are posting the values you will have to store them serverside till you reach the other page, another way of doing it would be like this (assuming #link is the link)

$(function() {
    var myLink = $('#link');

    $('.class').click(function() {
        var cell1 = $(this).closest('tr').find('td:eq(4)').text();
        var cell2 = $(this).closest('tr').find('td:eq(3)').text();
        var cell3 = $(this).closest('tr').find('td:eq(2)').text();

        var data = 'cell1=' + cell1 + '&cell2=' + cell2 + 'cell3=' + cell3;
        var baseUrl = "some.page.php" //could be anything
        myLink.attr('href',baseUrl+"?"+data).click();
    });
});

Now, in order to open it in a new window, you could use the old target="_blank" (on #link solution or look up one of the other more proper javascript ways

Answer 2

Data in URLs must be properly escaped. I suggest you store it in an object and let jQuery take care of the dirty details:

// Untested
var tr = $(this).closest('tr');
var data = {
    cell1: tr.find('td:eq(4)').text(),
    cell2: tr.find('td:eq(3)').text(),
    cell3: tr.find('td:eq(2)').text()
};

Then, pick your favourite AJAX function and feed it with your object.

Update

$('.class').click(function() {
    var tr = $(this).closest('tr');
    var url = 'other-page.html';
    var data = {
        cell1: tr.find('td:eq(4)').text(),
        cell2: tr.find('td:eq(3)').text(),
        cell3: tr.find('td:eq(2)').text()
    };

    $("#load-stuff-here").load(url, data);
});