How do I post to a new php page with jquery

Question

I am trying to post the element information that jQuery pulls, when a user clicks on table cell, to a new page that will use that information (an id in this case) in a sql query. ie, the user clicks a cell and the job he/she clicks has an id of 25, that is to be passed to my php page that queries the database for the job with that id and then populates the page with said information. The user can then alter the information from the query and submit it to update the database table. I have the id from the click function and a success alert tells me that the info was posted. The problem is that when the page is opened it states that the posted name index is undefined. Here is my script to get the information:

        <script>
        $(document).ready(function()
        {
            $("table.jobs tbody td#job").click(function()
            {
                var $this = $(this);
                var col   = $this.text();
                var LeftCellText = $this.prev().text();
                if (col == '')
                alert("Please pick another column");
                else
                $.ajax(
                {
                    type:"POST",
                    url:"../php/jobUpdate.php",
                    data:"name=" + LeftCellText,
                    success: function()
                    {
                        window.location = "../php/jobUpdate.php";
                    }
                });
            });
        });
    </script>

and here is the simple php page it is sending to:

$name = $_POST['name'];
echo $name;

I am new to jQuery, and I cannot figure out why this is not working?

Answer 1

When you use ajax, the second page ../php/jobUpdate.php processes the data sent by the first page, and returns a value (or even a huge string of html, if you want).

The first page receives the new data in the ajax routine's success function and can then update the current page. The updating part happens in the success: function, so you're on the right track.

But in your success function, you are redirecting the user to the 2nd page -- after already being there and processing the data. Redirecting them is probably not what you want to do.

Try replacing this:

                success: function()
                {
                    window.location = "../php/jobUpdate.php";
                }

with this:

                success: function(data)
                {
                    alert(data);
                }

If you want to see how to update the first page with the data received via ajax, try adding an empty DIV to your html, like this:

<div id="somestuff"></div>

Then, in the success: function of the ajax routine, do this:

$('#somestuff').html(data);

(Note that the term "data" can be any name at all, it only needs to match the name used in the function param. For example:

success: function(whatzup) {
    alert(whatzup);
}

Answer 2

On your success function causing the window to reload will delete any of the variables passed in via .ajax.

What you can try is returning the data and use it in the existing page.

success: function(msg) {
     $('#someDiv').append(msg);
}

Answer 3

The reason the index is not defined is because you are using a string in the data-argument, however, that is actually an array-like object. :)

data: { name: col }

that should be the line you need to change. Otherwise I have not seen any problems. Also if I can give you a little idea, I wouldn't use POST actually. In fact, I'd use GET. I can not confirm if that is saver or not, but using $_SERVER["HTTP_REFFERER"] you can check from where that request is coming to determine if you want to let it pass or not.

The way I would suggest is, that you sent the ID in a GET-request and have the PHP code return the data using json_decode() . Now in jQuery, you can use $.getJSON(url, function(data){}) - which is, for one, shorter and a bit faster.

Since you probably will crop the URL yourself here, make sure that you use a function like intVal() in JS to make sure you are sending an intenger instead of a malicious string :)

Answer 4

From your comment to my previous post, it seems that you don't need ajax at all. You just need a form in your HTML:

<form id="MyForm" action="../php/jobUpdate.php" method="POST">
    <input type="hidden" id="jobID" name="yourJobID">
</form>

Note that forms are invisible until you put something visible inside them.

You can have select controls (dropdowns) in there, or all form elements can be invisible by using hidden input fields (like the HTML just above), which you can populate using jQuery. Code to do that would look something like this:

    <script>
    $(document).ready(function() {
        $("table.jobs tbody td#job").click(function() {
            var $this = $(this);
            var col   = $this.text();
            var LeftCellText = $this.prev().text();

            //Set value of hidden field in form. This is how
            //data will be passed to jobUpdate.php, via its `name` param
            $('#jobID').val(LeftCellText); 

            if (col == '')
                alert("Please pick another column");
            else
                $('#myForm').submit();
        });
    });
</script>

If you add more values to your form to send over to jobUpdate.php, just ensure that each element has a name, such as <input type="text" name="selectedJobType"> (this element, type="text", would be visible on screen).

In the jobUpdate.php file, you would get these values thus:

$SJT = $_POST['selectedJobType'];
$id = $_POST["yourJobID"];

//Use these vars in MySQL search, then display some HTML based on results

Note that the key referenced in the $_POST[] array (selectedJobType / yourJobID) is always identical to the name specified in the HTML tag. These names are case sensitive (and spelling counts, too).

Hope this isn't TMI, just wish to cover all the bases.