0

I need to post a large amount of data to a URL (say /generate-pdf) via ajax. The server returns the generated report in pdf format(not a file but a stream). How can I open a new window to show the content. For a GET request, it's as easy as doing the following: 

<a href="/generate-pdf?from=xxxx-xx-xx&to=yyyy-yy-yy" target="_blank" >Report from x to y</a>

But I need to do a POST because of the size of the data being sent to the server. Thanks.

Kola
  • 389
  • 1
  • 5
  • 10
  • See: [How to open a new window on form submit](http://stackoverflow.com/questions/896724/how-to-open-a-new-window-on-form-submit) and [JavaScript post request like a form submit](http://stackoverflow.com/questions/133925/javascript-post-request-like-a-form-submit?rq=1) – Roberto Apr 03 '16 at 20:34
  • @Roberto, thanks for the pointer. Using the target attribute of the Form element (as suggested in the post you referenced), I did what I'm about to post as an answer since it worked for me. – Kola Apr 04 '16 at 15:45

2 Answers2

0

When you open a new window, it makes a get request to the url.

You should get a url with information about which pdf is requested and then load a page from the server with that pdf.

Does it help?

atefth
  • 1,579
  • 12
  • 24
  • thanks but that does not help. I'm already doing that for very specific cases when a simple GET does the trick. But as I said in the problem statement, I need to do a POST because at times the amount of data sent to server exceeds the limit allowed for a GET request. – Kola Apr 03 '16 at 20:22
  • yes but I don't think what you want is possible though... I wasn't asking you to get a url, rather, make an async post and once that returns with the pdf, open in in a new window.. make sense? – atefth Apr 03 '16 at 20:24
  • Can you provide an example? – Kola Apr 04 '16 at 22:16
0

This is what I ended up doing:

function generatePdf(){
 var target = document.getElementById('box-1');
 var spinner = new Spinner(opts).spin(target);
 var tree = $("#tree_container").fancytree("getTree");
 var selectedNodes = tree.getSelectedNodes(true)
 var inputs = '';
 $('#report_card_gen_form').remove();//remove any form that might have been created from previous request
 var selectedMarkingPeriod = $( "#marking_period_selector option:selected");
 if(selectedMarkingPeriod.val() == -1){
  inputs += '<input type="hidden" name="school_year_id" value="' + selectedMarkingPeriod[0].dataset.syId + '">';
 }
 else{
  inputs += '<input type="hidden" name="marking_period_id" value="' + selectedMarkingPeriod.val() + '">';
 }
 for(var index = 0; index < selectedNodes.length; index++){
  inputs += '<input type="hidden" name="studentIds[]" value="' + selectedNodes[index].data.id + '">';
  //form.append(selectedNodes[index].data.nodeType + '[]', selectedNodes[index].data.id);
 }
 console.log('form data');
 console.log($(inputs));
 
 $('body').append('<form action="/grades/report-cards" method="POST" name="report_card_gen_form" id="report_card_gen_form"  target="_blank">' + inputs + '</form>');
 $('#report_card_gen_form').submit();
 spinner.stop();
}
Kola
  • 389
  • 1
  • 5
  • 10