javascript - Passing image back with Ajax call -
i trying pass image rest of ajax call. using facebook marketing api , using foreach() go through array's. works fine besides image. when try work out display image_url but, want actual image. there 3 files home.php data displayed (duh). fbdata.php date range data sent , api code is. , third file fbdwdrp.php , have date range picker , ajax call. need figure out how display actual image , not 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 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 error echo 'graph returned error: ' . $e->getmessage(); exit; } catch(facebooksdkexception $e) { // when validation fails or other local issues echo 'facebook sdk returned error: ' . $e->getmessage(); exit; } } if ($_session['xxxxxxxxxx']) { //echo "you logged in!"; // initialize new session , instantiate api object api::init( 'xxxxxxxxxx', // app id 'xxxxxxxxxx', //app_secret $_session['xxxxxxxx'] // user access token ); ?> <h1 style="text-align: center;">facebook ads plus past 2 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 facebook</a>'; } ?> </body> </html> marketing api code
<?php if((!empty($_post['startdate'])&&(!empty($_post['enddate'])))) { // check whether date empty //setup variables start , 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 $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 $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 $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 $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 home page... } } ?> ajax call , 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 type of http verb want use url: 'fbdata.php', // url want post datatype: 'json', // our data object data: {startdate: startdate, enddate: enddate}, // ensure pass start , end dates $_post in php }) // using done promise callback .done(function(data) { console.log(data); $('.loader').hide(); alert("ooooo"); $('#1').text(data.message1); // log data console can see $('#2').text(data.message2); // log data console can see $('#3').text(data.message3); // log data console can see $('#4').text(data.message4); // log data console can see $('#5').text(data.message5); // log data console can see $('#6').text(data.message6); // log data console can see $('#7').text(data.message7); // log data console can see $('#8').text(data.message8); // log data console can see $('#9').text(data.message9); // log data console can see $('#10').text(data.message10); // log data console can see $('#11').text(data.message11); // log data console can see $('#34').text(data.message34); // log data console can see $('#35').append('<img src="data:image/png;base64,' + data.message35 + '" />'); // log data console can see $('#36').text(data.message36); // log data console can see
i had add in ajax call file. in .done(function(data){} area.
$('#35').html('<img src="' + data.message35 + '" />'); // log data console can see 
Comments
Post a Comment