I want to get images from a flickr rss but this code won't get them.
This is what I got up with after some help from my original qustion here : Jquery in Internet Explorer: find image problem(works in FF and Chrome)
The problem is getting the data in right format to my web page.
My page's URL is : zalastax.co.cc/pictures.html
Javascript:
$.ajax({
type: "GET",
url: "js/getflickreasy.php",
dataType: "xml",
success: function(data) {
$(data).find("item").each(function() {
var item = $(this), title, description, thumbnail;
title = item.find("title").text();
description = item.find("description").text();
thumbnail = item.find("img").attr("src");
});
}
});
PHP:
<?
header("content-type: text/xml");
readfile("http://api.flickr.com/services/feeds/photos_public.gne?id=42980910#N02&lang=en-us&format=xml");
?>
Edit: Mathews code works.
But I have a problem with appending some data.
var currentImage = 0;
//get flicker images from rss.
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=42980910#N02&lang=en-us&format=json&jsoncallback=?", function(data) {
$(data.items).each(function() {
var item = this,
title, description, thumbnail;
title = item.title;
description = item.description;
thumbnail = item.media.m;
if (currentImage % 3 === 0) {
$("#apa").append("<p>HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH</p>");
}
currentImage++;
$("#apa").append("<div id=\"div" + currentImage + "\" class=\"imageContainer pictDiv\"><img id=\"img" + currentImage + "\" class=\"bild pictImg\" src=\"" + thumbnail + "\" /></div>");
$("#bakgrund").append("<img id=\"bkg" + currentImage + "\" class=\"bgrund pictBkg\" src=\"Bilder/polaroid.png\" />");
});
$("#bakgrund").append("<img id=\"bkg" + currentImage + "\" class=\"bgrund pictBkg\" src=\"Bilder/polaroid.png\" />");
});
This code works in Google Chrome. In Firefox it retrieves the data but don't do the append.
If I try appending something else like simple text Firefox won't append that either.
It works when I'm trying it via jsfiddle.net but it doesn't when trying it via my own webpage.
You can do this without PHP, using JSONP:
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=42980910#N02&lang=en-us&format=json&jsoncallback=?", function(data) {
$(data.items).each(function() {
var item = this, title, description, thumbnail;
title = item.title;
description = item.description;;
thumbnail = item.media.m;
});
});
I made a jsFiddle demo.
http://simplehtmldom.sourceforge.net/
Easy way to fetch a website and simple interface to load specific data :)
Related
I'm attempting to take the ImageResolver plugin and adapt it to work with a php array.
Stripping the code to this returns the image without a form:
$(function(){
var url = $('#url').val();
ImageResolver.resolve(url, function(image){
if (image) {
$('#result').html('<img src="' + image + '" alt="">');
} else {
$('#result').html('<h2>No image found</h2>');
}
});
});
I want to adapt it to work within a php foreach loop. results would be replaced on the next class='result' div. IE: after the page has loaded the urls from the query, the function will parse the url and return image link if one is found. I'm guessing I need to use (each) or this(), but I can't figure it out.
can someone point me in the right direction?
<script src="ImageResolver/URI.min.js"></script>
<script src="ImageResolver/ImageResolver.js"></script>
<?
$javascriptarray = 'var urls = [';
$counter=0;
foreach (array('http://www.apple.com/','http://github.com/','http://www.test.com/') as $url)
{
if ($counter++ > 0) $javascriptarray .= ',';
$javascriptarray .= '"'.$url.'"';
}
$javascriptarray .= '];';
?>
<script>
<?=$javascriptarray?>
//The ImageResolver will try all the resolvers one after the other
//in the order of their registration
//Resolvers that guess the image URL
ImageResolver.register(new FileExtensionResolver());
ImageResolver.register(new ImgurPageResolver());
ImageResolver.register(new NineGagResolver());
ImageResolver.register(new InstagramResolver());
//Resolvers that need extra ajax requests
ImageResolver.register(new ImgurAlbumResolver());
ImageResolver.register(new OpengraphResolver());
ImageResolver.register(new WebpageResolver());
//Some jQuery code to make the demo work
//Use a crossdomain proxy (required by some plugins)
$.ajaxPrefilter('text', function(options) {
options.url = "http://furious-stream-4406.herokuapp.com?src=" + encodeURIComponent(options.url);
});
$(function(){
var length = urls.length,
url = null;
for (var i = 0; i < length; i++) {
url = urls[i];
ImageResolver.resolve(url, function(image){
if (image) {
$('#result').append('<img src="' + image + '" alt=""><br>');
} else {
$('#result').append('<h2>No image</h2>');
//$('#result').append('<h2>No image found for ' + url + '</h2>');
}
});
}
});
</script>
Watch out cause ImageResolver.resolve() works asynchrone you can get unexpected results. Call ImageResolver.resolve() again before the previous call has finished will change url in $('#result').append('<h2>No image found for ' + url + '</h2>'); to the url of your last call by example. To prevent this you need to initialize a new Resolver in the for-loop. see: Javascript prototypes and instance creation
This is my jQuery:
$( document ).ready(function() {
var instrID;
var cat;
$(window).load(function(){
});
$.post('ajax.php', {InstrumentID: instrID, catView: "pdf"}, function(data){
$('#displayPDF').append("<php> header('Content-type: application/pdf') </php>");
$('#displayPDF').append("<php> echo("+ data +") </php>");
});
This is my ajax or ajax.php:
<?php
include '../include/xxxxx.php';
$instrumentID = $_POST['InstrumentID'];
$category = $_POST['catView'];
$sql = "SELECT * FROM `xxxxx` WHERE `InstrumentID` = '" . $_POST['InstrumentID'] . "'";
$results = mysql_query($sql);
if($category == "pdf")
{
header("Content-type: application/pdf");
echo (mysql_result($results, 0, 'Instrument'));
}
?>
This is my div displayPDF It's empty:
<div id="displayPDF">
</div>
The jQuery and the div are in the same php file. I am wanting to display a pdf in the same page that the click event happens. Everything is working except for getting the pdf. When the pdf gets echoed to the div it just comes back as a bunch of characters. The pdf I am trying to display is less than 1 mb. Any ideas would be greatly appreciated.
Maybe this is not an answer to the specific question but, This question comes up at very first google search, so I would like to share my approach for downloading pdf when it's blob data.
$.ajax({
url: 'someurl',
method: 'get',
data: { param1: value1, param2: value2 },
xhr: function() {
const xhr = new XMLHttpRequest();
xhr.responseType= 'blob'
return xhr;
},
success: function (blob) {
const link=document.createElement('a');
link.href=window.URL.createObjectURL(blob);
link.download="my-pdf-file-name";
link.click();
}
});
You haven't set a value for instrID, also you're not sanitizing for input.
Anyway instead of using ajax you can just embed the pdf into the page
var source = 'ajax.php?InstrumentID='+encodeUriComponent(instrID)+'&catView=pdf';
$('#displayPDF').append('<object data="'+source+'" type="application/pdf">'+
'<embed src="'+source+'" type="application/pdf"/></object>');
and then use $_GET instead of post in your php.
I don't think you can display a PDF inline in this manner. Try switching to an iframe - that should work. That is set the location of the iframe to your ajax.php.
New here and glad to be, I've gotten a lot of answers from this forum. I am however stuck at the moment.
I have some javascript that is creating a window color and handle picker (click on the color swatch it changes the image, click on a handle and it does the same). Below the image is a description of the window selected. This text is being generated by the javascript by pulling the image titles.
Now the fun part. Below this picker I need to add a form that will be emailed using php. Within that email I need to pull the window description that is being generated by the javascript.
I have tried so many things today I have lost count. The last bit of code I tried was
<script>
$(document).ready(function() {
$("windowDesc").each(function() {
var html = jQuery(this).html();
});
});
</script>
And in the php mail file I added:
$windowtitle = $_GET['html'];
as well as trying
$windowtitle = $_POST['html'];
and I have also tried the following:
<script>
var content = $('#windowDesc').html();
$.ajax({
url: 'send_mail.php',
type: 'POST',
data: {
content: content
}
});
</script>
And in the php mail file I added:
$windowtitle = $_GET['content'];
as well as trying
$windowtitle = $_POST['content'];
Not to mention a plethora of other things.
Basically what I am trying to do is grab the content of the div that holds the generated text and email it. If any of the above are correct then I must be placing them in the wrong position or something. With the first one I have tried it inside the form, outside the form, before the div, after the div. Just haven't tried it on top of my head yet. It's been a long day, thanks in advance :o)
Sorry for the delay, been a busy two days. OK, so here is the code that handles the window color and handle picker:
var Color = "color";
var Handle = "handledescription";
var ColorDesc = "color";
var HandleDesc = "handle description"
function Window(Color,Handle,ColorDesc,HandleDesc) {
$('#windowPic').animate({opacity: 0}, 250, function () {
thePicSrc = "http://www.site.com/images/windows/" + Color + Handle + ".jpg";
$('#windowPic').attr('src', thePicSrc);
$('#windowDesc').html("<p>" + ColorDesc + " frame with " + HandleDesc + " hardware</p>");
$('#windowPic').animate({opacity: 1}, 250)
})
}
$(document).ready(function() {
$('#wColors li').click( function() {
Color = $(this).attr('id');
ColorDesc = $(this).attr('title');
Window(Color,Handle,ColorDesc,HandleDesc);
});
$('#wHandles li').click( function() {
Handle = $(this).attr('id');
HandleDesc = $(this).attr('title');
Window(Color,Handle,ColorDesc,HandleDesc);
});
});
You need a hidden input in your form:
<form id="send_email" action="send_email.php">
<input id="content" type="hidden" name="content"/>
... other inputs here
</form>
Then you can use Javascript to fill it in before submission:
$("#send_email").submit(function() {
$("#content").val($("#windowDesc").html());
}
<script>
var content = $('#windowDesc').html();
$.ajax({
url: 'send_mail.php',
type: 'POST',
data: content
});
</script>
It worked here.
So after hours of websearching, googling and overflowing i can't find the solution to my problem.
I got a linechart from Google charts. I want to convert it to PNG, save it on the server en insert it into a MySQL database.
Sounds simple, but i cant get it to work. The script from this website isnt working anymore (atleast not here) http://www.battlehorse.net/page/topics/charts/save_google_charts_as_image.html -> Not working.
Second option is the old option:
$imageData = file_get_contents('http://chart.apis.google.com/chart... etc');
I cant use that because its not supported anymore and cant get some decent quality out of it.
Is there anybody here that can give a good tutorial or help for my problem?
EDIT:
I used the code from Battlehorse combined with the code from EriC.
So now i got this working to show the chart as an image in a DIV i want to save this image on the server and update the mysql to use it in the future to use it in PDF files.
When you visit the site, paste this in the console (overwriting the malfunctioning function).
function getImgData(chartContainer) {
var chartArea = chartContainer.getElementsByTagName('svg')[0].parentNode;
var svg = chartArea.innerHTML;
var doc = chartContainer.ownerDocument;
var canvas = doc.createElement('canvas');
canvas.setAttribute('width', chartArea.offsetWidth);
canvas.setAttribute('height', chartArea.offsetHeight);
canvas.setAttribute(
'style',
'position: absolute; ' +
'top: ' + (-chartArea.offsetHeight * 2) + 'px;' +
'left: ' + (-chartArea.offsetWidth * 2) + 'px;');
doc.body.appendChild(canvas);
canvg(canvas, svg);
var imgData = canvas.toDataURL("image/png");
canvas.parentNode.removeChild(canvas);
return imgData;
}
In JS it was searching for an iframe bla bla to get the svg.
To automatically save the image, you can just let the method being invoked programmatically.
document.body.addEventListener("load", function() {
saveAsImg( document.getElementById("pie_div")); // or your ID
}, false );
For saving images serverside, this post could be helpful save a PNG image server-side
Update
Posting images to PHP (index.js)
function saveToPHP( imgdata ) {
var script = document.createElement("SCRIPT");
script.setAttribute( 'type', 'text/javascript' );
script.setAttribute( 'src', 'save.php?data=' + imgdata );
document.head.appendChild( script );
}
function save() {
var canvas = document.getElementById("canvas"), // Get your canvas
imgdata = canvas.toDataURL();
saveToPHP( imgdata );
}
function drawOnCanvas() {
var canvas = document.getElementById("canvas"), // Get your canvas
ctx = canvas.getContext("2d");
ctx.strokeStyle = "#000000";
ctx.fillStyle = "#FFFF00";
ctx.beginPath();
ctx.arc(100,99,50,0,Math.PI*2,true);
ctx.closePath();
ctx.stroke();
ctx.fill();
}
drawOnCanvas(); // Test
save();
save.php
<?php
// Get the request
$data = $_GET['data'];
// Save to your DB.
?>
You can use the grChartImg library. It's a cross browser solution and supports even old versions of IE (8 and earlier).It has many features such as download image,upload to the server, show the image in a dialog etc.
For more info look at http://www.chartstoimage.eu.
i hope help you.
This is not really an answer but might be one in the future and it is nescesary if you just want the feature back. The following URL shows all the current issues and feature requests for the visualization API.
https://code.google.com/p/google-visualization-api-issues/issues/list?can=2&q=&sort=-stars+id&colspec=ID%20Type%20Status%20Priority%20Milestone%20Owner%20Summary%20Stars
The more stars/votes this feature request gets, the higher the chance they will take a look at it.
I have the same issue - Save Google charts as image on server. None of answers here works for me. Finally I get solution but with some bugs(working only in Chrome browser). As base I used script from here https://gist.github.com/mpetherb/7085315 I made some changes for my project. I use jquery for importing generated graph image to to my server.
This is a graph that I want to convert to image and save google graph example id="ex0"
Script for converting to image and importing to server
<script>
function getImgData(chartContainer) {
var chartArea = chartContainer.getElementsByTagName('svg')[0].parentNode;
var svg = chartArea.innerHTML;
var doc = chartContainer.ownerDocument;
var canvas = doc.createElement('canvas');
canvas.setAttribute('width', chartArea.offsetWidth);
canvas.setAttribute('height', chartArea.offsetHeight);
canvas.setAttribute(
'style',
'position: absolute; ' +
'top: ' + (-chartArea.offsetHeight * 2) + 'px;' +
'left: ' + (-chartArea.offsetWidth * 2) + 'px;');
doc.body.appendChild(canvas);
canvg(canvas, svg);
var imgData = canvas.toDataURL("image/png");
canvas.parentNode.removeChild(canvas);
return imgData;
}
function toImg(chartContainer, imgContainer) {
var doc = chartContainer.ownerDocument;
var img = doc.createElement('img');
var myimg=img.src = getImgData(chartContainer);
//Here I am using jquery for importing decoded image to hidden.php on my server
$.ajax({
method: "POST",
url: "hidden.php",
data: { name: myimg } });
while (imgContainer.firstChild) {
imgContainer.removeChild(imgContainer.firstChild);
}
imgContainer.appendChild(img);
}
</script>
<button onclick="toImg(document.getElementById('ex0'), document.getElementById('ex0'));"
type="button" <Convert to image and upload on server></button>
// ex0 - div id of this type of google graph. If you using another type of google graph - you should change it
Don't forget include jquery to your code.
and php hidden script for receiving data from jquery method POST and saving it on server
hidden.php file
<?php
if(isset($_POST['name']))
{
$data = $_POST['name'];
list($type, $data) = explode(';', $data);
list(, $data) = explode(',', $data);
file_put_contents('graph_temp.png', base64_decode($data));
I will notice again - works only in Chrome browser. Firefox also create image file on server but without any content (looks like firefox not support base64 encoded data)
I have the following code which,currently im running on my local machine.I am making a call to a php script called getxml.php,which should send the contents of an xml file as the response.
But,instead of a GET request, in Firebug i see that an OPTIONS request is being made, like
OPTIONS getxml.php . I think im not making a cross domain Ajax request,but still am facing this problem . Any way to fix this ?
var employee_list = new Object;
$(function(){
$.ajax({
type:"GET",
url:"http://localhost/projectname/getxml.php",
datatype:"xml",
success: function(xml){
$(xml).find('employee').each(function(){
var name_text = $(this).find('name').text();
var url_text = $(this).find('url').text();
employee_list[name_text] = url_text;
$('<li></li>').html(name_text + ' (' + url_text + ')').appendTo('#update-target ol');
});
} //closing function
}); //closing $.ajax
}); //closing $(
getxml.php
<?php
//Send the xml file as response
header('Content-type: text/xml');
readfile('employee_results.xml');
?>
Thank You
Make sure getxml.php exists. OPTIONS usually means you have a slight misspelling.
change datatype to dataType and see if that fixes your problem. The rest of the code looks right.
edit: also, I'm not a PHP pro, but I wrote a map application which uses a similar approach. To return xml, I used:
header("Status: 200");
header("Content-type: text/xml");
echo file_get_contents($q,0); /*$q is the query/filename*/
exit();
I remember reading somewhere that header("Status: 200"); was required.
edit: Here is how I've done the same thing. I hope this helps.
/* call ajax method to retrieve earthquakes */
$.ajax({
type: "GET",
url: "../getxml.php?q=" + xmlLocation,
dataType: "xml",
success: function(xml){
$(xml).find('entry').each(function(){
/* Retrieve all needed values from XML */
var title = $(this).find('title').text();
var summary = $(this).find('summary').text();
var coord = $(this).find('georss\\:point').eq(0).text();
if(!coord){var coord = $(this).find('point').text();};
var points = coord.split(' ');
var latitude = parseFloat(points[0]);
var longitude = parseFloat(points[1]);
var htmlString = "<div class=\"infowindow\"><b>" +
title + "</b>" + "<p>" + summary + "<br></div>";
var myLatlng = new google.maps.LatLng(latitude,longitude);
var marker = new google.maps.Marker(
{
position: myLatlng,
map: map,
title: title
});
markers[markers.length] = marker;
addInfoWindow(marker, map, htmlString);
$('#output').text("Showing " + markers.length + " earthquakes");
});/* end each */
}
}); /* end $.ajax */
The php file is exactly as I posted above, but with "security" to respond only to ajax requests.