Twitter.

[sepoto]

I have this code that does some AJAX to go back into my database and extract an array of bars. I have developed the code to change one of my div's to display all the data for each bar. In addition to displaying the data I also need to modify the contents of #latestFromDSGbuffer to contain a twitter feed of 5 tweets each per bar that was queried. I have tried a number of samples but for some reason I am able to get the twitter samples working in a sandbox but when I try to integrate that code things don't seem to be working out. I don't know if maybe that is because I was trying to call $.ajax(); inside of the callback function from another $.ajax(). Maybe the design needs to be modified? Maybe I should use some DOM storage to store barLocations? I'm wondering what to do with it. All of the data is located in "barLocations". Although I have attempted to make "barLocations" "global" I am not able to access it from within button.onclick where it is showing as "undefined".

$.ajax({ url: 'ajax.php',		 data: { lat: results[0].geometry.location.lat(), lng: results[0].geometry.location.lng(), radius: radius },		 type: 'post',		 success: function(output) {					barLocations = $.parseJSON(output);															//alert(obj[0].lat);					/* So now that we have the JSON encoded array it					has to be displayed into one of the div's probably					below the map someplace */					var newInnerHTML = "";								   	 for(var i = 0; i < barLocations.length; i++)					{						newInnerHTML = newInnerHTML + "<strong>" + barLocations[i].company + "</strong></br>";						newInnerHTML = newInnerHTML + barLocations[i].first_name + " " + barLocations[i].last_name + "</br>";						newInnerHTML = newInnerHTML + barLocations[i].street_address1 + "</br>" + barLocations[i].street_address2 + "</br>" + barLocations[i].city + "</br>";						newInnerHTML = newInnerHTML + "Phone: " + barLocations[i].phone_number + "</br>";						newInnerHTML = newInnerHTML + "Email: " + barLocations[i].email + "</br>";						newInnerHTML = newInnerHTML + "Website: " + barLocations[i].website + "</br>";						newInnerHTML = newInnerHTML + "<a href=\"standardprofile.php\" target=\"_blank\">Profile page >>>></a>";						newInnerHTML = newInnerHTML + "</br></br>";					}															for (i = 0; i < barLocations.length; i++) {												var markerImage = 'image/baricon.png';																	marker = new google.maps.Marker({							position: new google.maps.LatLng(barLocations[i].lat,barLocations[i].lng),							map: map,							icon: markerImage,							title: barLocations[i].company						});					}															if(barLocations.length > 0)					{						document.getElementById('divBarLocations').innerHTML = newInnerHTML;					}									}				  				  		});

Thanks in advance for any help comments or commentary. Your input is most welcome... The whole code looks more like this:

(function() {	var map, geocoder, marker, infowindow, barLocations;		window.onload = function() {			$('#hdivBarLocations').hide();				 				// Creating a reference to the mapDiv		var mapDiv = document.getElementById('map'); 		// Creating a latLng for the center of the map		var latlng = new google.maps.LatLng(37.09, -95.71); 		// Creating an object literal containing the properties		// we want to pass to the map  		var options = {		center: latlng,		zoom: 4,		mapTypeId: google.maps.MapTypeId.ROADMAP		}; 		// Creating the map		map = new google.maps.Map(mapDiv, options);				// Getting a reference to the HTML form		var button = document.getElementById('addressButton'); 		// Catching the forms submit event		button.onclick = function() {					button.disabled = true;						// Getting the address from the text input			var address = document.getElementById('addressBox').value;			var radius = document.getElementById('radialDistance').value; 						// Making the Geocoder call			getCoordinates(address, radius); 			// Preventing the form from doing a page submit			//return false;			$('#hdivBarLocations').show();							}	}	  // Create a function the will return the coordinates for the address  function getCoordinates(address, radius) {			// Check to see if we already have a geocoded object. If not we create one	if(!geocoder) {	  geocoder = new google.maps.Geocoder();		} 	// Creating a GeocoderRequest object	var geocoderRequest = {	  address: address	} 	// Making the Geocode request	geocoder.geocode(geocoderRequest, function(results, status) {	  	  // Check if status is OK before proceeding	  if (status == google.maps.GeocoderStatus.OK) {				//Go back in for some data.						document.getElementById('divBarLocations').innerHTML = "No bars found in your area...";				$.ajax({ url: 'ajax.php',		 data: { lat: results[0].geometry.location.lat(), lng: results[0].geometry.location.lng(), radius: radius },		 type: 'post',		 success: function(output) {					barLocations = $.parseJSON(output);															//alert(obj[0].lat);					/* So now that we have the JSON encoded array it					has to be displayed into one of the div's probably					below the map someplace */					var newInnerHTML = "";								   	 for(var i = 0; i < barLocations.length; i++)					{						newInnerHTML = newInnerHTML + "<strong>" + barLocations[i].company + "</strong></br>";						newInnerHTML = newInnerHTML + barLocations[i].first_name + " " + barLocations[i].last_name + "</br>";						newInnerHTML = newInnerHTML + barLocations[i].street_address1 + "</br>" + barLocations[i].street_address2 + "</br>" + barLocations[i].city + "</br>";						newInnerHTML = newInnerHTML + "Phone: " + barLocations[i].phone_number + "</br>";						newInnerHTML = newInnerHTML + "Email: " + barLocations[i].email + "</br>";						newInnerHTML = newInnerHTML + "Website: " + barLocations[i].website + "</br>";						newInnerHTML = newInnerHTML + "<a href=\"standardprofile.php\" target=\"_blank\">Profile page >>>></a>";						newInnerHTML = newInnerHTML + "</br></br>";					}															for (i = 0; i < barLocations.length; i++) {												var markerImage = 'image/baricon.png';																	marker = new google.maps.Marker({							position: new google.maps.LatLng(barLocations[i].lat,barLocations[i].lng),							map: map,							icon: markerImage,							title: barLocations[i].company						});					}															if(barLocations.length > 0)					{						document.getElementById('divBarLocations').innerHTML = newInnerHTML;					}									}				  				  		});								circ = null;				var circ = new google.maps.Circle({			map: map,			radius: radius * 1609.344		});				circ.setCenter(results[0].geometry.location);				// Center the map on the returned location		map.setCenter(results[0].geometry.location); 		map.fitBounds(circ.getBounds());				google.maps.event.trigger(map,'dragend');				var markerImage = 'image/home.png';				// Check to see if we've already got a Marker object		if (!marker) {		  // Creating a new marker and adding it to the map		  marker = new google.maps.Marker({			map: map,			icon: markerImage		  });		}				// Setting the position of the marker to the returned location		marker.setPosition(results[0].geometry.location); 		// Check to see if we've already got an InfoWindow object		if (!infowindow) {		  // Creating a new InfoWindow		  infowindow = new google.maps.InfoWindow();		} 		// Creating the content of the InfoWindow to the address		// and the returned position		var content = '<span style="color: black;">Your location.</span>'; 		// Adding the content to the InfoWindow		infowindow.setContent(content); 		// Opening the InfoWindow		infowindow.open(map, marker);		 	  }	  	});   }})();

Edited August 25, 2012 by sepoto

[sepoto]

I like this code but I am finding I have to modify it: http://tweet.seaofclouds.com/ So then this will be my first jQuery plug-in.

[justsomeguy]

At which point in the code does it say the variable is undefined?

[sepoto]

 // Catching the forms submit eventbutton.onclick = function() { button.disabled = true; // Getting the address from the text inputvar address = document.getElementById('addressBox').value;var radius = document.getElementById('radialDistance').value;  // Making the Geocoder callgetCoordinates(address, radius); // Preventing the form from doing a page submit//return false;$('#hdivBarLocations').show();  alert(barLocations[0].twitter);	//<<<<-----------------------------}

So I reproduced the code where the undefined variable was taking place. alert(barLocations[0].twitter); inside of the onclick. I am still perplexed and I tried using window.barLocations and global.barLocations but I think there is a problem with those becasue I was trying to use them inside the protected "namespace" that this code is inside of. In either case the script behaved like there was a syntax error.

Edited August 27, 2012 by sepoto

[justsomeguy]

If you initially define and set up the variable using window.barLocations then that will explicitly make it global (global is anything inside the window object). You can refer later to window.barLocations and it should find the same thing.

[sepoto]

So I suppose then that just doing this is not quite enough to declare the global:

 <script type="text/javascript" src="jquery/jquery-1.8.0.js"></script><script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script><script type="text/javascript">var window.barLocations;</script><script type="text/javascript" src="js/jquery.tweet.js"></script><script type="text/javascript" src="js/barsmap.js"></script>

I put that into my header. It is still coming up undefined when I try to access it through onclick. I had also changed this line here: window.barLocations = $.parseJSON(output); Does the variable actually have to be defined with some data first in order for it to be global? It still is not behaving globally for me... Thanks so much for taking an interest in this.

[justsomeguy]

Everywhere in your code you should use window.barLocations, not just barLocations, and don't use var to define it. You shouldn't use just barLocations anywhere.

[smiles]

$(function(){...}) will run after all DOMs loaded, while window.onload does the same but include images, objects ... loaded.So why put window.onload inside $(function(){...}), just comment it out. Try declare barLocations outside $(function(){...}), use var barLocations = []; then in success function: barLocations = []; (reset it)barLocations.push($.parseJSON(output)); I think your alert will be OK!

[sepoto]

Thank you very much for the great input...