Wicket
  1. Wicket
  2. WICKET-1177

partial ajax updates on repeater components

    Details

    • Type: Wish Wish
    • Status: Open
    • Priority: Major Major
    • Resolution: Unresolved
    • Affects Version/s: 1.3.0-rc2
    • Fix Version/s: None
    • Component/s: wicket
    • Labels:
      None

      Description

      I try to explain the problem using an example:

      Imagine having a guestbook page where you can add new user entries via ajax post...

      Assume we are using RefreshingView to display the user entries. Once a user submits a new post the view should not be re-rendered in the ajax response completely but only the new user entry.

      Technically it's easy to address the view items by using e.g. ListItem#setOutputMarkupId(true).

      However, things are more complicated.

      When the user clicks on the submit button a background ajax request is created and a form submit listener is invoked. There the new guestbook post is saved in the data model. Then you want to update the list with the new entry using target.addComponent(..) . Also, applying a yellow fade effect to the component would be cool as an visual indication for the user. However, there is no way I can think of to get the proper view item(s) for the model object (=new user entry).

        Activity

        Peter Ertl created issue -
        Peter Ertl made changes -
        Field Original Value New Value
        Issue Type Improvement [ 4 ] Wish [ 5 ]
        Hide
        Johan Compagner added a comment -

        so to get this straight, You want to partial update a repeater and then also do this for new rows??
        I dont think that is possible at this time because we do component replacement as a whole.
        So for a new entry you have to repaint the complete table.

        Show
        Johan Compagner added a comment - so to get this straight, You want to partial update a repeater and then also do this for new rows?? I dont think that is possible at this time because we do component replacement as a whole. So for a new entry you have to repaint the complete table.
        Johan Compagner made changes -
        Fix Version/s 1.4.0-alpha [ 12312523 ]
        Assignee Matej Knopp [ knopp ]
        Affects Version/s 1.3.0-rc2 [ 12312513 ]
        Hide
        Peter Ertl added a comment -

        You would probably need something new like

        AjaxRequestTarget#insertComponent(String parentMarkupId, index)

        to insert a new component's markup into the browser's HTML.

        Using the newItem() method of RefreshingView could be useful for tracking the creation of new items.

        However, I am missing an overall picture of how this could be done...

        Show
        Peter Ertl added a comment - You would probably need something new like AjaxRequestTarget#insertComponent(String parentMarkupId, index) to insert a new component's markup into the browser's HTML. Using the newItem() method of RefreshingView could be useful for tracking the creation of new items. However, I am missing an overall picture of how this could be done...
        Frank Bille Jensen made changes -
        Fix Version/s 1.4-M2 [ 12312911 ]
        Fix Version/s 1.4-M1 [ 12312523 ]
        Frank Bille Jensen made changes -
        Fix Version/s 1.4-M3 [ 12312912 ]
        Fix Version/s 1.4-M2 [ 12312911 ]
        Hide
        Martijn Dashorst added a comment -

        Moved to next milestone release.

        Show
        Martijn Dashorst added a comment - Moved to next milestone release.
        Martijn Dashorst made changes -
        Fix Version/s 1.4-M4 [ 12313295 ]
        Fix Version/s 1.4-M3 [ 12312912 ]
        Matej Knopp made changes -
        Fix Version/s 1.4-M4 [ 12313295 ]
        Fix Version/s 1.5-M1 [ 12313078 ]
        Igor Vaynberg made changes -
        Fix Version/s 1.5-M2 [ 12315237 ]
        Fix Version/s 1.5-M1 [ 12313078 ]
        Igor Vaynberg made changes -
        Fix Version/s 1.5-M3 [ 12315329 ]
        Fix Version/s 1.5-M2 [ 12315237 ]
        Hide
        Pedro Santos added a comment -

        AbstractTree already does something similar. If some new component was add at the tree, for instance, this component first prepend the javascript call:
        Wicket.Tree.createElement
        to create some DOM component with the Wicket component markup id at the browser, and than add the new Wicket component to the ajax response, like:
        target.addComponent(theNewWicketComponentThatWillExistAtTheBrowserSinceThisResponsePrependeSomeJavascriptForThisEnd)

        Show
        Pedro Santos added a comment - AbstractTree already does something similar. If some new component was add at the tree, for instance, this component first prepend the javascript call: Wicket.Tree.createElement to create some DOM component with the Wicket component markup id at the browser, and than add the new Wicket component to the ajax response, like: target.addComponent(theNewWicketComponentThatWillExistAtTheBrowserSinceThisResponsePrependeSomeJavascriptForThisEnd)
        Show
        Igor Vaynberg added a comment - blogged about that here a while back http://wicketinaction.com/2008/10/repainting-only-newly-created-repeater-items-via-ajax/
        Hide
        Pedro Santos added a comment -

        I can't figure out why this wish is open. There are plans to provide a new API to assist this use case?

        Show
        Pedro Santos added a comment - I can't figure out why this wish is open. There are plans to provide a new API to assist this use case?
        Hide
        Martin Grigorov added a comment -

        In 1.5 the markup is available even in the component's constructor so I think it is possible to integrate the idea Igor described in the blog to work out of the box for repeaters.

        E.g. if the repeater is attached to <tr wicket:id="items"><td wicket:id="item"> then it should be possible to figure out that we need to create 'td' element and append it to the repeater's markup element.

        Show
        Martin Grigorov added a comment - In 1.5 the markup is available even in the component's constructor so I think it is possible to integrate the idea Igor described in the blog to work out of the box for repeaters. E.g. if the repeater is attached to <tr wicket:id="items"><td wicket:id="item"> then it should be possible to figure out that we need to create 'td' element and append it to the repeater's markup element.
        Hide
        Pedro Santos added a comment -

        I didn't understand
        Imaging for instance if we have:
        <table wicket:id="container">
        <tbody>
        <tr wicket:id="repeater">(...)</tr>
        </tbody>
        </table>
        How an out of box solution would know that the new repeater item should be placed at the tbody, instead at the table?
        Shouldn't this child parent resolution be implemented case by case?

        Show
        Pedro Santos added a comment - I didn't understand Imaging for instance if we have: <table wicket:id="container"> <tbody> <tr wicket:id="repeater">(...)</tr> </tbody> </table> How an out of box solution would know that the new repeater item should be placed at the tbody, instead at the table? Shouldn't this child parent resolution be implemented case by case?
        Hide
        Martin Grigorov added a comment -

        The new item should be added as child of 'tr' (e.g. a 'td'). The repeater is attached to 'tr' but there should be inner markup element for the item:

        <table wicket:id="container">
        <tbody>
        <tr wicket:id="repeater">
        <td wicket:id="item"></td> <<<<<<<<<< we can read that the item is attached to 'td' and do the JS stuff
        </tr>
        </tbody>
        </table>

        Show
        Martin Grigorov added a comment - The new item should be added as child of 'tr' (e.g. a 'td'). The repeater is attached to 'tr' but there should be inner markup element for the item: <table wicket:id="container"> <tbody> <tr wicket:id="repeater"> <td wicket:id="item"></td> <<<<<<<<<< we can read that the item is attached to 'td' and do the JS stuff </tr> </tbody> </table>
        Jeremy Thomerson made changes -
        Fix Version/s 1.5-M4 [ 12315483 ]
        Fix Version/s 1.5-M3 [ 12315329 ]
        Martin Grigorov made changes -
        Fix Version/s 1.5-M4 [ 12315483 ]
        Hide
        Jens Zastrow added a comment -

        btw. you can use a diff algorithm (e.g. the build in MyersDiff) to compare the id-lists of the old and new state and create the insert, remove javascript code.
        With this technique you should be able to handle all list-modifications....

        Show
        Jens Zastrow added a comment - btw. you can use a diff algorithm (e.g. the build in MyersDiff) to compare the id-lists of the old and new state and create the insert, remove javascript code. With this technique you should be able to handle all list-modifications....
        Hide
        vineet semwal added a comment - - edited

        i just noticed this issue,i didn't know there was a issue for this usecase,i have written something which is based on Igor Vaynberg's article sometime ago ,the way of using it is almost like DataView ,i call it QuickView https://github.com/vineetsemwal/quickview ,the wiki for it is here https://github.com/vineetsemwal/quickview/wiki

        thanks !

        Show
        vineet semwal added a comment - - edited i just noticed this issue,i didn't know there was a issue for this usecase,i have written something which is based on Igor Vaynberg's article sometime ago ,the way of using it is almost like DataView ,i call it QuickView https://github.com/vineetsemwal/quickview ,the wiki for it is here https://github.com/vineetsemwal/quickview/wiki thanks !

          People

          • Assignee:
            Matej Knopp
            Reporter:
            Peter Ertl
          • Votes:
            5 Vote for this issue
            Watchers:
            8 Start watching this issue

            Dates

            • Created:
              Updated:

              Development