Home› General Discussion
Options

Service Catalog - Favourites / Code Help

CaterhamITSupportCaterhamITSupport Member Advanced IT Monkey ✭✭✭
in General Discussion

Dear All,

I have the following code which removed favourites from Service Catalog, however it breaks the hyperlink on the picture. So you can click on the text and it goes to the link but when clicking on a picture it does nothing:

Any help please?

Daniel

Code:

$(document).ready(function(){

  //Since this uses a mutationobserver against a guaranteed-to-exist object, make sure we are only on the Home alternate page.

  if (document.URL.indexOf("/View/02efdc70-55c7-4ba8-9804-ca01631c1a54") === -1) { 

    return; 

  }

   

  //The service catalog and request offerings don't load immediately. So wait until it does load.

  var mainPageNode = document.getElementById('main_wrapper');

   

  // create an observer instance

  var observer = new MutationObserver(function(mutations) {

    //The page changed. See if any RO descriptions exist yet. 

    var titleElements = $(".sc-item-title");

    if (titleElements.length > 0) {

      fn_SetRequestOfferingImagesToOpenROs();

      observer.disconnect();

    }

  });

   

  // configure the observer. For our purposes, subtree is required.

  var observerConfig = { attributes: true, childList: true, subtree: true, characterData: true };

   

  // pass in the node, and our mutationobserver options.

  observer.observe(mainPageNode, observerConfig);

   

  //Create the function to add our click event.

  function fn_SetRequestOfferingImagesToOpenROs() {

    //hide all star icons so that you cannot set favorites. This would interfere with clicking on the request offering images.

    var favoriteIconElements = $('.fa-star-o');

    favoriteIconElements.hide();

    function clickChildRequestOffering(event) {

      console.log("clicked!");

      var parentAElement = event.target;

      //call the click event of the child img element.

      var childImgElement = $(parentAElement).find("img")

      childImgElement.click();

    };

    //For every icon, there's a sibling img element. Get it since it contains our click() event, which opens up the RO. We need to apply this to the parent <a>.

    for (var i = 0; i < favoriteIconElements.length; i++) {

      var siblingImgElement = $(favoriteIconElements[i]).parent().find("img")

      var parentAElement = siblingImgElement.parent();

       

      //Add our custom event to our img element, which will just end up calling the click event of the child <i>

      parentAElement.click(clickChildRequestOffering);

       

      //Change the hover event on this sibling img element.

      parentAElement.css('cursor', 'pointer');

    }

  }

});

Best Answer

  • Options
    CaterhamITSupportCaterhamITSupport Member Advanced IT Monkey ✭✭✭
    Answer ✓

    Dear All,

    This is still a problem could you help:

    I have the following code which removed favourites from Service Catalog, however it breaks the hyperlink on the picture. So you can click on the text and it goes to the link but when clicking on a picture it does nothing:

    Any help please?

    Daniel

    Code:

    $(document).ready(function(){

      //Since this uses a mutationobserver against a guaranteed-to-exist object, make sure we are only on the Home alternate page.

      if (document.URL.indexOf("/View/02efdc70-55c7-4ba8-9804-ca01631c1a54") === -1) { 

        return; 

      }

       

      //The service catalog and request offerings don't load immediately. So wait until it does load.

      var mainPageNode = document.getElementById('main_wrapper');

       

      // create an observer instance

      var observer = new MutationObserver(function(mutations) {

        //The page changed. See if any RO descriptions exist yet. 

        var titleElements = $(".sc-item-title");

        if (titleElements.length > 0) {

          fn_SetRequestOfferingImagesToOpenROs();

          observer.disconnect();

        }

      });

       

      // configure the observer. For our purposes, subtree is required.

      var observerConfig = { attributes: true, childList: true, subtree: true, characterData: true };

       

      // pass in the node, and our mutationobserver options.

      observer.observe(mainPageNode, observerConfig);

       

      //Create the function to add our click event.

      function fn_SetRequestOfferingImagesToOpenROs() {

        //hide all star icons so that you cannot set favorites. This would interfere with clicking on the request offering images.

        var favoriteIconElements = $('.fa-star-o');

        favoriteIconElements.hide();

        function clickChildRequestOffering(event) {

          console.log("clicked!");

          var parentAElement = event.target;

          //call the click event of the child img element.

          var childImgElement = $(parentAElement).find("img")

          childImgElement.click();

        };

        //For every icon, there's a sibling img element. Get it since it contains our click() event, which opens up the RO. We need to apply this to the parent <a>.

        for (var i = 0; i < favoriteIconElements.length; i++) {

          var siblingImgElement = $(favoriteIconElements[i]).parent().find("img")

          var parentAElement = siblingImgElement.parent();

           

          //Add our custom event to our img element, which will just end up calling the click event of the child <i>

          parentAElement.click(clickChildRequestOffering);

           

          //Change the hover event on this sibling img element.

          parentAElement.css('cursor', 'pointer');

        }

      }

    });

