none
Promoted links DOM maipulation JQuery No Events working (Mouseover) RRS feed

  • Question

  • hi All,

    We are looking at some customizations thru JQuery and we planning to replace the PROMOTED LINKS HTML Div that is generated from out of the box webpart. For testing purpose we are simply copying the existing HTML within the DIV element thru Jquery and then emptying the DIV tag and then again adding the same HTML Copied content. So basically just CUT existing HTML, Make that DIV element Empty and Copy the same Content back. But after doing that the Mouseover event where the Promoted link Tiles animate (the scroll up and down animation on mouseover and mouseout) stops working completely. We have not manipulated the DOM with anything else but just copy existing DIV and then paste the same as shown in below code

    function getTiles()

            {

                oldHtml = jQuery(".ms-comm-cat-body").html();

                homePageUrl= decodeURIComponent(homePageUrl).toLowerCase();

                var currentPageUrl = decodeURIComponent(window.location.href).toLowerCase();

                if (currentPageUrl.indexOf(homePageUrl) != -1)

                {

                    if (jQuery("#ddlViewType").val() === "Activity View") {

                        jQuery(".ms-comm-cat-body").empty();

                        //getActivityViewTiles();

                        jQuery(".ms-comm-cat-body").html(oldHtml);

                                       }

                    else {

                    }

                }

            }

    Any help why and what wld be missing in this Jquery way of replacing DIV contents and events stop firing?

    Appreciate your help.


    Ana

    Thursday, March 23, 2017 5:01 PM

All replies

  • When you copy HTML (i.e. text) it does not copy all the attached event handlers and other data existing "outside" of the markup you manipulate. To recreate the exact deep copy of the object you have to use other techniques.

    If you want to add tiles, you can add items to the Promoted Links list behind this tile view, without dynamic creation of the tiles via JavaScript.

    A few helpful links about the JavaScript way:

    1. https://collab365.community/tile-display-templates/
    2. http://spjsblog.com/2013/11/13/sharepoint-2013-style-tiles/

    Please, mark as answer, if this helps.

    Saturday, March 25, 2017 1:08 PM
  • Hi,

    Why do you want to copy and paste operation using jQuery? I suggest you provide more information about your basic requirement for further research.

    If you want to just want to remove the inactivity tiles, we can use .hide() method to hide it.

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com


    Sunday, March 26, 2017 7:02 AM
    Moderator
  • Hi,

    Any update?

    Did you solve this issue?

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Wednesday, April 5, 2017 1:35 AM
    Moderator
  • Hello,

    Yes we were able to resolve the issue we simply added new custom event in the HTML we copied for mouse-over, mouse-out and now its working fine. The reason we are doing this is:-

    1. We have promoted lnks list out of the box (Displays all required list items as tiles) all  is good here.

    2. We have a dropdown on page on change of which we need to change the tiles (These tile information comes from different (multiple) lists). We leverage Search Query here to get those items (from multiple lists within the same site collection).

    3. Now this retrieved list items are packaged within the same DIV Elements as the existing Promoted links webpart (#1 point abv) and we simply replace that with our new items (we form the HTML required which matches with what we have wthin the DIV element). We attach the required events.

    Everything is working now as we expected and the issue is solved.

    Thanks


    Ana

    Wednesday, April 5, 2017 2:08 AM
  • Thank you Vadim your response and links were very helpful!

    Ana

    Wednesday, April 5, 2017 2:08 AM
  • Please try to check first, that DIV element loaded on the page or not then try to fire your custom function

    //--Add JQuery reference first
    //*****************Document.Ready**************::Start******************
    $(document).ready(function () {
     //--Suppose this is DOM element of header
    var chkHeaderLoaded = setInterval(function () {
        //----If total number of processed items equal to unique items on the screen
        if (jQuery(".ms-comm-cat-body").length >0) {
            //--To do
            getTiles()
            clearInterval(chkHeaderLoaded);
        }
    }, 300);
    });
    //*****************Document.Ready**************::End******************


    Thanks, Amit Kumar, LinkedIn Profile ** My Blog

    Friday, April 7, 2017 8:15 AM
  • Hi,

    Thanks for sharing!

    You can mark your reply as answer, it will make others who stuck with the similar issue easier to search for valid solutions in this forum.

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Friday, April 7, 2017 8:46 AM
    Moderator