Search the Community

Hi all, I would like to understand how JS/jQuery can interact with PHP to upload a status and a picture from the HTML5 canvas to Twitter. I set up a similar thing for FB and it works. I don't get how to do it for Twitter and I haven't found much about it. Could you explain to me how it works? I currently have this JS/jQuery code as a starting point: var formData = new FormData(), mimetype = canvas.toDataURL().substring(canvas.toDataURL().lastIndexOf(":") + 1, canvas.toDataURL().lastIndexOf(";")), blob = dataURItoBlob(canvas.toDataURL().split(',')[1], mimetype); formData.append('source', blob); $('#twitter').click( function() { $.ajax({ url: '', type: 'POST', data: formData, processData: false, contentType: false, cache: false, success: function() { $('#twitter').addClass('twitter-success'); setTimeout( function() { $('#twitter').removeClass('twitter-success'); }, 3000); } }); } ); Thank you!

Hi, I am currently trying to implement the posting of a canvas image to a Twitter wall.Below, first you see the JS I came up with.What I can't figure out is how am I supposed to get the keys and tokens provided in the PHP function below that code. Such PHP function is contained in the uploadFile.php file.JS: var base64img = canvas.toDataURL().split(',')[1]; $.ajax({ url: "uploadFile.php", type: "POST", data: base64img, processData: false, contentType: "application/octet-stream", }).done(function(respond) { alert(respond); }); PHP: function _microsite_last_tweets($search) {define('CONSUMER_KEY', 'my key');define('CONSUMER_SECRET', 'my key');define('ACCESS_TOKEN', 'my key');define('ACCESS_TOKEN_SECRET', 'my key');$connection = new TwitterOAuth(CONSUMER_KEY, CONSUMER_SECRET, ACCESS_TOKEN, ACCESS_TOKEN_SECRET);$content = $connection->get("account/verify_credentials");if ($search[0] == '@' && strpos($search,' ') == false) {$user = substr($search, 1);$tweets = $connection->get("statuses/user_timeline", array("screen_name" => $user, "count" => "4"));}else {$search = urlencode($search);$tweets = $connection->get("search/tweets", array("q" => $search . '+exclude:retweets', "result_type" => "recent","count" => "4"));}return $tweets;}

sorry

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); } }); }})();