Skip to Content
author's profile photo Former Member
Former Member

Re-Rendering jquery effects

I have created three panels and second panel contains jquery animation. On button click respective panels are displayed ,the code for animation is written on onAfterRendering() function. when the second panel is loaded first, animation effects work but when we navigate through another panels by using onClick of button and Come back to second panel the effects are not working..

Add a comment
10|10000 characters needed characters exceeded

Assigned Tags

Related questions

2 Answers

  • author's profile photo Former Member
    Former Member
    Posted on May 07, 2014 at 01:18 PM

    can you create a snippet ?

    Add a comment
    10|10000 characters needed characters exceeded

  • author's profile photo Former Member
    Former Member
    Posted on May 08, 2014 at 05:22 AM

    I have written the following code on onAfterRendering function of view.On loading the effects are visible but when filter is applied on tile container the following effect for mouseover not working.

    code snippet:

    onAfterRendering : function(evt) {

    //$("#idProductPane2").hide();

    $("button[id*='__button']").css('visibility', 'hidden');

    $("div[id^='idProductTile']").mouseover

    (function() {

    TiD=this.id;

    tileData=this.children[1].children;

    $(this).css("background-color", "white");

    $(this).css("border", "groove");

    $(this).css("border-bottom-width", "0.8em");

    $(this).css("border-right-width","0.4em");

    $(this).find("button[id^='__button']").css('visibility', 'visible');

    });

    $("div[id^='idProductTile']").mouseout(function() {

    $(this).css("background-color", "white");

    $(this).css("border", "none");

    $("button[id^='__button']").css('visibility', 'hidden');

    });

    how to re render the effects ?

    Add a comment
    10|10000 characters needed characters exceeded

    • Former Member

      A complete working example would be very helpful. For an example of setting this up, see http://jsbin.com/sidiq/1/edit?html,output

      A few things to consider:

      • SAPUI5 does not trigger rerendering unless it believes it (or a child) has changed.
      • If a SAPUI5 control has its SAP setting for "visible" set to false, it actually skips rerendering altogether.
      • You seem to be making CSS revisions using jQuery to directly modify other DOM elements. This is not a good idea -- use .addClass et al on the SAPUI5 control instead where possible. This will cause SAPUI5 to rerender, and the library will apply your classes at that time. Setting them directly in DOM may also end up with SAPUI5 rerendering the other elements after you've used jQuery selector, causing your changes to be overwritten before they are even rendered by the browser.

      Finally, onAfterRendering may be the wrong place to do mouseover effects -- SAPUI5 has extensive built-in support in the library for interaction events (you'll unfortunately have to dig through the debug sources to get them, the documentation is missing this -- but for starters see https://sapui5.hana.ondemand.com/sdk/#docs/api/symbols/jQuery.sap.html#.ControlEvents and https://sapui5.hana.ondemand.com/sdk/#docs/api/symbols/jQuery.sap.PseudoEvents.html ).

Before answering

You should only submit an answer when you are proposing a solution to the poster's problem. If you want the poster to clarify the question or provide more information, please leave a comment instead, requesting additional details. When answering, please include specifics, such as step-by-step instructions, context for the solution, and links to useful resources. Also, please make sure that you answer complies with our Rules of Engagement.
You must be Logged in to submit an answer.

Up to 10 attachments (including images) can be used with a maximum of 1.0 MB each and 10.5 MB total.