Home/ Questions/Q 6809513
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T20:05:44+00:00

I am having a problem with JQM where an external page’s working code inside

  • 0

I am having a problem with JQM where an external page’s working code inside an internal page would not load.

Here is the code for the external page (works fine on its own):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="en" />

<link href="jquery.zrssfeed.css" rel="stylesheet" type="text/css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js" type="text/javascript"></script>
<script src="jquery.zrssfeed.min.js" type="text/javascript"></script>

<title>zRSSFeed - Basic RSS Feed Example</title>
</head>

<body>

<h1>zRSSFeed - Basic RSS Feed Example</h1>
<p>Simple as it gets, this example uses the same code as in the documentation.</p>

<script type="text/javascript">
$(document).ready(function () {
    $('#test').rssfeed('http://feeds.reuters.com/reuters/oddlyEnoughNews', {
        limit: 5
    });
});
</script>

<div id="test"></div>

</body>
</html>

Now…the problem is when I put that code into an internal page:

....<script src="jquery.zrssfeed.min.js" type="text/javascript"></script> //include in head...


<div data-role="page">

    <div data-role="header">
        <h1>Page Title</h1>
    </div><!-- /header -->

    <div data-role="content">   


    <p>Page content goes here.</p>



             <script type="text/javascript">
        $(document).ready(function () {
            $('#test').rssfeed('http://feeds.reuters.com/reuters/oddlyEnoughNews', {
                limit: 5
            });
        });
        </script>

<div id="test"></div>           

    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->

Is there any extra requirments to get this to work?

For some reason the feed does not appear at all in the internal page.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Solution

    When you are using AJAX to load the pages, then it seems like only referenced pages (<div data-role="page"> ... </div>) are loaded and not the complete website, this way the script doesn’t get excuted.

    You need to include your script to load in the page-div not in the head, to get the conde on page load.

    Your start/landing page

    <!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.0rc2/jquery.mobile-1.0rc2.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
</head> 

<body> 
    <!-- Loaded via AJAX because data-ajax="false" or rel="external" is not set -->
    <a href="page2.htm" data-role="button">To page 2</a>
</body>
</html>

    Page to load

    <html>
    <!-- ... more html -->
    <script src="jquery.zrssfeed.min.js" type="text/javascript"></script>
    <!-- ... more html -->

    <div data-role="page" id="rss_page">
        <!-- your stuff -->
    </div>
</html>

    What gets loaded (via AJAX)

        <div data-role="page" id="rss_page">
        <!-- your stuff -->
    </div>
    • 0