CODEWITHSUNDEEP
onclickwicketpanel
D2Gambit
D2Gambit

Reputation: 21

Wicket query API and write data to database on click AjaxEventBehavior

I have a list of professional league of legends player components (wicket panels) displayed in a grid and for each player, they have their own modal view(also a wicket panel). My problem is on the initial load of the site, since all wicket panels are being created (both player and player-modal panels), the modal panel has a listview of player info and this is taking quite some time to load all players info and write it to a database table. Is there some way that I can make the query happen only when a player is clicked? I thought about putting the query in an AjaxEventBehavior, but i'm getting a NotSerialiableException on my dao. I also considered adding the modal panel ONLY when the player is clicked (also using ajaxeventbehavior) and I couldn't figure out how to dynamically add the html:

What is the best approach so I don't have to query the api/database on initial load of the site?

Here is the Players Panel and you can see I am adding the modalpanel when the player panel is selected:

public PlayerPanel(String id, final IModel<?> model) {
    super(id, model);

    Label proName = (new Label("proName", model));
    proName.add(new AttributeModifier("data-target", "#modal" + model.getClass().toString()));
    add(proName);

    //initializing daos for player
    ApplicationContext context = new ClassPathXmlApplicationContext("Spring-Module.xml");

    ProPlayersDaoJdbc proPlayersDao = (ProPlayersDaoJdbc) context.getBean("proPlayersDaoJdbc");
    ProGamesDaoJdbc proGamesDao = (ProGamesDaoJdbc) context.getBean("proGamesDaoJdbc");

    ArrayList<Players> allPlayers = (ArrayList<Players>) proPlayersDao.listPlayers();
    final ArrayList<Games> games = new ArrayList<Games>();

    for(Players p : allPlayers){
        if(p.getProName().equals(model.getObject().toString())){

            region = p.getRegion();
            player = p;

            Image proImage = new Image("proImage", p.getThumbnailPath());
            proImage.add(new AttributeModifier("src", p.getThumbnailPath()));
            proImage.add(new AttributeModifier("data-target", "#modal" + model.getObject().toString()));
            try {
                ArrayList<Games> gamesList = updateGamesPlayed(player.getSummonerId());
                for(Games game : gamesList){
                    games.add(game);
                }
            } catch (RiotApiException e) {
                e.printStackTrace();
            }

            add(proImage);
        }
    }

    if(!games.isEmpty()){
        for(Games game : games){
            proGamesDao.create(game);
        }
    }

    add(new ModalPanel("modalPanel", model));
}

The updateGamesPlayed(...) method queries the API and the proGamesDao.create(game) writes it to the db table.

Upvotes: 0

Views: 122

Answers (1)

Mihir
Mihir

Reputation: 270

You could have player image/link on click method making database query, set the result as default model object of child panel, and have page or grid refresh via target.add. on the child panel, you could control the size.

Upvotes: 0

Related Questions