javascript - jQuery モバイルコードに問題がある

Question

jquery モバイル Web ページを開発しています。ページの 1 つで、RSS リーダーを実装したいと考えています。次のような RSS リーダーをオンラインで見つけました。

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
    <link rel="stylesheet" href="themes/CustomTheme.min.css" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

    <style type='text/css'>
        .ui-footer .ui-btn-right {
        }
        .articleContent > table > tbody > tr > td > font > br {
            display: none;
        }
        .articleContent > table > tbody > tr > td > font > br + div {
            display: none;
        }
        .articleContent * {
            font-size: medium !important;
        }
    </style>

</head>

<body>




<script type='text/javascript'>//<![CDATA[ 

// ISCPA added search filter, home icon, updated CDN-Hosted links
// forked from sumukh1's "forked: RSS Reader with jQuery Mobile" http://jsdo.it/sumukh1/4Ton
/* configuration */
var maxLength = 20; /* writing HTML */
document.write('<div data-role="page" id="list">' + '  <div data-role="header" data-position="fixed">' + '    <h1><span id="widgetTitle">...</span> ' + '      <span style="font-size: x-small">(HTML)</span></h1>' + '  </div>' + '  <div data-role="content">' + '    <ul data-role="listview" data-filter="true" id="articleList">');
for (var i = 1; i <= maxLength; i++) {
    document.write('<li id="list' + i + '"><a href="#article' + i + '" id="link' + i + '">&nbsp;</a></li>');
}
document.write('    </ul>' + '  </div>' + '</div>');
for (i = 1; i <= maxLength; i++) {
    document.write('<div data-role="page" id="article' + i + '">' + '  <div data-role="header" data-position="inline">' + '    <a href="#list" data-role="button" data-icon="home" data-back="true">Home</a>' + '    <h1 id="articleHeader' + i + '">&nbsp;</h1>' + '    <a href="#" id="openButton' + i + '" data-role="button" data-icon="plus"' + '      class="ui-btn-right" rel="external">Open</a>' + '  </div>' + '  <div data-role="content">' + '    <div id="articleContent' + i + '" class="articleContent"></div>' + '    <div data-role="controlgroup" data-type="horizontal">' + '      <a href="#article' + String(i - 1) + '" data-role="button" data-icon="arrow-l"' + '        data-inline="true" class="prevButton">Prev</a>' + '      <a href="#article' + String(i + 1) + '" data-role="button" data-icon="arrow-r"' + '        data-inline="true" class="nextButton" data-iconpos="right">Next</a>' + '    </div>' + '  </div>' + '</div>');
} /* JSONP */
$(function() {
    // getOnlineFeed('http://www4.lehigh.edu/news/rss/LUnews_rss.xml');
    getOnlineFeed('http://www4.lehigh.edu/news/rss/LUnews_rss.xml');

/*
  getOnlineFeed('http://www.engadget.com/rss.xml');
  getOnlineFeed('http://www.fremont.k12.ca.us/site/RSS.aspx?DomainID=1&ModuleInstanceID=4613&PageID=1');
  getOnlineFeed('http://news.google.com/news?hl=ja&ned=us&ie=UTF-8&oe=UTF-8&output=atom&topic=h');
  getOnlineFeed('http://www.appbank.net/feed');
  getOnlineFeed('http://japanese.engadget.com/rss.xml');
  getOnlineFeed('http://www.bebit.co.jp/index.xml');  
  getOnlineFeed('http://www.ntt.com/rss/release.rdf?link_id=ostop_service_rss');
  getOnlineFeed('http://feeds.feedburner.com/gapsis');
  getOnlineFeed('http://octoba.net/feed');
  getOfflineFeed('google_news_jsonp.js');
*/
}); /* functions */
var listEntries = function(json) {
    if (!json.responseData.feed.entries) return false;
    $('#widgetTitle').text(json.responseData.feed.title);
    var articleLength = json.responseData.feed.entries.length;
    articleLength = (articleLength > maxLength) ? maxLength : articleLength;
    for (var i = 1; i <= articleLength; i++) {
        var entry = json.responseData.feed.entries[i - 1];
        $('#link' + i).text(entry.title);
        $('#articleHeader' + i).text(entry.title);
        $('#openButton' + i).attr('href', entry.link);
        $('#articleContent' + i).append(entry.content);
    }
    $('#article1 .prevButton').remove();
    $('#article' + articleLength + ' .nextButton').remove();
    if (articleLength < maxLength) {
        for (i = articleLength + 1; i <= maxLength; i++) {
            $('#list' + i).remove();
            $('#article' + i).remove();
        }
    }
};
var getOnlineFeed = function(url) {
    var script = document.createElement('script');
    script.setAttribute('src', 'http://ajax.googleapis.com/ajax/services/feed/load?callback=listEntries&hl=ja&output=json-in-script&q=' + encodeURIComponent(url) + '&v=1.0&num=' + maxLength);
    script.setAttribute('type', 'text/javascript');
    document.documentElement.firstChild.appendChild(script);
};
var getOfflineFeed = function(url) {
    var script = document.createElement('script');
    script.setAttribute('src', url);
    script.setAttribute('type', 'text/javascript');
    document.documentElement.firstChild.appendChild(script);
};
//]]>  

