none
Clickable items in InfoBox problems with Firefox/Safari RRS feed

  • Question

  • For some reason in Firefox & Safari (possibly Chrome too, haven't tried that) I'm unable to click on any html buttons or links that I've put into my infoboxes. In IE everything works great and the buttons and hyperlinks all fire off their javascript or go to other web pages. However in other browsers the onclick event seems to not even register.

    I'm designing the content of my infoboxes in javascript and passing the html into the infobox via the setHtmlContent method, has anyone run into this same problem and found a solution? If anyone has any suggestions for work-arounds I'd love to hear it. I've included a demo page illustrating this issue.

    Thanks for your help!

     

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
     <title>Map Testing</title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
    <style type="text/css">
    .rd-profile {
    float:left;
    background:#fff;
    border:2px solid #aaccff;
    width:170px;
    padding:5px 10px;
    color:#333;
    font-family:'lucida grande', Lucida Sans Unicode, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight:normal;
    display:inline-block;
    border-radius:8px;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    -moz-box-shadow:0px 5px 10px #999;
    -webkit-box-shadow:0px 5px 10px #999;
    box-shadow:0px 5px 10px #999;
    height:40px;
    }
    .rd-profile h1 {
    font-size:13px;
    font-weight:bold;
    margin:0;
    padding:0;
    width:240px;
    }
    .rd-profilec {
    float:left;
    width:175px;
    margin:3px 0 0 5px;
    }
    .rd-profile p {
    margin:0;
    padding:0 0 2px 0;
    }
    .rd-profile a {
    color:#06c;
    text-decoration:none;
    }
    .rd-profile a:hover {
    text-decoration:underline;
    }
    
    </style>
     <script type="text/javascript">
         var map = null;
         var pinInfobox = null;
         
         
         function setupMap() {
             map = new Microsoft.Maps.Map(document.getElementById('Map'),
                             { credentials: '',
                                 center: new Microsoft.Maps.Location(43, -94),
                                 mapTypeId: Microsoft.Maps.MapTypeId.road,
                                 zoom: 4,
                                 enableClickableLogo: false,
                                 enableSearchLogo: false,
                                 showLogo: false,
                                 tileBuffer: 1,
                                 fixedMapPosition: true
                             });
    
             //needed to hide the infobox when the map is moved
             Microsoft.Maps.Events.addHandler(map, 'viewchange', mapViewChange);
    
             var pin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(34, -117));
             Microsoft.Maps.Events.addHandler(pin, 'click', pinMouseOver);
             map.entities.push(pin);
             
         };
         //*************** INFO BOX ********************************************
         function displayInfobox(e) {
    
             stopInfoboxTimer(e);
    
             pin = e.target;
             if (pin != null) {
    
                 //get result sets from array
                 var Content = '';
    
                 //setup pin
                 var options = {
                     visible: true,
                     showPointer: true,
                     offset: new Microsoft.Maps.Point(0, pin.getHeight()),
                     zIndex: 999
                 };
    
                 if (pinInfobox != null) {
                     map.entities.remove(pinInfobox);
                     if (Microsoft.Maps.Events.hasHandler(pinInfobox, 'mouseleave'))
                         Microsoft.Maps.Events.removeHandler(pinInfobox.mouseLeaveHandler);
                     if (Microsoft.Maps.Events.hasHandler(pinInfobox, 'mouseenter'))
                         Microsoft.Maps.Events.removeHandler(pinInfobox.mouseEnterHandler);
                     pinInfobox = null;
                 };
    
                 pinInfobox = new Microsoft.Maps.Infobox(pin.getLocation(), options);
    
                 pinInfobox.mouseLeaveHandler = Microsoft.Maps.Events.addHandler(pinInfobox, 'mouseleave', pinInfoboxMouseLeave);
                 pinInfobox.mouseEnterHandler = Microsoft.Maps.Events.addHandler(pinInfobox, 'mouseenter', pinInfoboxMouseEnter);
    
                 map.entities.push(pinInfobox);
    
                 Content += "<div class='rd-profile'><h1>Test</h1><div class='rd-profilec'><p><input type='button' name='btn-1' id='btnId-1' value='Show Classes 1' onclick=showClasses('1'); /></p></div></div></div>"
                 Content += "<div class='rd-profile'><h1>Test</h1><div class='rd-profilec'><p><a href='#' onclick=showClasses(3); ><img src='/images/products/PP/btn-show-classes.png'/></a></p></div></div></div>"
                 Content += "<div class='rd-profile'><h1>Test</h1><div class='rd-profilec'><p><a href='http://www.bing.com'>Test</a></p></div></div></div>"
    
                 Content = "<div class='rd-profilea'>" + Content + "</div>";
    
                 pinInfobox.setHtmlContent(Content);
    
             }
         }
    
         function hideInfobox(e) {
             if (pinInfobox != null) {
                 pinInfobox.setOptions({ visible: false });
             }
         }
    
         function startInfoboxTimer(e) {
    
             if (pinInfobox.pinTimer != null) {
                 clearTimeout(pinInfobox.pinTimer);
             }
    
             pinInfobox.pinTimer = setTimeout(timerTriggered, 300);
         }
    
    
         function stopInfoboxTimer(e) {
             if (pinInfobox != null && pinInfobox.pinTimer != null) {
                 clearTimeout(pinInfobox.pinTimer);
             }
         }
    
         function mapViewChange(e) {
             stopInfoboxTimer(e);
             hideInfobox(e);
         }
         function pinMouseOver(e) {
             displayInfobox(e);
         }
         function pinMouseOut(e) {
             startInfoboxTimer(e);
         }
         function pinInfoboxMouseLeave(e) {
             hideInfobox(e);
         }
         function pinInfoboxMouseEnter(e) {
             stopInfoboxTimer(e);
         }
         function timerTriggered(e) {
             hideInfobox(e);
         }
    
         // *************** END INFO BOX ********************************************
         function showClasses(classid) {
            alert('click')
         }  
    </script>
    </head>
    <body onload="setupMap();">
     <div id='Map'></div>
    </body>
    </html>
    


     


    • Edited by BMiller-1 Friday, December 9, 2011 1:54 AM
    • Moved by Ricky_Brundritt Saturday, March 10, 2012 12:30 PM (From:Bing Maps: Map Control and Web services Development)
    Friday, December 9, 2011 1:52 AM

