#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2013
    Posts
    13
    Rep Power
    0

    mouseover event not firing


    Hello,

    I have some jquery code that is supposed to display some database information (using Ajax) upon "mouseover" of a class selector
    named "profile."

    The class selector (class='profile') is located in a variable named "html," which is within a google map api line of code that creates
    a marker.

    My goal is to have my google map display various markers pulled from a mySql database and when I click on the marker name, address,
    etc., shows in the "popup." This all works great.

    However, I also want to "mouseover" the name of the person in the popup and have a "tooltip" appear showing additional information pulled form a
    separate database table.

    But, when I "mouseover" the name of the person displayed in the google map marker popup, the jquery code that
    creates the "tooltip" is not triggered.

    Curiously, the code that creates the "tooltip" works perfectly in another part of my website. It's only when I try and trigger this
    code from a class selector located within the google map api code does the problem occur. When I mouseover the class selector
    ('.profile') nothing happens.



    Here is the relevant code (entire page). I have highlighted in green the relevant code.

    Thanks for any suggestions!

    Code:
    <!DOCTYPE html xmlns="http://www.w3.org/1999/xhtml">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <title></title>
    	
    	 
    		  <link href="display_page.css" rel="stylesheet" type="text/css"media="screen">
    	   	 <link type="text/css" rel="stylesheet" href="../dcodes/css3_buttons/css/dc_css3_buttons.css" media="screen" />
    	
    	
    	
        <script src="http://maps.google.com/maps/api/js?sensor=false"type="text/javascript"></script>
    	
        
    
    		
           <?php //enable variables to be available to functions below
      
      $zippp = ($_GET['zipcode']);
      $lname = ($_GET['lastname']);
      $fname = ($_GET['firstname']);
      $eemail = ($_GET['email']);
    
      ?>
          
        <script type="text/javascript">
    	
    	
    	
        //<![CDATA[
        var map;
        var markers = [];
        var infoWindow;
        var locationSelect;
    
    	
    	
    	
    	
        function load() {
          map = new google.maps.Map(document.getElementById("map"), {
            center: new google.maps.LatLng(33.640203, -111.926008),
            zoom: 10,
            mapTypeId: 'roadmap',
            mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
          });
    	  infoWindow = new google.maps.InfoWindow(); 
    
    	  /////////////////////////////new test stuff///////////////
    	  
    	  
    	 /*  var contentString =
    	  '<div id="content">'+
          '<div id="siteNotice">'+
          '</div>'+
          '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
          '<div id="bodyContent">'+
          '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
          'sandstone rock formation in the southern part of the '+
          'Northern Territory, central Australia. It lies 335 km (208 mi) '+
          'south west of the nearest large town, Alice Springs; 450 km '+
          '(280 mi) by road. Kata Tjuta and Uluru are the two major '+
          'features of the Uluru - Kata Tjuta National Park. Uluru is '+
          'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
          'Aboriginal people of the area. It has many springs, waterholes, '+
          'rock caves and ancient paintings. Uluru is listed as a World '+
          'Heritage Site.</p>'+
          '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
          'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
          '(last visited June 22, 2009).</p>'+
          '</div>'+
          '</div>';
    	  
    	  infoWindow = new google.maps.InfoWindow({
    	  
    	  content: contentString
    	  
    	  
    	  });
    	 
    	  
    	  
    	  ///////////////////////end new test stuff////////////////////////////*/
    	  
    	  
    	  
          locationSelect = document.getElementById("locationSelect");
          locationSelect.onchange = function() {
            var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
            if (markerNum != "none"){
              google.maps.event.trigger(markers[markerNum], 'click');
            }
          };
       }
    
       function searchLocations() {
          
         var address = document.getElementById("addressInput").value;
         var geocoder = new google.maps.Geocoder();
         geocoder.geocode({address: address}, function(results, status) {
           if (status == google.maps.GeocoderStatus.OK) {
            searchLocationsNear(results[0].geometry.location);
                    
            addMarker(results[0].geometry.location);//adds marker at center point of client's zipcode
            
            
            
            
           } else {
             alert(address + ' not found');
           }
         });
       }
    
    
    
    
    // Add a marker to the map and push to the array.
    function addMarker(location) {
    image = '../general_images/coq_red_flag2.png';
    
    
      var marker = new google.maps.Marker({
        position: location,
        map: map,
        icon: image
      });
      
     var entryLength = document.getElementById("addressInput").value.length;//if other than zipcode entered, show address on "client" flag icon
     
         if (entryLength <= 11) { 
      
      var html = "<?php echo '<strong>Client :</strong> '." ".$fname." ".$lname."<br>".'<strong>Zip Code :</strong> '.$zippp;?>"; 
      }else{
      
      var html = "<?php echo '<strong>Client :</strong> '." ".$fname." ".$lname."<br>".'<strong>Email :</strong> '.$eemail;?>";
    
      }
      
      
    
       google.maps.event.addListener(marker, 'click', function() {
            infoWindow.setContent(html);  
            infoWindow.open(map, marker);
    		
          });
      
    
      //markers.push(marker);//do I need this?
    }
    
    
       function clearLocations() {
         infoWindow.close();
         for (var i = 0; i < markers.length; i++) {
           markers[i].setMap(null);
         }
         markers.length = 0;
    
         locationSelect.innerHTML = "";
         var option = document.createElement("option");
         option.value = "none";
         option.innerHTML = "Click here to see all results:";
         locationSelect.appendChild(option);
       }
    
       function searchLocationsNear(center) {
         clearLocations(); 
    
         var radius = document.getElementById('radiusSelect').value;
         var searchUrl = 'phpsqlsearch_genxml.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;
    	
         downloadUrl(searchUrl, function(data) {//alert(data);
           var xml = parseXml(data);
           var markerNodes = xml.documentElement.getElementsByTagName("marker");
           var bounds = new google.maps.LatLngBounds();
           for (var i = 0; i < markerNodes.length; i++) {
    	     var id = markerNodes[i].getAttribute("id");
             var firstname = markerNodes[i].getAttribute("firstname");
             var lastname = markerNodes[i].getAttribute("lastname");
             var address = markerNodes[i].getAttribute("address");
    		 var city = markerNodes[i].getAttribute("city");
    		 var bus_phone = markerNodes[i].getAttribute("bus_phone");
    		 var email = markerNodes[i].getAttribute("email");
    		 var distance = parseFloat(markerNodes[i].getAttribute("distance"));
             var latlng = new google.maps.LatLng(
                  parseFloat(markerNodes[i].getAttribute("lat")),
                  parseFloat(markerNodes[i].getAttribute("lng")));
    
             createOption(firstname, lastname, distance, i);//call createOption function...see below
             createMarker( latlng, id, firstname, lastname, address, city, bus_phone, email);
             bounds.extend(latlng);
           }
           map.fitBounds(bounds);
           locationSelect.style.visibility = "visible";
           locationSelect.onchange = function() {
             var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
             google.maps.event.trigger(markers[markerNum], 'click');
           };
          });
        }
    	
    	
      
        function createMarker(latlng, id, firstname, lastname, address, city, bus_phone, email) {
        
        image = '../general_images/coq_blue_flag.png';
    
      var html = "<p>" + "<b>" + "<a href='_blank' class='profile' id='id'>" + id + " " + firstname + " " + lastname  + "</a>" + "</b>" + "</p>" + "<br/>" + address + "," + " " + city + "<br/>" + bus_phone + " " + "<br/>" + "<a href='mailto:'+ email +'?subject=New%20Pro%20Bono%20Client%20from%20AzTRN'>Click here to email this therapist</a>" + "<br/>" + "(" + email + ")"; [/COLOR]
      
          var marker = new google.maps.Marker({
            map: map,
            position: latlng,
            icon:image
          });
          google.maps.event.addListener(marker, 'click', function() {
            infoWindow.setContent(html);  
            infoWindow.open(map, marker);
    		
          });
    	  
          markers.push(marker);
        }
    
    
        function createOption(firstname, lastname, distance, num) {
          var option = document.createElement("option");
          option.value = num;
          option.innerHTML = firstname + " " + lastname + "(" + distance.toFixed(1) + ")";
    
          locationSelect.appendChild(option);
        }
    
        function downloadUrl(url, callback) {
          var request = window.ActiveXObject ?
              new ActiveXObject('Microsoft.XMLHTTP') :
              new XMLHttpRequest;
    
          request.onreadystatechange = function() {
            if (request.readyState == 4) {
              request.onreadystatechange = doNothing;
              callback(request.responseText, request.status);
            }
          };
    
          request.open('GET', url, true);
          request.send(null);
        }
    
        function parseXml(str) {
          if (window.ActiveXObject) {
            var doc = new ActiveXObject('Microsoft.XMLDOM');
            doc.loadXML(str);
            return doc;
    		
    		
          } else if (window.DOMParser) {
            return (new DOMParser).parseFromString(str, 'text/xml');
          }
        }
    
        function doNothing() {}
    
    	
        //]]>
    	
    	
      </script>
      
      
      </head>
    
    <!-- onload below loads two functions to show therapists and client within preselected radius-->
      <body style="margin:0px; padding:0px;" onload="load();searchLocations()">
        <!--<body style="margin:0px; padding:0px;" onload="load()">-->
    
      <div id="wrapper">
         <?php include ('includes2/header_include2.php'); ?>
    	 
    	         <div id="left_sidebar">
    	           <?php include ('includes2/main_nav_include2.php'); ?>
    			    <?php include ('includes2/special_links_include2.php'); ?>
    			   
    		  </div><!---end of left_sidebar div--->
    		   
    		     <div id="center">
    		         <div class="right_side_line"></div>
    
    
    	
    	
       
    <div style="width:100%;">
    	
    	
         <input style="color:red;font-weight:bold;border:1px gray solid; margin-bottom:3px;" type="text" id="addressInput" value="<?php echo $zippp;?>" size="10">
    	 <input style="color:red;font-weight:bold;border:1px gray solid;" type="text" value="<?php echo 'Client : '." ".$fname." ".$lname;?>" size="22">
    	 
        <label style="background-color:white;color:black;border:0px gray solid;">Search Radius=</label><select style="background-color:white;color:red;border:0px blue solid;"id="radiusSelect">
          <option value="10">10mi</option>
    	  <option value="15">15mi</option>
          <option value="25">25mi</option>
          <option value="50">50mi</option>
    	  <option value="100" selected>100mi</option>
    	  <option value="300">All</option>
    
        </select>
        <input style="color:blue;background-color:white;border:thin blue solid;" type="button" onclick="searchLocations()" value="Search">
    	
        </div>
    	<br/>
        <div><select id="locationSelect" style="background-color:#D71D27;color:white;border:0px red solid;width:35%;visibility:hidden"></select></div>
        <div id="map" style="border:1px gray solid;max-width:900px; height: 75%"></div><br/> 
    	
    	 
        <div class="p-tooltip">	
        </div><!--the html (none in this case) within .p-tooltip is replaced by the ajax success function html results shown below--> 
    
    
    
    	
    	
           </div><!---end of center div--->
    	
    	
    
    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
    		
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    
    	<script type="text/javascript">
    	$(document).ready(function(){
    		function showProfileTooltip(e, id){
    			var top = e.pageY + -350;
    			var left = e.pageX +0;
    			
    			
    		
    			
    			
    			$('.p-tooltip').css({
    				'top':top,
    				'left':left
    				}).show();
    				
    				 
    			//send id & get info from get_profile.php
    			$.ajax({
    				//url: 'get_profile.php?id='+id,
    				url: 'get_profile.php',//this is alternate form of url from the one above.  But the "data" (below must be specified if using this form of url)
    				data: {
                    'id': id // < no need for semi-colon, properties are key->value based, 'key': value
                          },
    				beforeSend: function(){
    					$('.p-tooltip').html('getting data..');
    				},
    				dataType:"html",
    				success: function(result){ //(result) is the data from the url location, i.e. 'get_profile.php'
    					$('.p-tooltip').html(result); //alert(result); replace the current .p-tooltip selector (see above) with the "result" data from the line just above this one.
    				}
    			}); 
    
    		}
    
    		function hideProfileTooltip(){
    			$('.p-tooltip').hide();
    		}
    
    		$('.profile').mouseover(function(e){
    				
    			
    			var id = $(this).attr('id');
    			showProfileTooltip(e, id);
    			
    			
    			
    		}); 
    		
    		
    
    		$('.p-tooltip').mouseleave(function(){ 
    			hideProfileTooltip();
    		});
    
    	
    	});
    	
    	
    	</script>
    	
    
    	
    	
    		
    	
    	
    	
            <div id="push"></div>
    </div> <!---end of wrapper div---> 
    
     <?php include ('includes2/footer_include2.php'); ?>
    
     
    	</body>
    </html>
  2. #2
  3. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    345
    Rep Power
    90
    Hi there patibob,

    the code that you have posted contains "PHP" code.

    You need to post the actual rendered "HTML" code.

    This would then allow members to possibly see, and
    perhaps even solve your problem.

    coothead
    ~ the original bald headed old fart ~
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2013
    Posts
    13
    Rep Power
    0
    Thanks coothead for the quick reply,

    The only php code is to provide zipcode, lastname, etc. from the referring page as a reference to the user as to whom
    the google map marker is referring to. I don't believe it impacts the failure of the jquery code to fire.

    Attached is a picture example of the rendered html.

    Thanks for the help!


    [IMG]aztrn.com/jquery_question.jpg[/IMG]
  6. #4
  7. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    345
    Rep Power
    90
    Hi there patibob,

    if you don't post the actual rendered HTML code, as requested
    then I will be surprised if you get any replies the from members here.

    Have you actually tried the code that you posted?

    And what is point of posting a link to a meaningless image?

    coothead
    ~ the original bald headed old fart ~
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2013
    Posts
    13
    Rep Power
    0
    Hello coothead,

    In spite of your reference to my "meaningless image", I do want to thank you for responding.

    I realize that my question appears a bit abstract, but the issue I'm having is rather simple, albeit difficult to explain.

    I'm wondering if any of the talented developers on devshed have experienced a similar issue and might have a simple answer as to why my code does not work under the circumstances
    that I'm using it. Specifically,

    1. The jquery function "showProfileTooltip" works perfectly when not being called within google map api marker "popup." As I mentioned, I use this same code
    in another section of my site.
    2. Perhaps someone in the devshed community has experienced a similar issue and found a resolution.
    3. There is no HTML to render, because the jquery code is not firing when called from inside a google map marker popup.
    4. The useless image I posted was attempt to clarify what my question was.

    Thanks,

IMN logo majestic logo threadwatch logo seochat tools logo