1

プレイ!1.2.3

最初に100件の投稿のArrayListを使用して、ページにテーブルをレンダリングしようとしています。これはうまくいきます。次に、ajax リクエストを使用して、その ArrayList に 100 件の投稿を追加し、新しい ArrayList でページをレンダリングします。

私の問題は、最初の ArrayList に 100 件の投稿が追加された後、ページが更新されたリストでレンダリングされないことです。誰でもこれに光を当てることができますか?私のコードは以下です

//method to render the users home page    
public static void home(String username) throws IllegalArgumentException, IOException, FeedException, MongoException, TasteException, InterruptedException 
{
    if(validateUser() != null && validateUser().equals(username))
    {   
        RSSReader reader = RSSReader.getInstance(username);
        List<Posts> mainFeed = new ArrayList<Posts>();
        List<Posts> recommendedFeed = reader.getRecommendedFeed();
        Map<String, Object> args = new HashMap<String, Object>();

        if(request.isAjax())
        {
            mainFeed = reader.updateMainFeed();
            for(int i = 0; i < mainFeed.size(); i++)
            {
                System.out.println("feed item: " + i + " " + mainFeed.get(i));
            }
            System.out.println("Main feed size: " + mainFeed.size());
            renderArgs.put("mainFeed", mainFeed);
            renderArgs.put("recommendedFeed", recommendedFeed);
            renderArgs.put("username", username);
            //render(mainFeed, recommendedFeed, username);
        }
        else if(!request.isAjax())
        {
            mainFeed = reader.getMainFeed();
            renderArgs.put("mainFeed", mainFeed);
            renderArgs.put("recommendedFeed", recommendedFeed);
            renderArgs.put("username", username);
            System.out.println("Main feed size: " + mainFeed.size());
        }
        render();
    }
    else
    {
        loginScreen();
    }
}

テーブルの html は次のとおりです。

#{if mainFeed.size() > 1}
    <div class="span9">
        <div class="well">
            <h4>Articles</h4>
            <table class="table table-bordered" style="max-width: 829.7916870117188px">
                <tbody>
                    #{list items:mainFeed, as:'article'}
                    <tr style="max-width: 829.7916870117188px">
                        <td><b>${article.title}</b>
                           <span class="twit" style="float:right; padding-left:10px">
                                <a href="https://twitter.com/share" class="twitter-share-button"
                                data-url="${article.link}" 
                                data-dnt="true">Tweet</a>
                           </span>
                           <span class="share-widget" style="float:right"><fb:like
                                    href=${article.link} send="false" layout="button_count"
                                    width="100" show_faces="false" font="segoe ui"
                                    action="recommend"></fb:like>
                            </span> 
                         </br>
                            <p style="max-width: 810px;">${article.description}</p> </br> 
                            <a href=${article.link} target="_blank">Read more...</a>
                            <p style="float: right">
                                <b>${article.source}</b>
                            </p></td>
                    </tr>
                    #{/list}
                </tbody>
            </table>
            <button class="btn-small btn-primary"
                        type="submit"
                        onclick="loadMore();" style=" display: block; margin-left:
                        auto;margin-right:auto ">Load more articles
            </button>
        </div>
    </div>
    #{/if}

ajax リクエストのコードは次のとおりです。

//function to append next 100 posts to list
function loadMore()
{
    //call $.ajax here
    $.ajax({
       url: "/home",
        type: 'GET',
    }); 
}
4

0 に答える 0