Friday, August 17, 2018

Promoted Tiles - Popup Prior to Click

Scenario
  • You have a promoted tiles web part on a page
  • You need to prompt the user with a dialog box prior to navigating to the link on click
Issue
  • The onclick attribute is dynamically populated by the control, so it's hard to manipulate using Javascript or JQuery
Resolution
  • The key is to use the mousedown event instead.
    • Note: This will not support keyboard navigation so you may need to handle the keydown event as well.
  • Here is the code for the Script Editor.  Adapt the URLs for your environment
<script type="text/javascript" src="/SiteAssets/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/teams/print/SiteAssets/PromotedLinkPrompt.js"></script>
  • Here is the PromotedLinkPrompt.js code
console.log("PromotedLinkPrompt.js Loaded");

localStorage.setItem("PopupContentDone", "false");

function PopupContent()
{
var done = localStorage.getItem("PopupContentDone");
if (done == "false")
{
if (confirm("Does this work?\n\nClick OK to Proceed.\nClick Cancel for More Info.")) 
{
$(this).find("a")[0].click();
}
else
{
window.location = "http://www.votematrix.com";
}
localStorage.setItem("PopupContentDone", "true");
}
}

$(document).ready(function () {$("div .ms-tileview-tile-content").mousedown(PopupContent)});

7 comments:

  1. Connect to us at Quickbooks for Mac Support Phone Number 1-800-986-4607 for any QuickBook assistance. We deliver support services to a wide range of clients. We're accessible to you 24*7. Feel Free to reach us whenever you need it.

    ReplyDelete
  2. Nice information on here, I would like to share with you all my experience trying to get a loan to expand my Clothing Business here in Malaysia. It was really hard on my business going down due to my little short time illness then when I got heal I needed a fund to set it up again for me to begin so I came across Mr Benjamin a loan consultant officer at Le_Meridian Funding Service He asked me of my business project and I told him i already owned One and i just needed loan of 200,000.00 USD he gave me form to fill and I did also he asked me of my Valid ID in few days They did the transfer and my loan was granted. I really want to appreciate there effort also try to get this to anyone looking for business loan or other financial issues to Contact Le_Meridian Funding Service On Email: lfdsloans@lemeridianfds.com / lfdsloans@outlook.com He also available on WhatsApp Contact:+1-9893943740.

    ReplyDelete
  3. If you are having issues with QuickBooks, you can contact QuickBooks support at : +1-800-496-0147
    or visit our website: https://askofficial.com/quickbooks-error-support/t

    ReplyDelete
  4. Cloud Computing Can make tasks easy for the user all their information can be safe into the software without spending money to hire any IT Professional Cloud Computing Sacramento

    ReplyDelete
  5. Thank you so much for sharing this informative blog. Visit Pulprolls for 80x80 80x70 7950 7925 POS Thermal Paper Toll Rolls Exporter and 5730 5725 5715 Thermal Credit Card Swipe Machine POS Paper Rolls Manufacturer.
    80x80 80x70 7950 7925 POS Thermal Paper Toll Rolls Exporter

    ReplyDelete
  6. Thank you so much for sharing such an informative blogs. Visit Kalakutir for Bus Branding, Fast Food Branding, Industrial Painting, and Industrial Floor Marking.
    Industrial Painting

    ReplyDelete
  7. Amazing information. Get the best Home Nursing Services in Delhi NCR for Suturing Removal at Home RT Insertion at Home, and Elderly Care at Home. For more information visit Orange Pill Clinic.
    Nursing Services for Suturing Removal at Home

    ReplyDelete