jQuery Mobile - Links and Radio buttons in Accordion not working

Question

I have a site here.

When you get there, click on Student Instructions and then hit the Help button. When it tries to go to that document (a PDF on the server), the page comes up undefined... but the URL to the document is correct. When I refresh the page, then it takes me to the document.

Why does it do that?

Here's the snippet from that part of the page...

    <div data-role="collapsible-set" data-theme="c" data-content-theme="d">

        <div data-role="collapsible">
            <h3><img src="images/gear.png" style="vertical-align: middle; ">Student Instructions...</h3>
                    <ul>
                        <li>+ Create a GoArmyEd Account. <a href="docs/TA- GoArmyEd-LOI-Walkthrough-SUO-2-15-13.pdf"><span style="font-size:12px; font-family:Verdana, Geneva, sans-serif;">Need a walkthrough?</span><img src="images/walkthrough.png" style="vertical-align: middle;"></a></li><br>
                        <li>+ Print Statement of Understanding (South University) and have it signed by their Commander.</li><br>
                        <li>+ Receive Cost Verification worksheet (CVWS) and Degree Progress Audit (DPA).</li><br>
                        <li>+ Upload all documents into GoArmyEd.</li><br>
                        <li>+ Apply for Tuition Assistance.</li>

                    </ul>
        </div>

Also, you'll notice that when you back to the original page, there are several radio buttons that appear clicked. I used the jQuery radio button layout because I like it... I just don't know how to make those button clicks go away. It looks terrible.

Thoughts?

Update - I tried adding rel="external", data-ajax="false" separately and together. I'm able to open the document when I right-click and "Open link in a new tab"... Still doesn't open onclick though.

Update 2 - Tried adding the following, but it disabled my entire style sheet.

<script>
    $(document).bind("mobileinit", function(){
    $.mobile.ajaxLinksEnabled(false);
    }); 
</script>

Answer 1

This simple with google embed document.

1) create your link to that page as usual' 2) on the destination page add this iframe

<iframe src="http://docs.google.com/viewer?url=http://yoursite.com/folderWhereYouHideYourPdfFile/yourPdfFile.pdf&embedded=true" width="100%" height="100%" frameborder="0">

this will embed the document. you can then style it up. if you want, can be to popup or load with ajax.

=============================Another Method Could be to use Php============== So Instead of iframe on destination page you can have something like this

<?php
$filePdf = 'yourPdfFile.pdf';
$fileTitle = 'Become A Solider'; 

header('Content-type: application/pdf');
header('Content-Disposition: inline; filename="' . $fileTitle . '"');
header('Content-Transfer-Encoding: binary');
header('Content-Length: ' . filesize($filePdf));
header('Accept-Ranges: bytes');

@readfile($filePdf);
?>