80

I am trying to use the jQuery POST function but it is handling the request in AJAX style. I mean it's not actually going to the page I am telling it to go.

$("#see_comments").click(function() {
    $.post(
        "comments.php", 
        {aid: imgnum}, 
        function (data) {

        }
    );
});

This function should go to comments.php page with the aid value in hand. It's posting fine but not redirecting to comments.php.

@Doug Neiner Clarification:

  1. I have 15 links (images). I click on a link and it loads my JavaScript. The script knows what imgnum I opened. This imgnum I want in the comments.php. I have to use this JavaScript and no other means can do the trick. The JavaScript is mandatory

  2. Your method successfully POSTs the aid value. But in the comments.php when I try to echo that value, it displays nothing.

  3. I am using Firebug. In the Console, it shows the echo REQUEST I made in Step (2) successfully.

informatik01
  • 16,038
  • 10
  • 74
  • 104
amit
  • 10,133
  • 22
  • 72
  • 121

6 Answers6

135

I know what you are trying to do, but its not what you want.

First, unless you are changing data on the server, don't use a POST request. Just have #see_comments be a normal <a href='/comments.php?aid=1'>...

If you have to use POST, then do this to get the page to follow your call:

$("#see_comments").click(function() {
  $('<form action="comments.php" method="POST">' + 
    '<input type="hidden" name="aid" value="' + imgnum + '">' +
    '</form>').submit();
});

How this would actually work.

First $.post is only an AJAX method and cannot be used to do a traditional form submit like you are describing. So, to be able to post a value and navigate to the new page, we need to simulate a form post.

So the flow is as follows:

  1. You click on the image, and your JS code gets the imgnum
  2. Next, someone clicks on #see_comments
  3. We create a temporary form with the imgnum value in it as a hidden field
  4. We submit that form, which posts the value and loads the comments.php page
  5. Your comments.php page will have access to the posted variable (i.e. in PHP it would be $_POST['aid'])
Doug Neiner
  • 65,509
  • 13
  • 109
  • 118
  • the aid value is coming from the DB. so i would really like the jquery thing to work. as i need my Javascript too. – amit Jan 13 '10 at 05:59
  • @amit, in the code you post, the `aid` value is not coming from the database it is being *sent* to the AJAX request. Have you not posted your whole function? – Doug Neiner Jan 13 '10 at 06:01
  • @amit, then your question is not clear. My code POST's the imgnum to the `comments.php` file AND redirects at the same time. What else are you wanting it to do? – Doug Neiner Jan 13 '10 at 06:07
  • @amit, I am not disagreeing with you where `imgnum` comes from, its just that my answer parallels your code exactly except it with the redirect. Just try swapping out the `$('form... .submit();` call with your `$.post` and see if it doesn't do exactly what you want. – Doug Neiner Jan 13 '10 at 06:14
  • it redirects to comments.php. but it does not echo the POSTed value. but it shows the echo response in firebug console. – amit Jan 13 '10 at 06:16
  • @amit. I really think I can help you with this, but you need to provide more info in your question (please edit it to add). We need to know what steps you want, and the expected result. i.e.: "1. The id is submitted to `comments.php`, 2. I expect the returned value to display like this..." – Doug Neiner Jan 13 '10 at 06:20
  • @amit, thanks for the clarification. Based on what you provided, my updated answer would not have worked for you. I am going to provide explanation around how my original answer works so maybe it makes more sense. – Doug Neiner Jan 13 '10 at 06:29
  • @amit Ok, I have posted an explanation with a walk through. Am I missing anything you need to have happen? – Doug Neiner Jan 13 '10 at 06:33
  • this function makes the link unclickable. i mean when i click on the link nothing happens. – amit Jan 13 '10 at 19:27
  • OK, I'll take a look at it put together a test. Maybe I left something out. – Doug Neiner Jan 13 '10 at 20:20
  • 15
    You should append the form to the DOM because IE and Firefox would ignore the submit otherwise (if you want to add more, non-hidden fields - e.g. text inputs - then a .hide() call would also be needed before .appendTo() to avoid any jumping in the content) – Gábor Nagy Dec 05 '13 at 10:52
  • Doesn't Work. Check the below answer by @devside for a working version. – Emadpres Jul 03 '18 at 02:39
63
$("#see_comments").click(function () {
    $('<form action="comments.php" method="POST"/>')
        .append($('<input type="hidden" name="aid">').val(imgnum))
        .appendTo($(document.body)) //it has to be added somewhere into the <body>
        .submit();
});
Erik Rothoff
  • 4,826
  • 9
  • 41
  • 59
devside
  • 2,171
  • 1
  • 19
  • 23
  • 7
    This should be combined into the accepted answer. Without the form in the DOM it will not submit in Firefox and potentially other browsers. – JadedCore Apr 12 '17 at 14:44
  • It gives an error without this code in Edge also, smth like "Form submission canceled because the form is not connected". The above mentioned solution works. – Undry Jan 04 '21 at 07:24
10

While the solution by Doug Neiner is not only correct but also the most comprehensively explained one, it has one big problem: it seems to only work at Chrome.

I fidgeted around for a while trying to determine a workaround, and then stumbled upon the second answer by devside. The only difference is the extra code appendTo($(document.body)). Then I tested it in firefox and it worked like a charm. Apparently, Firefox and IE need to have the temporary form attached somewhere in the DOM Body.

I had to do this implementation for a Symfony2 project, since the path generator inside the .twig templates would only work with GET parameters and messing with the query string was breaking havoc with the security of the app. (BTW, if anyone knows a way to get .twig templates to call pages with POST parameters, please let me know in the comments).

devside
  • 2,171
  • 1
  • 19
  • 23
Mario Eduardo Castillo
  • 101
  • 1
  • 2
4

i think what you're asking is to get to 'comments.php' and posting aid with value imgnum. The only way to do this is to submit this value with a form.

However, you can make this form hidden, and submit it on an arbitrary click somewhere with jquery.

html necessary (put anywhere on page):

<form id='see_comments_form' action='comments.php' action='POST'>
    <input id='see_comments_aid' type='hidden' name='aid' value=''>
</form>

js necessary:

$("#see_comments").click(function(){
    $('#see_comments_aid').val(imgnum);
    $('#see_comments_form').submit();
);

this will redirect to 'comments.php' and send the proper value imgnum (that i assume you are getting from somewhere else).

helloandre
  • 10,541
  • 8
  • 47
  • 64
-1

Actually, $.post() sends some data to the server. It does not cause any redirection unless you do it in your server side code which handles the POST request. I can suggest two solutions:

  1. To go to comment page, instead of using JQuery post, you can simply use a 'anchor' tag - <a href="comments.php?aid=1">Show Comments</a>.
  2. Or if you are want to go through JQuery, you can use this code snippet: $(location).attr("href", "comments.php?aid=1");
Veera
  • 32,532
  • 36
  • 98
  • 137
-2

didnt exactly solve the problem. but did manage to work around it. i had to do a lot modification to the JS to make this work, but the core problem of this question was solved by doing this:

    $("#see_comments").attr({href: "comments.php?aid='"+imgnum+"'"});

this appended the aid value to the URL as @Doug Neiner initially suggested me to do. Thanks a lot Doug for all the effort. I really appreciate. +1 and accept to your answer for the effort.

amit
  • 10,133
  • 22
  • 72
  • 121