How can I send POST data and navigate with JQuery?

Question

On my blog I have a lot of <pre> blocks containing code snippets.

What I want to do is add a .click() handler to all the <pre> elements on the page which will send its content to another page - let's call it viewcode.php - via POST.

I know how to send information to this page using $.ajax, I'm just not sure how to send the information and navigate to the page.

The idea is that visitors can click a <pre> which will navigate to another page containing the code on its own for readability and easy copy / paste.

I have a feeling the solution is dead simple and probably obvious, I just can't think of it.

Is there a reason you can't call a load page function in your success handler for the $.ajax call (which, I assume, is trigged on click)? — Elliot Bonneville, Mar 22 '12 at 23:18
Heh. Maybe I don't understand what you mean, but I assume that your POST will send the information to this new page. Once the new page gets the info, you can then redirect your browser to said new page, right? — Elliot Bonneville, Mar 22 '12 at 23:22
Does it have to be POST? If you use GET you could just do window.location = URL + yourInfoYouWantToSend — Eddie Monge Jr, Mar 22 '12 at 23:53

tvanfosson · Accepted Answer · 2012-03-22T23:30:12.900

11

Not sure I would handle it this way, probably I would simply pop up a dialog with the code rather than leave the page, but you could handle this by building a form using javascript then triggering a submit on that form instead of using AJAX.

Using dialogs with jQuery UI:

 $('pre').on('click', function() {
      $('<div title="Code Preview"><p>' + $(this).text() + '</p></div>').dialog({
          ... set up dialog parameters ...
      });
 });

Build a form

 $('pre').on('click', function() {
      var text = $(this).text();
      $('<form class="hidden-form" action="something.php" method="post" style="display: none;"><textarea name="code"></textarea></form>')
          .appendTo('body');
      $('[name="code"]').val(text);
      $('.hidden-form').submit();
 });

edited Mar 22 '12 at 23:30

answered Mar 22 '12 at 23:24

tvanfosson

524,688
99
697
795

4

*sigh* I was hoping the form solution wouldn't be the only one. – Marty Mar 22 '12 at 23:44
Well, you could simply post the data via AJAX then replace then entire body element with the result, but how is that different than simply posting to a new page (except the URL doesn't change?) – tvanfosson Mar 22 '12 at 23:50
True, I'll play around with different solutions / combinations of solutions. – Marty Mar 22 '12 at 23:56

score 1 · Answer 2 · answered Mar 22 '12 at 23:21

1

You could use a hidden <form> element. Then set the onclick() attribute of the <pre> to copy the value from the <pre> to the form. Optionally, you can set the action attribute to select the page you'd like to post the information to. Finally, submit that form.

I know it's not elegant, but it'll work.

answered Mar 22 '12 at 23:21

Jeff Lamb

5,755
4
37
54

Hmm.. This was my "fall-back" idea if JQuery didn't have an inbuilt and less-cluttered way of approaching it. – Marty Mar 22 '12 at 23:22
Since $.post() is a shorthand way of calling $.ajax(), I think by default you cannot redirect. You could use a callback for your $.post() call to change the `location.href` to the value passed into your callback. The page probably wouldn't have the post data at that point, though, unless you saved it off somehow. The hidden form is the way I've always done it, and isn't too ugly. – Jeff Lamb Mar 22 '12 at 23:33

score 0 · Answer 3 · answered Sep 07 '13 at 00:39

Yes, you have to create a form and submit it. You can do all sorts of things with ajax posts/gets but the only way to navigate to a post result is via an actual form post. Here is concise version of it:

$('<form style="display: none;"/>').attr('action', action).html(html).appendTo('body').submit();

My code does this:

// Navigate to Post Response, Convert first form values to query string params:
// Put the things that are too long (could exceed query string limit) into post values
var form = $('#myForm');
var actionWithoutQueryString = form[0].action.split("?")[0];
var action = actionWithoutQueryString + '?' + $.param(form.serializeArray());
var html = myArray.map(function(v, i) { return "<input name='MyList[" + i + "]' value='" + v + "'/>"; }).join("\n");
$('<form style="display: none;"/>').attr('action', action).html(html).appendTo('body').submit();

score 0 · Answer 4 · answered Mar 22 '12 at 23:24

If your code snippets are stored somewhere in a database or files, I suggest you just link the snippets to a page where you get the snippet based on some identifier.

If the snippets are only contained in your html, and you just want to display them in a cleaner way, you shouldn't need any ajax posting. You might want to Use a hover div or a jquery plugin, that pop's up and shows a cleaner piece of code obtained from the pre element, something like:

$('pre').click(function() {
   var code = $(this).html(); //this is the pre contents you  want to send
   $('#hoverDiv').html(code).show();
});

How can I send POST data and navigate with JQuery?

4 Answers4

Linked