Passing image back with Ajax call
Question
I am trying to pass an image back with the rest of my ajax call. I currently am using Facebook Marketing API and I am using foreach() to go through the array's. Everything works fine besides the image. When I try to work it out I get it to display the image_url but, I want the actual image. There is three files home.php where data is displayed (DUH). fbdata.php is where date range data is sent and where the API code is. And finally the third file is the fbdwdrp.php and this is where I have the date range picker and ajax call. All I need to do is figure out how to display the actual image and not the image_url.
<?php
require_once __DIR__ . '/vendor/autoload.php';
use FacebookAds\Api;
use FacebookAds\Object\AdUser;
use Facebook\Facebook;
use Facebook\Exceptions\FacebookResponseException;
use Facebook\Exceptions\FacebookSDKException;
use FacebookAds\Object\Campaign;
use FacebookAds\Object\Fields\AdsInsightsFields;
use FacebookAds\Object\Ad;
use FacebookAds\Object\Fields\AdSetFields;
use FacebookAds\Object\AdCampaign;
use FacebookAds\Object\Fields\AdFields;
use FacebookAds\Object\Fields;
use FacebookAds\Object\Fields\AdImageFields;
use FacebookAds\Object\AdAccount;
use FacebookAds\Object\AdSet;
use FacebookAds\Object\AdCreative;
use FacebookAds\Object\Fields\AdCreativeFields;
use FacebookAds\Object\Fields\AdCreativePhotoDataFields;
use FacebookAds\Object\AdCreativeLinkData;
use FacebookAds\Object\Fields\AdCreativeLinkDataFields;
use FacebookAds\Object\Fields\CampaignFields;
use FacebookAds\Object\Page;
use FacebookAds\Object\Fields\AdPreviewFields;
use FacebookAds\Object\Values\AdPreviewAdFormatValues;
use FacebookAds\Object\AdVideo;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="background: url(img/main_BG.jpg) no-repeat center center fixed; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;">
<head>
<title>Facebook Insights </title>
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/imgslidefb.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/daterangepicker.css" />
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.25/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.25/daterangepicker.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/bootstrap-datepaginator.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Include Date Range Picker -->
<script type="text/javascript" src="js/daterangepicker.js"></script>
<script type="text/javascript" src="js/fbdwdrp.js"></script>
<!-- Include the DateRangeSelector component script. -->
</head>
<body>
<div id="demo" style="font: white; float: left; font-family: 'Russo One', sans-serif, black; width: 300px; height:65px; background:Grey;">
<h4 style="font-family: 'Russo One', sans-serif, white; left: 62em; top: 11em;">Select Dates</h4>
<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
<input type="text" id="config-demo" style="color: black; background-image: #808080; text-align: center; font-family: 'Russo One', sans-serif, black; width: 210px; height:22px;">
</div></br></br><br/>
<?php
// Init PHP Sessions
session_start();
$fb = new Facebook([
'app_id' => 'xxxxxxxxx',
'app_secret' => 'xxxxxxxx',
]);
$helper = $fb->getRedirectLoginHelper();
if (!isset($_SESSION['xxxxxxx'])) {
$_SESSION['xxxxxxx'] = null;
}
if (!$_SESSION['xxxxxxx']) {
$helper = $fb->getRedirectLoginHelper();
try {
$_SESSION['xxxxxxxxx'] = (string) $helper->getAccessToken();
} catch(FacebookResponseException $e) {
// When Graph returns an error
echo 'Graph returned an error: ' . $e->getMessage();
exit;
} catch(FacebookSDKException $e) {
// When validation fails or other local issues
echo 'Facebook SDK returned an error: ' . $e->getMessage();
exit;
}
}
if ($_SESSION['xxxxxxxxxx']) {
//echo "You are logged in!";
// Initialize a new Session and instantiate an API object
Api::init(
'xxxxxxxxxx', // App ID
'xxxxxxxxxx', //app_secret
$_SESSION['xxxxxxxx'] // Your user access token
);
?>
<h1 style="text-align: center;">Facebook Ads plus past two months.</h1>
<table class="fbtable">
<tr class="fbrow">
<th class="fbheader">Campaign ID</th>
<th class="fbheader">Campaign Name</th>
<th class="fbheader">Impressions</th>
<th class="fbheader">Clicks</th>
<th class="fbheader">Reach</th>
<th class="fbheader">Spend</th>
<th class="fbheader">Total Actions</th>
<th class="fbheader">CPM</th>
<th class="fbheader">CPC</th>
<th class="fbheader">Start Date</th>
<th class="fbheader">End Date</th>
</tr>
<tr class="fbrow">
<td id="1"></td>
<td id="2"></td>
<td id="3"></td>
<td id="4"></td>
<td id="5"></td>
<td id="6"></td>
<td id="7"></td>
<td id="8"></td>
<td id="9"></td>
<td id="10"></td>
<td id="11"></td>
</tr>
<tr class="fbrow">
<td id="12"></td>
<td id="13"></td>
<td id="14"></td>
<td id="15"></td>
<td id="16"></td>
<td id="17"></td>
<td id="18"></td>
<td id="19"></td>
<td id="20"></td>
<td id="21"></td>
<td id="22"></td>
</tr>
<tr class="fbrow">
<td id="23"></td>
<td id="24"></td>
<td id="25"></td>
<td id="26"></td>
<td id="27"></td>
<td id="28"></td>
<td id="29"></td>
<td id="30"></td>
<td id="31"></td>
<td id="32"></td>
<td id="33"></td>
</tr>
<tr class="fbrow">
<td id="34"></td>
<td id="35"></td>
<td id="36"></td>
</tr>
</table>
<?php
}else {
$permissions = ['ads_management'];
$loginUrl = $helper->getLoginUrl('http://www.somewebsite.com', $permissions);
echo '<a href="' . $loginUrl . '">Log in with Facebook</a>';
}
?>
</body>
</html>
Marketing API CODE
<?php
if((!empty($_POST['startDate'])&&(!empty($_POST['endDate'])))) { // Check whether the date is empty
//setup variables for start and end date..
$startDate = date('Y-m-d', strtotime($_POST['startDate']));
$endDate = date('Y-m-d', strtotime($_POST['endDate']));
$account = new AdAccount('act_XXXXXXXXX');
$params = array(
'time_range' => array(
'since' => (new \DateTime($startDate))->format('Y-m-d'),
'until' => (new \DateTime($endDate))->format('Y-m-d'),
),
'thumbnail_width' => 200,
'thumbnail_height' => 150,
'level' => 'campaign',
'limit' => '15'
);
$params1 = array(
'time_range' => array(
'since' => (new \DateTime("$startDate -1 month"))->format('Y-m-d'),
'until' => (new \DateTime("$endDate -1 month"))->format('Y-m-d'),
),
'thumbnail_width' => 200,
'thumbnail_height' => 150,
'level' => 'campaign',
'limit' => '15'
);
$params2 = array(
'time_range' => array(
'since' => (new \DateTime("$startDate -2 month"))->format('Y-m-d'),
'until' => (new \DateTime("$endDate -2 month"))->format('Y-m-d'),
),
'thumbnail_width' => 200,
'thumbnail_height' => 150,
'level' => 'campaign',
'limit' => '15'
);
$fields = array(
AdsInsightsFields::CAMPAIGN_NAME,
AdsInsightsFields::CAMPAIGN_ID,
AdsInsightsFields::IMPRESSIONS,
AdsInsightsFields::CLICKS,
AdsInsightsFields::REACH,
AdsInsightsFields::SPEND,
AdsInsightsFields::CPM,
AdsInsightsFields::CPC,
AdsInsightsFields::ACTIONS,
AdsInsightsFields::DATE_START,
AdsInsightsFields::DATE_STOP,
);
$field = array(
AdCreativeFields::TITLE,
AdCreativeFields::THUMBNAIL_URL,
AdCreativeFields::IMAGE_URL,
AdCreativeFields::BODY,
);
$adcreatives = $account->getAdCreatives($field, $params);
$insights = $account->getInsights($fields, $params);
$insights1 = $account->getInsights($fields, $params1);
$insights2 = $account->getInsights($fields, $params2);
foreach($insights as $i) {
$impress = number_format((float)$i->impressions);
$reach = number_format((float)$i->reach);
$totalAction = number_format((float)$i->actions);
$cpc = number_format($i->cpc, 2, '.', '');
$cpm = number_format($i->cpm, 2, '.', '');
$return['message1'] = $i->campaign_id;
$return['message2'] = $i->campaign_name;
$return['message3'] = $impress;
$return['message4'] = $i->clicks;
$return['message5'] = $reach;
$return['message6'] = $i->spend;
$return['message7'] = $totalAction;
$return['message8'] = $cpm;
$return['message9'] = $cpc;
$return['message10'] = $i->date_start;
$return['message11'] = $i->date_stop;
}
foreach($insights1 as $i1) {
$impress = number_format((float)$i1->impressions);
$reach = number_format((float)$i1->reach);
$totalAction = number_format((float)$i1->actions);
$cpc = number_format($i1->cpc, 2, '.', '');
$cpm = number_format($i1->cpm, 2, '.', '');
$return['message12'] = $i1->campaign_id;
$return['message13'] = $i1->campaign_name;
$return['message14'] = $impress;
$return['message15'] = $i1->clicks;
$return['message16'] = $reach;
$return['message17'] = $i1->spend;
$return['message18'] = $totalAction;
$return['message19'] = $cpm;
$return['message20'] = $cpc;
$return['message21'] = $i1->date_start;
$return['message22'] = $i1->date_stop;
}
foreach($insights2 as $i2) {
$impress = number_format((float)$i2->impressions);
$reach = number_format((float)$i2->reach);
$totalAction = number_format((float)$i2->actions);
$cpc = number_format($i2->cpc, 2, '.', '');
$cpm = number_format($i2->cpm, 2, '.', '');
$return['message23'] = $i2->campaign_id;
$return['message24'] = $i2->campaign_name;
$return['message25'] = $impress;
$return['message26'] = $i2->clicks;
$return['message27'] = $reach;
$return['message28'] = $i2->spend;
$return['message29'] = $totalAction;
$return['message30'] = $cpm;
$return['message31'] = $cpc;
$return['message32'] = $i2->date_start;
$return['message33'] = $i2->date_stop;
}
foreach($adcreatives as $imgs){
$return['message34'] = $imgs->title;
$return['message35'] = $imgs->image_url;
$return['message36'] = $imgs->body;
}
header('Content-Type: text/json');
echo json_encode($return); //echo response back to Home page...
}
}
?>
AJAX CALL AND DATE RANGE PICKER FILE
$(document).ready(function() {
$('#config-demo').click(function() {
$(this).parent().find('#demo').click();
});
updateConfig();
function updateConfig() {
var start = moment().subtract(2, 'month');
var end = moment();
var options = {
"showDropdowns": true,
};
options.opens = "center";
options.ranges = {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 14 Days': [moment().subtract(13, 'days'), moment()],
'Last 28 Days': [moment().subtract(27, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
};
$('#config-demo').daterangepicker(options, function(start, end, label) {
var startDate = start.format('YYYY-MM-DD');
var endDate = end.format('YYYY-MM-DD');
passDate(startDate, endDate);
});
}
});
function passDate(startDate,endDate) {
$('.loader').show();
$.ajax({
method: 'POST', // define the type of HTTP verb we want to use
url: 'fbdata.php', // the url where we want to POST
dataType: 'json', // Our data object
data: {startDate: startDate, endDate: endDate}, // Ensure we pass the start and end dates to $_POST in PHP
})
// using the done promise callback
.done(function(data) {
console.log(data);
$('.loader').hide();
alert("OOOOO");
$('#1').text(data.message1); // log data to the console so we can see
$('#2').text(data.message2); // log data to the console so we can see
$('#3').text(data.message3); // log data to the console so we can see
$('#4').text(data.message4); // log data to the console so we can see
$('#5').text(data.message5); // log data to the console so we can see
$('#6').text(data.message6); // log data to the console so we can see
$('#7').text(data.message7); // log data to the console so we can see
$('#8').text(data.message8); // log data to the console so we can see
$('#9').text(data.message9); // log data to the console so we can see
$('#10').text(data.message10); // log data to the console so we can see
$('#11').text(data.message11); // log data to the console so we can see
$('#34').text(data.message34); // log data to the console so we can see
$('#35').append('<img src="data:image/png;base64,' + data.message35 + '" />'); // log data to the console so we can see
$('#36').text(data.message36); // log data to the console so we can see
1 answers
solution1
0 2017-06-30 17:37:17
I had to add this in the AJAX call File. in the .done(function(data){} area.
$('#35').html('<img src="' + data.message35 + '" />'); // log data to the console so we can see
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
passing parameters to rails back end from an ajax call
Ajax Call to Server and Passing Data back to Charts.js
Ajax call passing string to webservice and getting String[] back
jQuery image gallery with Ajax call back to load other images
Passing the counter in ajax call
ajax call passing security
passing _this into an ajax call
Passing a PHP variable back to ajax
Passing variable back to page with ajax
Passing an Image with Ajax
Related Tags