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.

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.

• javascript
• jquery
• post

• 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 Commented Mar 22, 2012 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 Commented Mar 22, 2012 at 23:22
• Does it have to be POST? If you use GET you could just do window.location = URL + yourInfoYouWantToSend – Eddie Monge Jr Commented Mar 22, 2012 at 23:53

4 Answers 4

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();
 });

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.

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();
});

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();