none
How To Parse SharePoint List data to a JavaScript pop up on an HTML image map with hotspots RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote

    Hi,

    I have a SharePoint 2010 Intrane tand SharePoint Deisgner 2010. I have a list of European countries with a 'description' and 'country name' fields. I also have used SharePoint Deisgner 2010 to convert an image into an html map with hotspots, for use within a Content Editor WebPart to display an interactive map of Europe. I want to leverage Javascript / JQuery within my text file to match the data within that SharePoint list i.e. country and description to the corresponding hotspot representing that country in the html map. I want to display list data in a series of popups when a user hovers over a particular country. So when a user hovers over the UK for example, the data from the list corresponding to the UK i.e. name and description, will be displayed in a javascript pop up which appears when the user hovers over the country.

    The data in the list changes daily so I have to have up to date information in my pop ups, thats why i have used a list.

    Does anyone know how I can acheive this?

    Thanks in advance
    Monday, May 14, 2012 4:02 PM
    |

Answers

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote
    Hi zootmastaflex,

    In SharePoint 2010, you can use the ECMAScript (JavaScript, JScript) object model to retrieve and filter list data. Here are some articles about it:
    http://ranaictiu-technicalblog.blogspot.com/2010/07/sharepoint-2010-use-ecmascript-to.html
    http://www.learningsharepoint.com/2011/05/16/get-all-list-items-using-ecmascript-sharepoint-2010/
    http://msdn.microsoft.com/en-us/library/ee538253.aspx

    Try the following steps to achieve your requirement:
    1、Use javascript batch to binding mouseover event to 'country name' element items. Refer to the marked as answer's post of the following link:
    http://social.technet.microsoft.com/Forums/en-US/sharepointdevelopment/thread/40b756f3-64dd-473d-aa5b-c8b3695de286
    2、Get the 'country name' from mouseover event.
    3、Use  ECMAScript retrieve and filter list data by the 'country name'
    4、Pop up the retrieved information

    Thanks,
    Lhan Han
    Tuesday, May 15, 2012 3:23 AM
    |
    Moderator
  • Question
    Sign in to vote
    0
    Sign in to vote

    Hi Han,

    Thanks so much for this, I am new to Javascript so will need some help with the code. I am lost to understand your link for number 1.

    Tuesday, May 15, 2012 2:10 PM
    |
  • Question
    Sign in to vote
    0
    Sign in to vote
    Hi zootmastaflex,

    Here is a sample code of jquery Pop-up layer: 
      <div id="dialog" title="Dialog Title">I'm in a dialog</div>  
      <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  
  <script>
  $(document).ready(function() {
    $("#dialog").dialog();
  });
  </script>
    My above links also have some useful sample code in them. Your specific code you need to write according to your specific needs. Here are some links about how to learning javascript and jquery:
    http://docs.jquery.com/UI/Dialog
    http://net.tutsplus.com/tutorials/javascript-ajax/the-best-way-to-learn-javascript/

    Thanks,
    Lhan Han

    Wednesday, May 16, 2012 1:38 AM
    |
    Moderator
  • Question
    Sign in to vote
    0
    Sign in to vote

    Hi Han, thanks for your response. I have tried the tutorials but I am running out of time with this. This is what I have so far...

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.1.min.js"></script>

    <script type="text/javascript">

            $(EuropeMapCountries).ready(function () { //I assume this is the name of my list?
            

                $(Title).each(function () { //Country title field in the list
                
                    try {

                        var yourElement = $(this);//My 2 list fields
                        
                        var Description;

                        var str = yourElement.attr("onmouseover").toString();

                           onMouseOver="mouseEventHandler(mEvent)"

                        if (yourElement != null) {

                            yourElement.removeAttr("onmouseover");

                            yourElement.unbind("mouseover");

                            yourElement.attr({ href: "javascript:Success(" + Description + "," + Url + ")" });

                        }

                    }

                    catch (e) {

     

                    }

                });

            });

            function Success(Description, Url) {

                alert("testSuccessed");

            }

            function mouseEventHandlerforTitle(mEvent)
                {
                  // Internet Explorer
                      if (mEvent.srcElement)
                          {
                            alert(mEvent.srcElement.id);
                          }
                  // Netscape and Firefox
                      else if (mEvent.target)
                          {
                            alert(mEvent.target.id);
                          }
                }

                function mouseEventHandlerforDescription(mEvent2)
                {
                  // Internet Explorer
                      if (mEvent.srcElement)
                          {
                            alert(mEvent.srcElement.id);
                          }
                  // Netscape and Firefox
                      else if (mEvent.target)
                          {
                            alert(mEvent.target.id);
                          }
                }


            function getPopupObject(Title, Description)
                {
                    if (document.getElementById(Title))
                        {
                            return document.getElementById(Title);
                        }
                    else
                    {
                        return window.document[Title];
                    }
                {
                    if (document.getElementById(Description))
                        {
                            return document.getElementById(Description);
                        }
                    else
                    {
                        return window.document[Description];
                    }

                }


    <div id="popUpBox" onMouseOut='javascript:this.style.display="none";' style="position:absolute;display:none;">
    </div>

      <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>


    function showPopup(mEvent, Title)
    {
    var popup=getPopupObject(Title);
    $(Title).ready(function() {
        $("#dialog").dialog();
      });
     
    </script>


    </head>

    <body>

    </body>

    </html>

    I am not sure if this is correct? please help. Thanks in advance

    Wednesday, May 16, 2012 11:30 AM
    |
  • Question
    Sign in to vote
    0
    Sign in to vote
    Hi zootmastaflex,

    Please use the IE developer tools to debug your code.
    Here are some articles about how to use IE developer tools debugging JavaScript:
    http://blogs.msdn.com/b/cbowen/archive/2011/06/24/internet-explorer-9-developer-tools-deep-dive-part-3-debugging-javascript.aspx
    http://blogs.msdn.com/b/kaevans/archive/2011/04/25/debugging-javascript-with-the-ie-developer-tools.aspx

    Thanks,
    Lhan Han
    Thursday, May 17, 2012 1:54 AM
    |
    Moderator