Answers

All replies

  • Just for anyone else that may at some point run into this situation, this line "map.entities.push(pinInfobox);" needs to be AFTER the line where the .setHTMLContent method is called. Not sure why that seems to have just changed, but there it is.
    Monday, December 12, 2011 5:58 PM
  • You can use 'htmlContent' property  http://msdn.microsoft.com/en-us/library/gg675210.aspx, if you intent to use html content for infobox. setHTMLcontent is more to update the content to already added infobox with html content.

     


    MSFT
    Hemant Goyal
    Monday, December 12, 2011 6:52 PM
  • My application that has been in production for the last 6 months just stopped working correctly because of this bug. No one can use the map we've built in now because of this change. Very frustrating.


    C#, ASP.NET San Diego, California programmer
    Tuesday, December 13, 2011 12:20 AM
  • Could you try again? There has nothing which have changed recently which have have broken your app. Also, we released a patch on Friday Dec 9, to fix a issue which was related to EntityCollection & entities.

     


    MSFT
    Hemant Goyal
    Tuesday, December 13, 2011 1:08 AM
  • I will describe how the infobox for my application works and how it is broken.

    It is only broken in non-IE browsers.

    When the map first loads I instantiate a new Infobox object.

    infobox =

    new Microsoft.Maps.Infobox(newMap.getCenter(), { visible: false });
     

    newMap.entities.push(infobox);

    As a user clicks on points on a map I use that single instance of the infobox to show details about what the user just clicked on.  So first the infobox gets unhidden.

    infobox.setOptions({ visible:

    true });
     

    infobox.setOptions({ offset:

    new Microsoft.Maps.Point(0, jsonDetails.Size / 2) });

    infobox.setOptions({ zIndex: 1000 });

    Then I set the content of the infobox.

    infobox.setHtmlContent(templateHtml);

    After doing this the content in the Infobox isn't clickable. There are links in my template HTML that don't work. Any help would be apreciated as it still doesn't work in non-IE browsers.

       


    C#, ASP.NET San Diego, California programmer
    • Edited by Paul Mendoza Wednesday, December 21, 2011 5:59 PM
    Wednesday, December 21, 2011 5:44 PM
  • I just tested the infobox on the official Bing demo site in Chrome and the links are also unclickable in the infoboxes there as well. 

    http://www.bingmapsportal.com/isdk/ajaxv7#Infobox20

    Here is what I put into the code section and ran for that demo. Notice that I added "<a href="www.google.com">Hello</a>" to the HTML section.

    map.entities.clear();
     var infoboxOptions = {width :200, height :100, showCloseButton: true, zIndex: 0, offset:new Microsoft.Maps.Point(10,0), showPointer: true};
     var defaultInfobox = new Microsoft.Maps.Infobox(map.getCenter(), infoboxOptions );   
     map.entities.push(defaultInfobox);
     defaultInfobox.setHtmlContent('<div id="infoboxText" style="background-color:White; border-style:solid;border-width:medium; border-color:DarkOrange; min-height:100px; position:absolute;top:0px; left:23px; width:240px;"><b id="infoboxTitle" style="position:absolute; top:10px; left:10px; width:220px;">myTitle</b><a href="Hellowww.google.com">Hello</a><a id="infoboxDescription" style="position:absolute; top:30px; left:10px; width:220px;">Description</a></div>');

    If you test this in IE you'll notice that the link is clickable there but not in Chrome.

     


    C#, ASP.NET San Diego, California programmer

    • Edited by Paul Mendoza Wednesday, December 21, 2011 5:54 PM
    Wednesday, December 21, 2011 5:51 PM
  • Cursory research shows there is a "pointer-events" css property being set to "none" on the dom element that wraps the .Infobox node.

    https://developer.mozilla.org/en/CSS/pointer-events

    When disabling this property in Chrome inspector or Firebug, the link(s) in the Infobox begin to behave as expected.

    Programatically disabling the property can be accomplished via:

    document.querySelector('.Infobox').parentNode.style.pointerEvents = '';
    

    After setting the infobox html content.

    The MDN page for said property warns that this property should not be set on non-svg elements.

    Thursday, December 22, 2011 3:40 PM
  • Have you got an answer to this yet?

    My Infobox is appearing under the map tiles on Chrome.  It works fine on IE.  The links on the infobox are not clickable.  I am setting the z-index on the infobox html as well as setting the zIndex option for the infobox.

    Wednesday, April 4, 2012 12:49 PM
  • I have now got it working.  It definetely is the pointer-events in the fourth parent is causing it in chrome, my fix was two step.

    1 - I had to set the html separately

    Infobox.setHtmlContent(e.target.Description);

    2 - Run this javascript in pushpin handler to open the infobox:

        setTimeout(function () {
            jQuery('.myInfoBox').parent().parent().parent().parent().css("pointer-events", "all");
        }, 500);

    NOT:  Setting the Html inside options did not work:

    setOptions({ zIndex: 1000, htmlContent: e.target.Description }

    It must be set as:

    Infobox.setHtmlContent(e.target.Description);

    However, why the markup style set as "pointer-events:none" should be handled by BingMap developers.  It is stoping any links in html from working.

    Wednesday, April 4, 2012 3:19 PM