display PDF in Thickbox v3 (+jquery) – finally working!

Hi all!

I’m super excited and would like to let you all know – especially the ones that have been stuck with a similar issue for some time: we have ThickBox working and running with DocuView and… DISPLAYING AUTOMATICALLY GENERATED PDFs (AS WELL AS NORMAL PDFs) IN MODAL WINDOW (and it works in FireFox 2+, IE6+, IE7, Opera 9.51, Safari Win… Mac testing follows successfully completed).

The link that helped me: http://codylindley.com/thickboxforum/comments.php?DiscussionID=303&page=1

I am still trying to get my head around the fact that the solution is as easy as adding all seven (7) characters: .show(). The forum member was solving displaying Flash, but it applies to PDF too.

*NEW UPDATE! I’m really really chuffed, pleased and ecstatic, hope it helps, by all means check the edited thickbox javascript file. The changes occur on lines #196 and #199, one is meant to append the aforementioned “.show()” at the end of each occurrence of “</iframe>” in the code.

Drop me a line should you struggle, drop me a line if it worked for you! Now we’re down to cracking generating PDF through COM (OpenOffice) via PHP.

Till then :)

Bookmark and Share

19 Responses to “display PDF in Thickbox v3 (+jquery) – finally working!”

  1. [...] Theme saved by pjjw2009-02-21 – Finally: CSS & XHTML Compliant saved by hngff2009-02-18 – display PDF in Thickbox v3 (+jquery) – finally working! saved by xfloraenchantix13072009-02-16 – Compatibility issue of Thickbox and jQuery in WordPress [...]

  2. john says:

    thanks for posting this-I was struggling with the same problem to display PDF in iFrame using thickbox… your solution worked great for me!

  3. Pleasure! I have been playing with the ThickBox library (and CSS mainly) to take it to another level (since there’s no sign of ThickBox 4 in production).. Watch this space!

  4. Thomas says:

    Thanks for this. Worked a treat for me =).

  5. dgitts says:

    perfect, i had tried several different mods incl. different lightbox variations but nothing worked well enough, this opened the pdf right up thx.

  6. LG Wells says:

    This looks interesting. However, I am attempting to use this on a wordpress powered site and cannot fine the line of code referenced in the linked article. Any help would be greatly appreciated.

    Thanks

  7. Hi LG, have you modified the thickbox.js in any way? It is achievable on a wordpress site, you need to assign class=”thickbox” to the link, add “&TB_iframe=true” or “?TB_iframe=true” depending whether you are appending only one variable or to couple of variables present already (& – adding, ? – the only variable). Then adding the “.show()” to pretty much anything ending

    </iframe>")

    … If you still struggle give me a shout and I’ll upload the modified working thickbox javascript displaying PDF here.

    All the best!

  8. John Doe says:

    This fix works like a charm on IE (tried both version 7 and 8), but it doesn’t work for FF and Chrome? Do you have any idea?

  9. Hi, what OS are you testing on? And what versions of FF and Chrome have you got installed? I have to say we have been using this for over a year in IE6, 7, 8, FF 1.5, 2, 3, 3.5 lately, Safari 3, 4, Chrome 1, 2 and Opera 9.x without any problems on neither Mac nor Windows. Try updating Adobe Acrobat (Reader). if you still struggle give me a shout and I’ll post the modified file here, ok?

  10. John Doe says:

    Thanks for your reply! Since you were so convinced I gave it another shot and now it really works like a charm! The problem was caused by another fix I recently integrated in Thickbox.

    Thanks for your effort!

  11. Superb news! BTW – interesting looking CRM :) Currently writing an article on flexible CSS steps (wizard menu) – something I haven’t yet found on the internet the way I like it – something any online app could benefit from… Come back soon, or subscribe to our feed…

  12. Gareth says:

    Hi Martin,

    Sounds like the fix I’m after! – have managed to find a couple of /iframe tags in the js – not sure which one to add the .show() to, and possibly my editor is mucking up the .js when I go to resave it. If you have the modified file that would be great!!!

    Thanks in hoping!

    GS

  13. Gareth says:

    Fixed! – it was the editor mucking up the .js – added to both iframe tags and works great!

    Thanks for posting.

    GS

  14. Riccardo says:

    yes, but where do you put this .show?
    please answer

  15. Hello Ricardo,

    I have finally updated and uploaded the amended file, check above.

    The PDF displaying should now work out of the box, I didn’t fix the “@rel” reference to jQuery for the photo gallery (in case other people don’t use the latest jQuery library). You can now download the file that has been puzzling people trying to display generated or static PDFs in Thickbox from my website.

    Cody, if you’re reading this: all credit to you, hope you have no issues with me doing this :)

  16. Theresa says:

    The .js with two .show() added did not work on any of the browsers for me, however, it works where there’s only ONE .show() added (line 196) and the second .show() on line 199 was removed. Just a thought in case the original solution didn’t work for ya

  17. vincent says:

    i can’t open pdf file at thickbox with browser Firefox 3, any suggest?
    this my code:
    test

  18. kanubhai says:

    hi,

    i have a little diff. scenario in my case i m not displaying PDF file which is on hard drive of my PC or under my project folder. but what i m doing is i m receiving PDF data from my server in the form of Byte Array and then i write this data on my JSP using response object as shown below.

    OutputStream out2 = null;
    response.setContentType(“application/pdf”);
    out2 = response.getOutputStream();
    out2.write(pdfdata, 0, pdfdata.length);
    out2.close();

    here i m setting response type as application/pdf. now this works fine i mean displays PDF file on my JSP page if i run this Jsp page directly in browser but in Lightbox it is not displaying anything it just shows that Processing bar which keeps going on and on…

  19. Mak sure you get your paths right. You’re probably calling the lightbox from a folder (?) other than root (again, presumption)… If it is displaying fine called directly make sure the path in lightbox is relevant/correct too. That’s the only thing that springs to mind immediately.

    PS: can you display images in the Thickbox no problem? Try something else, build up a temporary folder structure and play with the paths, you’ll see what I mean.
    Good luck, let me know please!

Leave a Reply