How to use BorderBehavior with ajax rerendering










0














I want to use a BorderBehavior to add additional markup around different components.



MyBorderBehavior extends BorderBehavior 



<wicket:border>
<div class="myBorderBehavior">
<wicket:body />
<!-- some more HTML code -->
</div>
</wicket:border>


So at some point, I add a new MyBorderBehavior to a component.



MyComponent myComponent = new MyComponent().add(new MyBorderBehavior());


But when I want to refresh myComponent via ajax



ajaxRequestTarget.add(myComponent)


The Html markup of MyBorderBehavior is drawn again without removing the already existing markup of MyBorderBehavior in the dom. As a result, the markup of MyBorderBehavior is shown twice or more often in the browser.



How can I add a border to a component which can be re-rendered with ajax?



A working solution I found so far is to remove the markup of MyBorderbehavior manually via JavaScript:



MyBorderBehavior extends BorderBehavior 
@Override
public void onComponentTag(Component component, ComponentTag tag)
super.onComponentTag(component, tag);

IValueMap attributes = tag.getAttributes();
attributes.put("class", attributes.getString("class", "") + " hasMyBorderbehavior");



Wicket.Event.subscribe('/dom/node/removing', function(a, attributes, c, d, e)
var component = $('#' + attributes['id']);
if (component.hasClass("hasMyBorderbehavior"))

component.closest(".myBorderBehavior").replaceWith(component);

);


But this seems to be very hacky.



There are three cases I found so far which are relevant for me:



  1. The component with the BorderBehavior is rerendered via ajax

  2. A parent component of the component with the BorderBehavior is rerendered via ajax

  3. The whole page is rerendered









