1

Using Play! 1.2.3

I'm trying to render a table in a page initially with an ArrayList of 100 posts. This works fine. Then, using an ajax request, I want to append 100 posts onto that ArrayList and render the page with the new ArrayList.

My problem is that after the 100 posts are appended to the initial ArrayList, the page does not get rendered with the updated list. Can anybody shed some light on this? My code is below

//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 for the table is: 

#{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}

and the code for the ajax request is:

//function to append next 100 posts to list
function loadMore()
{
    //call $.ajax here
    $.ajax({
       url: "/home",
        type: 'GET',
    }); 
}
sineil
  • 307
  • 2
  • 5
  • 18
  • I am not sure of what you are trying to do. What does `reader.updateMainFeed()` do? It looks like you are only updating the rss feed and not loading 100 more posts as your code indicates `Load more articles`. I think you are always loading the same list of rss posts. – yco May 06 '13 at 15:30
  • `reader.getMainFeed()` returns a list of 100 posts. `reader.updateMainFeed` returns an updated list of posts including the original 100 posts and appending on the next 100 posts. This bit of code is working as expected. The problem I'm having is the page is not rendering the posts. – sineil May 06 '13 at 15:34
  • Ok, that makes more sense to me now :). I don't remember much about play framework, but i'm not sure the page is reloaded(~ rendered) when using Ajax (Ajax is for pieces of html, not the whole page). IMO, you are not using Ajax correctly. If I'm wrong, then i can't help you, sorry.. – yco May 06 '13 at 15:48
  • I believe you're right in that the ajax request is retrieving the new list. Have you any idea how to append that list to the html? – sineil May 06 '13 at 18:52
  • I don't remember exactly, but i'd say you have to use jQuery. Take a look at [play doc](http://www.playframework.com/documentation/1.2/ajax) or [this tutorial](http://www.jamesward.com/2011/12/11/tutorial-play-framework-jpa-json-jquery-heroku). Also, [this thread](http://stackoverflow.com/questions/3970681/how-can-i-do-paging-with-onetomany-collections) might be helpful. – yco May 07 '13 at 07:19

0 Answers0