CODEWITHSUNDEEP
htmljquery-mobilehyperlink
isxaker
isxaker

Reputation: 9496

Jquery mobile link to local file

I have following code in index.html:

<a data-ajax="false" rel="external" href="../Info/BasicDefinition.pdf"
 data-theme="c" data-iconpos="top" data-icon="arrow-d" data-role="button">Structure</a>

But i get 404 error - file not found after click on structure link. What i must change? I want to open .pdf file from browser. My file structure (MPSR - root folder of my web site)

-MPSR
-----index.html
-Info
-----BasicDefinition.pdf

Upvotes: 0

Views: 2606

Answers (1)

emerson.marini
emerson.marini

Reputation: 9348

Linking without Ajax

Links that point to other domains or that have rel="external", data-ajax="false" or target attributes will not be loaded with Ajax. Instead, these links will cause a full page refresh with no animated transition. Both attributes (rel="external" and data-ajax="false") have the same effect, but a different semantic meaning: rel="external" should be used when linking to another site or domain, while data-ajax="false" is useful for simply opting a page within your domain from being loaded via Ajax. Because of security restrictions, the framework always opts links to external domains out of the Ajax behavior.

Source: http://jquerymobile.com/demos/1.0.1/docs/pages/page-links.html

So, you can remove the rel="external" from your tag and it should work.

I can't post this on jsFiddle, as it wouldn't work, but I've tested here and it worked fine:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Page Title</title>       
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
    </head> 
    <body> 
        <div data-role="page"> 
            <div data-role="header">
                <h1>Page Title</h1>
            </div> 
            <div data-role="content">
                <p>
                    <a data-ajax="false" href="../info/test.txt" data-iconpos="top" data-icon="arrow-d" data-role="button">Link</a>
                </p>
            </div> 
            <div data-role="footer">
                <h4>Page Footer</h4>
            </div> 
        </div> 
    </body>
</html>

Folder structure:

\test
    \info
        \test.txt
    \root
        \index.html

Upvotes: 1

Related Questions