-1

Can you load a page into an iframe with JQuery? I have a page that creates a custom printable pdf and need it to load into an iframe to make it easier for the user. I use jquery to pull in all the variables otherwise I could have it load within the page. I am not sure what I am missing with this command to load the page within id="print_form_modal2"?

$.frameReady(function(){
    $("#print_form").prepend('<div id="newDiv"></div>');
    $('#newDiv').load("print_audit.php?auditID="+auditID+"&action=print&print_name="+print_name+"&print_orient="+print_orient+"&download_option="+download_option+"&type=pdf");
    }));



<iframe id="print_form_modal2" name="iFrame" src="">
  • Why not just set the `src` attribute? – Turnip Jul 01 '16 at 15:40
  • 1
    Possible duplicate of [How do I set the src to an iframe with jQuery?](http://stackoverflow.com/questions/16971451/how-do-i-set-the-src-to-an-iframe-with-jquery) – Turnip Jul 01 '16 at 15:41
  • The jquery is pulling i data from buttons, that's why I am not using src. I need to create a custom page with that data that is pulled through –  Jul 01 '16 at 15:50
  • Yes. You could use the exact same url that you are passing to `.load` to set the iframe src – Turnip Jul 01 '16 at 15:51
  • Anyway, you are currently using `prepend` on an element with an id of `print_form`. Your iframe has an id of `print_form_modal2`. – Turnip Jul 01 '16 at 15:55
  • I used the link above for the other forum but this didn't work: $("#print_form_modal2").attr("src","print_audit.php?auditID="+auditID+"&action=print&print_name="+print_name+"&print_orient="+print_orient+"&download_option="+download_option+"&type=pdf"); –  Jul 01 '16 at 16:02
  • Do I even need prepend? Can I just load straight into the Iframe? I was using this from an example and have a hard time finding a good example. –  Jul 01 '16 at 16:03
  • .prepend .append and .html won't work unless you target the body element within the iframe, after the iframe is done loading. To do so, you would have to select the iframe, then get it's document and select from there. so much simpler to just update the src. define "didn't work". ***why didn't it work***. – Kevin B Jul 01 '16 at 16:04
  • Don't build param strings by hand, jQuery has a `$.param` method that will do it for you while also correctly escaping the values.. `$.param({auditId: auditId})` – Kevin B Jul 01 '16 at 16:23

3 Answers3

1

You could do it the painless way and just use HTML:

  1. Make an <a>nchor with the href to your PDF.
  2. Add an iframe with a name attribute (ex. name="iframe1")
  3. Next, add a target="iframe1" to the <a>.

PLUNKER

zer00ne
  • 31,838
  • 5
  • 32
  • 53
0

Its simple enough to do what you're trying to do using just JavaScript and HTML

HTML: <iframe id="print_form_modal2" name="iFrame">

JavaScript:

function openIframe() {
document.getElementById("print_form_modal2").setAttribute("src", "https://www.example.com/");

}

You can see the code in a CodePen here: http://codepen.io/anon/pen/VjbBbY

In your code you need to replace https://www.example.com/ with the source path for PDF you wish to display, and change when openIframe is called to suit your requirements.

Adam T
  • 631
  • 7
  • 16
-1

Here's a link to the codepen example

What you want to do on document ready (or whatever event is relevant to your logic) get the iframe and using the attr method change its source property to point to whatever new/old source.

Like this:

$(document).ready(function() {
  $('#iframe-container').attr('src','http://www.w3schools.com/tags/tag_iframe.asp');
});
pzelenovic
  • 313
  • 1
  • 14