Answers

  • Options
    Konstantin_Slavin-BoKonstantin_Slavin-Bo Customer Ninja IT Monkey ✭✭✭✭

    You can actually do it a bit simpler, by taking advantage of that events bubble in js. So you simply attach a new function to the click event of the media-link class (which is the a-tag wrapping the img and span), which simulates a click on the span (which is the actual link), like so:

     /* Make icons clickable */
 $('body').on('click', '.media-link', function() {

     var $this = $(this);
     $nextAnchor = $this.next().find('a').find('span');
     $nextAnchor.trigger('click');
     $nextAnchor.get(0).click();

 });

    Since the event is bubbling up to body, you don't even have to use a mutationobserver to wait for the catalog to load, as you simply attach the event to the body, selecting only the media-link class.

  • Options
    CaterhamITSupportCaterhamITSupport Member Advanced IT Monkey ✭✭✭

    Getting the following error now:

    Server Error in '/' Application.

    Runtime Error

    Description: An application error occurred on the server. The current custom error settings for this application prevent the details of the application error from being viewed remotely (for security reasons). It could, however, be viewed by browsers running on the local server machine.


    Details: To enable the details of this specific error message to be viewable on remote machines, please create a <customErrors> tag within a "web.config" configuration file located in the root directory of the current web application. This <customErrors> tag should then have its "mode" attribute set to "Off".


    <!-- Web.Config Configuration File -->

<configuration>
    <system.web>
        <customErrors mode="Off"/>
    </system.web>
</configuration>

    Notes: The current error page you are seeing can be replaced by a custom error page by modifying the "defaultRedirect" attribute of the application's <customErrors> configuration tag to point to a custom error page URL.


    <!-- Web.Config Configuration File -->

<configuration>
    <system.web>
        <customErrors mode="RemoteOnly" defaultRedirect="mycustompage.htm"/>
    </system.web>
</configuration>

    Could you copy the full code for this for me?

  • Options
    CaterhamITSupportCaterhamITSupport Member Advanced IT Monkey ✭✭✭
    Answer ✓

    Dear All,

    This is still a problem could you help:

    I have the following code which removed favourites from Service Catalog, however it breaks the hyperlink on the picture. So you can click on the text and it goes to the link but when clicking on a picture it does nothing:

    Any help please?

    Daniel

    Code:

    $(document).ready(function(){

      //Since this uses a mutationobserver against a guaranteed-to-exist object, make sure we are only on the Home alternate page.

      if (document.URL.indexOf("/View/02efdc70-55c7-4ba8-9804-ca01631c1a54") === -1) { 

        return; 

      }

       

      //The service catalog and request offerings don't load immediately. So wait until it does load.

      var mainPageNode = document.getElementById('main_wrapper');

       

      // create an observer instance

      var observer = new MutationObserver(function(mutations) {

        //The page changed. See if any RO descriptions exist yet. 

        var titleElements = $(".sc-item-title");

        if (titleElements.length > 0) {

          fn_SetRequestOfferingImagesToOpenROs();

          observer.disconnect();

        }

      });

       

      // configure the observer. For our purposes, subtree is required.

      var observerConfig = { attributes: true, childList: true, subtree: true, characterData: true };

       

      // pass in the node, and our mutationobserver options.

      observer.observe(mainPageNode, observerConfig);

       

      //Create the function to add our click event.

      function fn_SetRequestOfferingImagesToOpenROs() {

        //hide all star icons so that you cannot set favorites. This would interfere with clicking on the request offering images.

        var favoriteIconElements = $('.fa-star-o');

        favoriteIconElements.hide();

        function clickChildRequestOffering(event) {

          console.log("clicked!");

          var parentAElement = event.target;

          //call the click event of the child img element.

          var childImgElement = $(parentAElement).find("img")

          childImgElement.click();

        };

        //For every icon, there's a sibling img element. Get it since it contains our click() event, which opens up the RO. We need to apply this to the parent <a>.

        for (var i = 0; i < favoriteIconElements.length; i++) {

          var siblingImgElement = $(favoriteIconElements[i]).parent().find("img")

          var parentAElement = siblingImgElement.parent();

           

          //Add our custom event to our img element, which will just end up calling the click event of the child <i>

          parentAElement.click(clickChildRequestOffering);

           

          //Change the hover event on this sibling img element.

          parentAElement.css('cursor', 'pointer');

        }

      }

    });

  • Options
    steve_tuelsteve_tuel Cireson Consultant Adept IT Monkey ✭✭

    Not sure if you are still looking for an answer here but I have this working. Just update the function below with this:

          function clickChildRequestOffering(event) {  

            console.log("clicked!"); 

            var parentAElement = event.target;

            var childImgElement = $(parentAElement).find("img")  

            var drId = childImgElement.attr("data-request")

            var titleLink = "span[data-request='" + drId + "']"

            $(titleLink).click()

     

          }

Sign In or Register to comment.