I have a form on my website that the user needs to fill in order to generate a PDF file. If there are errors in the form, the server will respond with a json object with the list of errors, otherwise will respond with the PDF file (as a string). I'm trying to display that PDF file inside a Magnific-Popup (https://www.npmjs.com/package/magnific-popup).
$('.preview-button').on('click', function (e) {
event.preventDefault();
var theLink = $(this);
var formElement = theLink.closest("form");
$.ajax({
url: theLink.attr('href'),
method: 'GET',
data: formElement.serialize(),
success: function (response, textStatus, jqXHR) {
var contentType = jqXHR.getResponseHeader("content-type") || "";
if(contentType.indexOf('pdf') > -1){
// How can I tell to magnific popup to display the response as PDF?
$.magnificPopup.open({
// tell magnific popup to use the response...
type: 'iframe',
closeOnBgClick: false
});
}
else{
if (response.hasOwnProperty('errors')){
// Form has error, show them
alert(response.errors);
}
}
}
});
});
This might be useful for someone with the same problem: Instead of sending the pdf file as a response, I decided to generate a temporary pdf file in the server and send the path to that file as response. Then we can tell to magnificPopup to display it inside an iframe.