</script>


</body>


</html>

これは、ページとすべてを動的に作成する JavaScript です。しかし、私はすでにページを持っています（私もパネルを持っています）。私がやろうとしているのは、そこにコードを統合することです。私が持っているページは次のようになります。

<div data-role="page" id="news" data-theme="a">
    <div data-role="panel" id="mypanel">
        <ul data-role="listview" data-inset="false">
            <li data-role="list-divider">Espacio Joven</li>
            <li><a href="#news" class="ui-btn-active ui-state-persist">News</a></li>
            <li><a href="#agenda" class="ui-btn-active ui-state-persist">Agenda</a></li>
            <li><a href="#info" class="ui-btn-active ui-state-persist">Info</a></li>
            <li><a href="#activities" class="ui-btn-active ui-state-persist">Activities</a></li>
            <li><a href="#alDia" class="ui-btn-active ui-state-persist">Al Dia</a></li>
            <li data-role="list-divider">La Noche Es Joven</li>
        </ul>
    </div><!-- /panel -->
    <div data-role="header">
        <a href="#mypanel" data-icon="grid" data-iconpos="notext"></a>
        <h1>News</h1>
    </div>

    <div data-role="content">
        <ul data-role="listview" data-inset="true" class="RSSclass">    

        </ul>   

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

誰かがRSSコードを構成して、内部に投稿を作成するのを手伝ってくれますか?

<ul data-role="listview" data-inset="true" class="RSSclass">    

</ul>

私が持っていること？コードを微調整しようとしました。たとえば、ページを作成する行を削除しました (ページがあるので必要ありません)。 document.write の代わりに append を使用して、 listview 内にアルバムを追加しましたが、それでも私はそれに多くの問題があり、見栄えがよくありません。

誰かが疑問に思う場合に備えて、コードを次のように変更しようとしました:

$(document).on("pageshow", '#news', function() {

// ISCPA added search filter, home icon, updated CDN-Hosted links
// forked from sumukh1's "forked: RSS Reader with jQuery Mobile" http://jsdo.it/sumukh1/4Ton
/* configuration */
var maxLength = 20; /* writing HTML */

alert("Hello World!");

//Not sure if .listView('refresh'); is needed. Check it!
for (var i = 1; i <= maxLength; i++) {
    $(".RSSclass").append('<li id="list' + i + '"><a href="#article' + i + '" id="link' + i + '">&nbsp;</a></li>');
}


for (i = 1; i <= maxLength; i++) {
    document.write('<div data-role="page" id="article' + i + '">' + '  <div data-role="header" data-position="inline">' + '    <a href="#list" data-role="button" data-icon="home" data-back="true">Home</a>' + '    <h1 id="articleHeader' + i + '">&nbsp;</h1>' + '    <a href="#" id="openButton' + i + '" data-role="button" data-icon="plus"' + '      class="ui-btn-right" rel="external">Open</a>' + '  </div>' + '  <div data-role="content">' + '    <div id="articleContent' + i + '" class="articleContent"></div>' + '    <div data-role="controlgroup" data-type="horizontal">' + '      <a href="#article' + String(i - 1) + '" data-role="button" data-icon="arrow-l"' + '        data-inline="true" class="prevButton">Prev</a>' + '      <a href="#article' + String(i + 1) + '" data-role="button" data-icon="arrow-r"' + '        data-inline="true" class="nextButton" data-iconpos="right">Next</a>' + '    </div>' + '  </div>' + '</div>');
} /* JSONP */
$(function() {
    // getOnlineFeed('http://www4.lehigh.edu/news/rss/LUnews_rss.xml');
    getOnlineFeed('http://www4.lehigh.edu/news/rss/LUnews_rss.xml');

/*
  getOnlineFeed('http://www.engadget.com/rss.xml');
  getOnlineFeed('http://www.fremont.k12.ca.us/site/RSS.aspx?DomainID=1&ModuleInstanceID=4613&PageID=1');
  getOnlineFeed('http://news.google.com/news?hl=ja&ned=us&ie=UTF-8&oe=UTF-8&output=atom&topic=h');
  getOnlineFeed('http://www.appbank.net/feed');
  getOnlineFeed('http://japanese.engadget.com/rss.xml');
  getOnlineFeed('http://www.bebit.co.jp/index.xml');  
  getOnlineFeed('http://www.ntt.com/rss/release.rdf?link_id=ostop_service_rss');
  getOnlineFeed('http://feeds.feedburner.com/gapsis');
  getOnlineFeed('http://octoba.net/feed');
  getOfflineFeed('google_news_jsonp.js');
*/
}); /* functions */
var listEntries = function(json) {
    if (!json.responseData.feed.entries) return false;
    $('#widgetTitle').text(json.responseData.feed.title);
    var articleLength = json.responseData.feed.entries.length;
    articleLength = (articleLength > maxLength) ? maxLength : articleLength;
    for (var i = 1; i <= articleLength; i++) {
        var entry = json.responseData.feed.entries[i - 1];
        $('#link' + i).text(entry.title);
        $('#articleHeader' + i).text(entry.title);
        $('#openButton' + i).attr('href', entry.link);
        $('#articleContent' + i).append(entry.content);
    }
    $('#article1 .prevButton').remove();
    $('#article' + articleLength + ' .nextButton').remove();
    if (articleLength < maxLength) {
        for (i = articleLength + 1; i <= maxLength; i++) {
            $('#list' + i).remove();
            $('#article' + i).remove();
        }
    }
};
var getOnlineFeed = function(url) {
    var script = document.createElement('script');
    script.setAttribute('src', 'http://ajax.googleapis.com/ajax/services/feed/load?callback=listEntries&hl=ja&output=json-in-script&q=' + encodeURIComponent(url) + '&v=1.0&num=' + maxLength);
    script.setAttribute('type', 'text/javascript');
    document.documentElement.firstChild.appendChild(script);
};
var getOfflineFeed = function(url) {
    var script = document.createElement('script');
    script.setAttribute('src', url);
    script.setAttribute('type', 'text/javascript');
    document.documentElement.firstChild.appendChild(script);
};
//]]>  

});

私のhtmlドキュメントの頭にCSSを追加しましたが、ひどく見えます...

また、エラーがあります：Uncaught TypeError: undefined is not a functionインライン：

$(function() {
    // getOnlineFeed('http://www4.lehigh.edu/news/rss/LUnews_rss.xml');
    getOnlineFeed('http://www4.lehigh.edu/news/rss/LUnews_rss.xml');

何か案は？

score 0 · Accepted Answer

コードをコピーしたところ、2 つのエラーメッセージが表示されました

listEntries undefined
maxLength 未定義

ステートメントの前に次のコードを配置する$(document).on("pageshow", '#news', function() {と、両方が認識され、フィードのコンテンツが表示されます。

<script type='text/javascript'>//<![CDATA[ 

var maxLength = 20; /* writing HTML */

function listEntries (json) {
    if (!json.responseData.feed.entries) return false;
    $('#widgetTitle').text(json.responseData.feed.title);
    var articleLength = json.responseData.feed.entries.length;
    articleLength = (articleLength > maxLength) ? maxLength : articleLength;
    for (var i = 1; i <= articleLength; i++) {
        var entry = json.responseData.feed.entries[i - 1];
        $('#link' + i).text(entry.title);
        $('#articleHeader' + i).text(entry.title);
        $('#openButton' + i).attr('href', entry.link);
        $('#articleContent' + i).append(entry.content);
    }
    $('#article1 .prevButton').remove();
    $('#article' + articleLength + ' .nextButton').remove();
    if (articleLength < maxLength) {
        for (i = articleLength + 1; i <= maxLength; i++) {
            $('#list' + i).remove();
            $('#article' + i).remove();
        }
    }
};

$(document).on("pageshow", '#news', function() {
// rest follows here

これでうまくいくはずです。

javascript - jQuery モバイル コードに問題がある

2 に答える 2

Related

Reference

javascript - jQuery モバイルコードに問題がある