share|improve this question




























    0














    I want to use a BorderBehavior to add additional markup around different components.



    MyBorderBehavior extends BorderBehavior 



    <wicket:border>
    <div class="myBorderBehavior">
    <wicket:body />
    <!-- some more HTML code -->
    </div>
    </wicket:border>


    So at some point, I add a new MyBorderBehavior to a component.



    MyComponent myComponent = new MyComponent().add(new MyBorderBehavior());


    But when I want to refresh myComponent via ajax



    ajaxRequestTarget.add(myComponent)


    The Html markup of MyBorderBehavior is drawn again without removing the already existing markup of MyBorderBehavior in the dom. As a result, the markup of MyBorderBehavior is shown twice or more often in the browser.



    How can I add a border to a component which can be re-rendered with ajax?



    A working solution I found so far is to remove the markup of MyBorderbehavior manually via JavaScript:



    MyBorderBehavior extends BorderBehavior 
    @Override
    public void onComponentTag(Component component, ComponentTag tag)
    super.onComponentTag(component, tag);

    IValueMap attributes = tag.getAttributes();
    attributes.put("class", attributes.getString("class", "") + " hasMyBorderbehavior");



    Wicket.Event.subscribe('/dom/node/removing', function(a, attributes, c, d, e)
    var component = $('#' + attributes['id']);
    if (component.hasClass("hasMyBorderbehavior"))

    component.closest(".myBorderBehavior").replaceWith(component);

    );


    But this seems to be very hacky.



    There are three cases I found so far which are relevant for me:



    1. The component with the BorderBehavior is rerendered via ajax

    2. A parent component of the component with the BorderBehavior is rerendered via ajax

    3. The whole page is rerendered









    share|improve this question


























      0












      0








      0


      0





      I want to use a BorderBehavior to add additional markup around different components.



      MyBorderBehavior extends BorderBehavior 



      <wicket:border>
      <div class="myBorderBehavior">
      <wicket:body />
      <!-- some more HTML code -->
      </div>
      </wicket:border>


      So at some point, I add a new MyBorderBehavior to a component.



      MyComponent myComponent = new MyComponent().add(new MyBorderBehavior());


      But when I want to refresh myComponent via ajax



      ajaxRequestTarget.add(myComponent)


      The Html markup of MyBorderBehavior is drawn again without removing the already existing markup of MyBorderBehavior in the dom. As a result, the markup of MyBorderBehavior is shown twice or more often in the browser.



      How can I add a border to a component which can be re-rendered with ajax?



      A working solution I found so far is to remove the markup of MyBorderbehavior manually via JavaScript:



      MyBorderBehavior extends BorderBehavior 
      @Override
      public void onComponentTag(Component component, ComponentTag tag)
      super.onComponentTag(component, tag);

      IValueMap attributes = tag.getAttributes();
      attributes.put("class", attributes.getString("class", "") + " hasMyBorderbehavior");



      Wicket.Event.subscribe('/dom/node/removing', function(a, attributes, c, d, e)
      var component = $('#' + attributes['id']);
      if (component.hasClass("hasMyBorderbehavior"))

      component.closest(".myBorderBehavior").replaceWith(component);

      );


      But this seems to be very hacky.



      There are three cases I found so far which are relevant for me:



      1. The component with the BorderBehavior is rerendered via ajax

      2. A parent component of the component with the BorderBehavior is rerendered via ajax

      3. The whole page is rerendered









      share|improve this question















      I want to use a BorderBehavior to add additional markup around different components.



      MyBorderBehavior extends BorderBehavior 



      <wicket:border>
      <div class="myBorderBehavior">
      <wicket:body />
      <!-- some more HTML code -->
      </div>
      </wicket:border>


      So at some point, I add a new MyBorderBehavior to a component.



      MyComponent myComponent = new MyComponent().add(new MyBorderBehavior());


      But when I want to refresh myComponent via ajax



      ajaxRequestTarget.add(myComponent)


      The Html markup of MyBorderBehavior is drawn again without removing the already existing markup of MyBorderBehavior in the dom. As a result, the markup of MyBorderBehavior is shown twice or more often in the browser.



      How can I add a border to a component which can be re-rendered with ajax?



      A working solution I found so far is to remove the markup of MyBorderbehavior manually via JavaScript:



      MyBorderBehavior extends BorderBehavior 
      @Override
      public void onComponentTag(Component component, ComponentTag tag)
      super.onComponentTag(component, tag);

      IValueMap attributes = tag.getAttributes();
      attributes.put("class", attributes.getString("class", "") + " hasMyBorderbehavior");



      Wicket.Event.subscribe('/dom/node/removing', function(a, attributes, c, d, e)
      var component = $('#' + attributes['id']);
      if (component.hasClass("hasMyBorderbehavior"))

      component.closest(".myBorderBehavior").replaceWith(component);

      );


      But this seems to be very hacky.



      There are three cases I found so far which are relevant for me:



      1. The component with the BorderBehavior is rerendered via ajax

      2. A parent component of the component with the BorderBehavior is rerendered via ajax

      3. The whole page is rerendered






      java wicket






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 12 '18 at 12:02







      kairaedsch

















      asked Nov 12 '18 at 5:59









      kairaedschkairaedsch

      386




      386






















          1 Answer
          1






          active

          oldest

          votes


















          0














          You can make your Behavior temporary and this will overcome the problem when re-painting with Ajax, but might break it when re-rendering the whole page.



          A better solution probably is to override beforeRender of BorderBehavior and do nothing when this is an Ajax request:



          @Override public void beforeRender(Component component) 
          if (!RequestCycle.get().find(AjaxRequestTarget.class).isPresent())
          super.beforeRender(component);




          Same for afterRender().



          The code above is for Wicket 8.x where RequestCycle.get().find(Class<T>) returns Optional<T>. If you use older version then you need to check for null instead: if (RequestCycle.get().find(AjaxRequestTarget.class) != null)






          share|improve this answer




















          • Good try but your solution sadly fails in case 2. Therefore I will have to stick to my current solution as it works in all cases although it uses JavaScript. But good Idea with the temporary Behavior, I did not know that feature.
            – kairaedsch
            Nov 12 '18 at 12:00











          • Fails how ? Is there an error or what exactly happens ?
            – martin-g
            Nov 12 '18 at 19:45










          • Well, if the parent is re-rendered via Ajax, all the current HTML content of it in the browser is removed. As a result, the HTML of our border will be removed. In your code, we will not re-render the border, as it is done via ajax. As a result, the border will be gone.
            – kairaedsch
            Nov 12 '18 at 20:05










          • I understand. I see another approach by using AjaxRequestTarget.Listener but it will be much more complex than your JS solution, so better stay with it.
            – martin-g
            Nov 12 '18 at 20:10










          • You are right. I wonder why wicket does not provide a out of the box solution here? Or some warning would be nice :)
            – kairaedsch
            Nov 16 '18 at 11:34











          Your Answer






          StackExchange.ifUsing("editor", function ()
          StackExchange.using("externalEditor", function ()
          StackExchange.using("snippets", function ()
          StackExchange.snippets.init();
          );
          );
          , "code-snippets");

          StackExchange.ready(function()
          var channelOptions =
          tags: "".split(" "),
          id: "1"
          ;
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function()
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled)
          StackExchange.using("snippets", function()
          createEditor();
          );

          else
          createEditor();

          );

          function createEditor()
          StackExchange.prepareEditor(
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader:
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          ,
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          );



          );













          draft saved

          draft discarded


















          StackExchange.ready(
          function ()
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53256594%2fhow-to-use-borderbehavior-with-ajax-rerendering%23new-answer', 'question_page');

          );

          Post as a guest















          Required, but never shown

























          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          0














          You can make your Behavior temporary and this will overcome the problem when re-painting with Ajax, but might break it when re-rendering the whole page.



          A better solution probably is to override beforeRender of BorderBehavior and do nothing when this is an Ajax request:



          @Override public void beforeRender(Component component) 
          if (!RequestCycle.get().find(AjaxRequestTarget.class).isPresent())
          super.beforeRender(component);




          Same for afterRender().



          The code above is for Wicket 8.x where RequestCycle.get().find(Class<T>) returns Optional<T>. If you use older version then you need to check for null instead: if (RequestCycle.get().find(AjaxRequestTarget.class) != null)






          share|improve this answer




















          • Good try but your solution sadly fails in case 2. Therefore I will have to stick to my current solution as it works in all cases although it uses JavaScript. But good Idea with the temporary Behavior, I did not know that feature.
            – kairaedsch
            Nov 12 '18 at 12:00











          • Fails how ? Is there an error or what exactly happens ?
            – martin-g
            Nov 12 '18 at 19:45










          • Well, if the parent is re-rendered via Ajax, all the current HTML content of it in the browser is removed. As a result, the HTML of our border will be removed. In your code, we will not re-render the border, as it is done via ajax. As a result, the border will be gone.
            – kairaedsch
            Nov 12 '18 at 20:05










          • I understand. I see another approach by using AjaxRequestTarget.Listener but it will be much more complex than your JS solution, so better stay with it.
            – martin-g
            Nov 12 '18 at 20:10










          • You are right. I wonder why wicket does not provide a out of the box solution here? Or some warning would be nice :)
            – kairaedsch
            Nov 16 '18 at 11:34
















          0














          You can make your Behavior temporary and this will overcome the problem when re-painting with Ajax, but might break it when re-rendering the whole page.



          A better solution probably is to override beforeRender of BorderBehavior and do nothing when this is an Ajax request:



          @Override public void beforeRender(Component component) 
          if (!RequestCycle.get().find(AjaxRequestTarget.class).isPresent())
          super.beforeRender(component);




          Same for afterRender().



          The code above is for Wicket 8.x where RequestCycle.get().find(Class<T>) returns Optional<T>. If you use older version then you need to check for null instead: if (RequestCycle.get().find(AjaxRequestTarget.class) != null)






          share|improve this answer




















          • Good try but your solution sadly fails in case 2. Therefore I will have to stick to my current solution as it works in all cases although it uses JavaScript. But good Idea with the temporary Behavior, I did not know that feature.
            – kairaedsch
            Nov 12 '18 at 12:00











          • Fails how ? Is there an error or what exactly happens ?
            – martin-g
            Nov 12 '18 at 19:45










          • Well, if the parent is re-rendered via Ajax, all the current HTML content of it in the browser is removed. As a result, the HTML of our border will be removed. In your code, we will not re-render the border, as it is done via ajax. As a result, the border will be gone.
            – kairaedsch
            Nov 12 '18 at 20:05










          • I understand. I see another approach by using AjaxRequestTarget.Listener but it will be much more complex than your JS solution, so better stay with it.
            – martin-g
            Nov 12 '18 at 20:10










          • You are right. I wonder why wicket does not provide a out of the box solution here? Or some warning would be nice :)
            – kairaedsch
            Nov 16 '18 at 11:34














          0












          0








          0






          You can make your Behavior temporary and this will overcome the problem when re-painting with Ajax, but might break it when re-rendering the whole page.



          A better solution probably is to override beforeRender of BorderBehavior and do nothing when this is an Ajax request:



          @Override public void beforeRender(Component component) 
          if (!RequestCycle.get().find(AjaxRequestTarget.class).isPresent())
          super.beforeRender(component);




          Same for afterRender().



          The code above is for Wicket 8.x where RequestCycle.get().find(Class<T>) returns Optional<T>. If you use older version then you need to check for null instead: if (RequestCycle.get().find(AjaxRequestTarget.class) != null)






          share|improve this answer












          You can make your Behavior temporary and this will overcome the problem when re-painting with Ajax, but might break it when re-rendering the whole page.



          A better solution probably is to override beforeRender of BorderBehavior and do nothing when this is an Ajax request:



          @Override public void beforeRender(Component component) 
          if (!RequestCycle.get().find(AjaxRequestTarget.class).isPresent())
          super.beforeRender(component);




          Same for afterRender().



          The code above is for Wicket 8.x where RequestCycle.get().find(Class<T>) returns Optional<T>. If you use older version then you need to check for null instead: if (RequestCycle.get().find(AjaxRequestTarget.class) != null)







          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 12 '18 at 11:29









          martin-gmartin-g

          12.1k1825




          12.1k1825











          • Good try but your solution sadly fails in case 2. Therefore I will have to stick to my current solution as it works in all cases although it uses JavaScript. But good Idea with the temporary Behavior, I did not know that feature.
            – kairaedsch
            Nov 12 '18 at 12:00











          • Fails how ? Is there an error or what exactly happens ?
            – martin-g
            Nov 12 '18 at 19:45










          • Well, if the parent is re-rendered via Ajax, all the current HTML content of it in the browser is removed. As a result, the HTML of our border will be removed. In your code, we will not re-render the border, as it is done via ajax. As a result, the border will be gone.
            – kairaedsch
            Nov 12 '18 at 20:05










          • I understand. I see another approach by using AjaxRequestTarget.Listener but it will be much more complex than your JS solution, so better stay with it.
            – martin-g
            Nov 12 '18 at 20:10










          • You are right. I wonder why wicket does not provide a out of the box solution here? Or some warning would be nice :)
            – kairaedsch
            Nov 16 '18 at 11:34

















          • Good try but your solution sadly fails in case 2. Therefore I will have to stick to my current solution as it works in all cases although it uses JavaScript. But good Idea with the temporary Behavior, I did not know that feature.
            – kairaedsch
            Nov 12 '18 at 12:00











          • Fails how ? Is there an error or what exactly happens ?
            – martin-g
            Nov 12 '18 at 19:45










          • Well, if the parent is re-rendered via Ajax, all the current HTML content of it in the browser is removed. As a result, the HTML of our border will be removed. In your code, we will not re-render the border, as it is done via ajax. As a result, the border will be gone.
            – kairaedsch
            Nov 12 '18 at 20:05










          • I understand. I see another approach by using AjaxRequestTarget.Listener but it will be much more complex than your JS solution, so better stay with it.
            – martin-g
            Nov 12 '18 at 20:10










          • You are right. I wonder why wicket does not provide a out of the box solution here? Or some warning would be nice :)
            – kairaedsch
            Nov 16 '18 at 11:34
















          Good try but your solution sadly fails in case 2. Therefore I will have to stick to my current solution as it works in all cases although it uses JavaScript. But good Idea with the temporary Behavior, I did not know that feature.
          – kairaedsch
          Nov 12 '18 at 12:00





          Good try but your solution sadly fails in case 2. Therefore I will have to stick to my current solution as it works in all cases although it uses JavaScript. But good Idea with the temporary Behavior, I did not know that feature.
          – kairaedsch
          Nov 12 '18 at 12:00













          Fails how ? Is there an error or what exactly happens ?
          – martin-g
          Nov 12 '18 at 19:45




          Fails how ? Is there an error or what exactly happens ?
          – martin-g
          Nov 12 '18 at 19:45












          Well, if the parent is re-rendered via Ajax, all the current HTML content of it in the browser is removed. As a result, the HTML of our border will be removed. In your code, we will not re-render the border, as it is done via ajax. As a result, the border will be gone.
          – kairaedsch
          Nov 12 '18 at 20:05




          Well, if the parent is re-rendered via Ajax, all the current HTML content of it in the browser is removed. As a result, the HTML of our border will be removed. In your code, we will not re-render the border, as it is done via ajax. As a result, the border will be gone.
          – kairaedsch
          Nov 12 '18 at 20:05












          I understand. I see another approach by using AjaxRequestTarget.Listener but it will be much more complex than your JS solution, so better stay with it.
          – martin-g
          Nov 12 '18 at 20:10




          I understand. I see another approach by using AjaxRequestTarget.Listener but it will be much more complex than your JS solution, so better stay with it.
          – martin-g
          Nov 12 '18 at 20:10












          You are right. I wonder why wicket does not provide a out of the box solution here? Or some warning would be nice :)
          – kairaedsch
          Nov 16 '18 at 11:34





          You are right. I wonder why wicket does not provide a out of the box solution here? Or some warning would be nice :)
          – kairaedsch
          Nov 16 '18 at 11:34


















          draft saved

          draft discarded
















































          Thanks for contributing an answer to Stack Overflow!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid


          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.

          To learn more, see our tips on writing great answers.





          Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


          Please pay close attention to the following guidance:


          • Please be sure to answer the question. Provide details and share your research!

          But avoid


          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.

          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function ()
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53256594%2fhow-to-use-borderbehavior-with-ajax-rerendering%23new-answer', 'question_page');

          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          Use pre created SQLite database for Android project in kotlin

          Darth Vader #20

          Ondo