I want to open the response that I get from my PHP server in the In App Browser in a new window.
I am creating an app using Ionic and using PHP as a back end. I have full control of the php server.
I am making the ajax call like so:
$(document).ready( function() {
$("#paybutton").click(function() {
var params = "projectpaymentoption=1197&id=",
usernamepay = window.localStorage.getItem("username"),
paymenturl = params + usernamepay;
$.ajax({
type: 'POST',
url: 'http://www.blabla.com/encode.php',
data: $.param({"paymenturl": paymenturl}),
success: function(output) {
window.open('output','_blank','location=no','closebuttoncaption=Zurück');
console.log(result);
}
});
});
});
Now I want to open the output in a new inappbrowser windows.
The output i am throwing out is as follows
<?php
ob_start();
include_once('includes/headers.php');
require_once('includes/connection.php');
require_once('includes/functions.php');
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
</head>
<?php
include($filePath);
?>
It is a dynamically generated php page. An not an url.
How can I show this page in the inappbrowser
Related
I have almost the same problem that in thread "Adobe PDF Embed API can not change the pdf" and "How to use a variable in Adobe's pdf embed API as URL-value?". which both were addressed by Mr Raymond Camden. The only difference is that I am trying to pass an url to location:url from Flask. Here's the code:
if(window.AdobeDC) displayPDF(urldata);
else document.addEventListener("adobe_dc_view_sdk.ready",
() => displayPDF(urldata));
function displayPDF(urldata) {
document.writeln(urldata[0]);
document.writeln(urldata[1]);
var myURL = urldata[0];
var myFileName = urldata[1];
adobeDCView.previewFile({
content: {
location: {
url: myURL,
},
},
metaData: {
fileName: myFileName
}
}, viewerConfig);
}
Note that I am using Mr Camden trick for dealing with
well-seasoned chicken and nice fresh eggs
.
I can get my 2 parameters going to the html file and to the js file. They are both writelined on the page from the displayPDF(urldata) function. Unfortunately they don't make it to content:location:url and metadata:filename. If I do hardcode these two parameters with existing PDF url and filename I get the result I want to obtain.
What am I doing wrong?
Thanks to anybody who could give me a clue.
All the best,
Pierre-Emmanuel FEGA
zepef#hotmail.com
I've found an answer to my own question. I have posted it on Adobe Community forum as well because "Passing value from external function to document function" because both responses from Shubhanshu Dixit and Raymond Camden have been of great help to me.
My goal was to open a PDF file coming from Azure Blob Storage to use it in an Azure Web App. The app is in Flask. Here's how I've done it and it works great on Azure as well as locally:
FLASK ROUTE
#app.route("/document", methods=['GET', 'POST'])
def document():
# Microsoft blob storage SAS token creation for accessing PDF file in blob storage
blob = get_blob_sas(BLOB_NAME_PATH, STORAGE_ACCOUNT_KEY, BLOB_CONTAINER_NAME, document_to_retrieve)
blob_url = 'https://'+BLOB_NAME_PATH+'.blob.core.windows.net/'+BLOB_CONTAINER_NAME+'/'+document_to_retrieve+'?'+blob
# URL and Filename parameters to send to Adobe Embed API
urldata = [blob_url, document_to_retrieve]
return render_template('view.html', title='SYSTRA Semantic Selected Document', urldata=urldata)
HTML PAGE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1"/>
<script type="text/javascript" src="{{ url_for('static', filename='view.js') }}"></script>
<script type="text/javascript">
varPDF = previewFile({{urldata|tojson}})
</script>
</head>
<body style="margin: 0px">
<div id="adobe-dc-view"></div>
<script type="text/javascript" src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
</body>
</html>
JAVASCRIPT FUNCTIONS
function previewFile(urldata) {
var myURL = urldata[0];
var myFileName = urldata[1];
if(window.AdobeDC) displayPDF(myURL, myFileName);
else document.addEventListener("adobe_dc_view_sdk.ready",
() => displayPDF(myURL, myFileName));
}
function displayPDF(myURL, myFileName) {
document.write('displayPDF');
const viewerConfig = {
embedMode: "FULL_WINDOW",
defaultViewMode: "FIT_PAGE",
showLeftHandPanel: true,
showAnnotationTools: true,
showDownloadPDF: true,
showPrintPDF: true,
showPageControls: true,
showDisabledSaveButton: true,
downloadWithCredentials: true
};
var adobeDCView = new AdobeDC.View({
clientId: '<CLIENT_ID_KEY_HERE',
divId: "adobe-dc-view"
});
adobeDCView.previewFile({
content: {
location: {
url: myURL,
},
},
metaData: {
fileName: myFileName
}
}, viewerConfig);
}
I hope this helps.
All the best,
Pierre-Emmanuel
I want to send a JavaScript variable with a image that a user will upload to my Flask file where processing will be done. So I am using Formdata and a AJAX call for the same. But after the data and image is received in flask and processing is done, I am unable to render a HTML page in flask which will display the processed image .
Java Script Code :
formdata = new FormData();
jQuery("#image_to_upload").on("change", function() { // On Change Of image upload
var file = this.files[0];
if (formdata) {
formdata.append("file", file);
formdata.append("array", filtersActive);
jQuery.ajax({
url: "/object-detect-uploader",
type: "POST",
data: formdata,
processData: false,
contentType: false,
success:function(){}
});
}
});
Flask Code :
#app.route("/object-detect-uploader", methods = ['GET', 'POST'])
def upload_object_detection():
detect_objs = request.values['array'].split(",")
d_array= [0 for i in range(6) ]
for i in detect_objs:
d_array[int(i)] = 1
for upload in request.files.getlist("file"):
filename = upload.filename
# This is to verify files are supported
ext = os.path.splitext(filename)[1]
if (ext == ".jpg") or (ext == ".png"): #File extention check
print("File supported moving on...")
ans=(object_detection_module.object_detection(upload,d_array))
else:
render_template("Error.html", message="Files uploaded are not supported...")
print("Rendering")
return render_template("index.html", result = ans)
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<br>
<br>
<h1><center>Output</h1></center>
<br>
<img src="data:image/png;base64, {{result[0]}}" >
<br>
<br>
<h2> No of objects = {{ result[1] }}</h2>
</body>
</html>
An Ajax call is an asynchronous request initiated by the browser that does not reload the page when it receives the server response.
IMO, since you want to render the template, you should not use AJAX, just use a normal <form> element or create a form programmatically, fill the data, then submit with jQuery('selector').submit().
I'm calling the uberGallery (www.uberGallery.net) from the index.php like so:
<?php
include_once 'resources/UberGallery.php';
include_once 'resources/uberCall.php';
?>
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
...
<link rel="stylesheet" type="text/css" href="resources/themes/uber-naked/style.css" />
<link rel="stylesheet" type="text/css" href="resources/colorbox/5/colorbox.css" />
<script src="//code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="resources/colorbox/jquery.colorbox.js"></script>
</head>
<body>
<div class = "row">
<div class = "col col-lg-12">
<h2 id = "locName"></h2>
</div>
</div>
<div id="gallery">
<?php
$path = "london";
getGallery($path);
$path = "paris";
getGallery($path);
$path = "rome";
getGallery($path);
?>
</div>
<script type="text/javascript" src='js/UX.js'></script>
</body>
</html>
The uberCall.php is like that:
<?php
include_once ('UberGallery.php');
function getGallery($pathToImage){
UberGallery::init() -> createGallery('locations/'.$pathToImage.'/gallery');
}
if(isset( $_POST['image-path'] )) {
$path = $_POST['image-path'];
UberGallery::init() -> createGallery('locations/'.$path.'/gallery');
}
?>
So far this is working like expected.
Now I would like to load the galleries from a dropdown menue and just show the selected gallery. The dropdown selection is done in a jQuery script:
$(document).ready(function() {
$("a[rel='colorbox']").colorbox({
maxWidth : "90%",
maxHeight : "90%",
opacity : ".5"
});
$(".dropdown-toggle").dropdown();
$('#demolist li a').click(function(e) {
$('#locationSelector').val($(this).text());
var $this = $(this);
var selLocID = $this.attr("value");
e.preventDefault();
var dataString = {
'location_id' : selLocID
};
$.ajax({
type : 'POST',
dataType : 'json',
url : 'includes/locationAPI.php',
data : dataString,
success : function(data) {
$('#locData').html('');
// erase content if any
$('#locName').html(data['name']);
// from MySQL
// set location headline
$.ajax({
type : "POST",
data : {
'image-path' : data['pfad'] // from MySQL
},
url : 'resources/uberCall.php',
dataType : "html",
async : false,
success : function(data) {
result = data;
alert(result);
$('#gallery').html(result);
}
});
}
});
});
});
When going this route the ubergallery doesn't find any folders, though I'm adressing the exact same uber.php as I would from the index.php.
I have looked into the ubergallery.php with xdebug and it would be called with exactly the same parameters.
Also I tried to call createGallery() without init:: and also explicitly create a new instance of the UberGallery class before calling createGallery.
All with no luck.
What am I doing wrong here?
In your resources/userCall.php script you are not actually calling the gallery function in order to render it. This appears to be the target of the second AJAX request. The script is merely defining the function.
EDIT: You've since updated the code in your question to include the call.
Assuming image-path is the parameter you want to supply as $pathToImage you will need to have a script that calls the function getGallery passing the value from $_POST['image-path'].
For example:
<?php
require_once('resources/uberCall.php');
getGallery($_POST['image-path']);
NOTE: Without any filtering sanitisation, bear in mind this could be potentially dangerous as I could pass an image-path parameter that picks a naughty directory.
Then use that script as the target of your second AJAX call.
P.S. Remove the async: false in the second AJAX call, it stops any other interactivity on your page whilst the request is in flight.
Bear in mind that with your parameter checking in the resources/userCall.php the original request is down a directory from the second request. This means the working directory for the second request will be different, the path will resolve to "resources/locations/$path/gallery" and not "locations/$path/gallery".
You are best off creating a second script for the AJAX action in the same directory as the original and requiring in the resource/userCall.php as per the first script. Or using a configurable absolute directory path to resolve the gallery location:
<?php
require_once('UberGallery.php');
require_once('config.php');
function getGallery($path) {
UberGallery::init() -> createGallery("{$config['gallery_base_path']}/$path/gallery");
}
With $config['gallery_base_path'] being something like /absolute/path/to/my/application/locations.
Additional confusion can be caused by not knowing whether file operations will use the include path, some file options can be told to use the include path which may include the current file path and current script directory, but if not it will only try to find the file from the current working directory. Whereas include and require all use the include path and current script directory as potential points to find a script.
P.S.P.S Use getcwd to find out what the current working directory is at any point in your scripts.
Im trying to call a function from another js file that is located in the same application directory as my main js script and html file. I receive an error claiming that the referenced function does not exist. I have referenced both of the scripts in the main html file in the proper order but cant for the life of me figure out why it cannot detect the function. I can only assume it has something to do with how dojo parses through the files and have experimented with both its dojo/domReady! and dojo/ready modules in hopes to force scripts to load. I feel like this should be much simpler than Im making it out to be. Any help would be greatly appreciated.
html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Asset View</title>
<meta charset="utf-8">
<link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">
<link rel="stylesheet" href= "styles/styles.css">
<script src="http://js.arcgis.com/3.14/"></script>
<script src="scripts/requests-js.js"></script>
<script src="scripts/layout-js.js"></script>
<script src="scripts/xmain-js.js"></script>
</head>
<body class = "claro">
</body>
</html>
requests-js.js
require(["dojo/dom","dojo/on","dojo/request","dojo/json","dojo/parser","dojo/ready"
], function(dom,on,request,JSON,parser,ready) {
ready(function() {
console.log("request start");
function sendRequest (url,assetCode,fromDate,toDate) {
console.log("Request innit");
request(url,{
method: "POST",
handleAs: "json",
headers: {"Content-Type": "application/json"},
data: JSON.stringify(
[
{
"AssetCodes": assetCode,
"FromGasDay": fromDate,
"ToGasDate": toDate
}
]
)
}).then(function(resp){
console.log(JSON.stringify(resp));
var naStorageJSON = resp;
});
}
console.log("request end");
});
});
main-js.js
require([
"dojo/dom","dojo/on","dojo/parser","dojo/json","dojo/request","dojo/ready"
], function(dom,on,parser,JSON,request,ready) {
ready(function() {
console.log("Main Start");
var url = "http://*********";
var assetCode = ["**"];
var toDate = "****";
var fromDate ="*****";
on(dom.byId("senecaLakeBtn"),"click", sendRequest(url,assetCode,toDate,fromDate));
console.log("Main End");
});
});
The issue is scope here. By declaring an empty array at the top of the js script (outside of its successive functions) the function can be accessible to other scripts in the application.
var app = [];
require(["dojo/dom","dojo/on","dojo/request","dojo/json","dojo/parser","dojo/ready"
], function(dom,on,request,JSON,parser,ready) {
ready(function(){
app.sendRequest = function sendRequest (url,assetCode,fromDate,toDate) {
...
...
}
}
it can them be called upon from other scripts by referencing
app.sendRequest(arg1,arg2,arg3);
I'm a bit stuck.
I have a Joomla site and I've got my app working to the point any app user can post the the video on certain pages to their wall using FBui - but what i reall want is the ability to post the video to anywhere, i looked into using og tags, i've added them but the video doesnt show up - im guessing ive got an issue or conflict somewhere. An example page:
Album page - http://fnoob.com/archives/P/34-alex-paterson/468-chewy-choosedays-vol-91-100
Here's the header part that's relevant ( i've taken out the links + appid - i know they work) :
<html xmlns:fb="http://www.facebook.com/2008/fbml" xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xml:lang="en-gb" lang="en-gb" slick-uniqueid="3">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# video: http://ogp.me/ns/video#"><meta property="fb:app_id" content="my_app_id">
<meta property="og:type" content="video.other" >
<meta property="og:url" content="path_to_swf" >
<meta property="og:image" content="path_to_image" >
further down we have the post to wall function which is working as:
<div id='fb-root'></div>
<script>
var APP_ID='137867843030139';
window.fbAsyncInit = initFacebook;
function initFacebook()
{
FB.init({
appId : APP_ID,
status : true, // check login status
cookie : false, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.getLoginStatus(onFacebookLoginStatus);
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
function facebookLogout()
{
FB.logout();
var loginButtonDiv=document.getElementById("fb-login-button-div");
loginButtonDiv.style.display="block";
var logoutButtonDiv=document.getElementById("fb-logout-button-div");
logoutButtonDiv.style.display="none";
var contentDiv=document.getElementById("user-is-authenticated-div");
contentDiv.style.display="none";
}
function facebookLogin()
{
var loginUrl='http://www.facebook.com/dialog/oauth/?'+
'scope=publish_stream,manage_pages&'+
'client_id='+APP_ID+'&'+
'redirect_uri='+document.location.href+'&'+
'response_type=token';
window.location=loginUrl;
}
/*
* Callback function for FB.login
*/
function onFacebookLoginStatus(response)
{
if (response.status=='connected' && response.authResponse)
{
var loginButtonDiv=document.getElementById("fb-login-button-div");
loginButtonDiv.style.display="none";
var logoutButtonDiv=document.getElementById("fb-logout-button-div");
logoutButtonDiv.style.display="none";
var contentDiv=document.getElementById("user-is-authenticated-div");
contentDiv.style.display="block";
}
else
{
var loginButtonDiv=document.getElementById("fb-login-button-div");
loginButtonDiv.style.display="block";
var contentDiv=document.getElementById("user-is-authenticated-div");
contentDiv.style.display="none";
}
}
function postToWallUsingFBUi()
{
var data=
{
method: 'feed',
message: '',
display: 'iframe',
caption: '<? echo $this->album->artist_name; ?> Click to Listen',
name: '<? echo $this->album->name; ?>',
picture: 'http://fnoob.com/images/albums/<? echo $this->album->image; ?>',
source: link_to_file',
link: '<? echo $album_link ?>', // Go here if user click the picture
description: 'By artist <? echo $this->album->artist_name; ?> on <? echo $this->album->format_name; ?> and powered by FNOOB.com ',
actions: [{ name: 'fnoob.com', link: '<? echo $album_link ?>' }],
}
FB.ui(data, onPostToWallCompleted);
}
function onPostToWallCompleted(response)
{
if (response)
{
//console.log(response);
if (response.error)
{
alert(response.error.message);
}
else
{
if (response.id)
alert('Posted.... carry on!');
else if (response.post_id)
alert('Posted.... carry on!');
else
alert('Crap... something went wrong');
}
}
// user cancelled
}
</script>
So what i want is basically every time this page is shared on facebook either ( page, feed, etc) that the image and video load and if clicked it plays and is linked to the page on the website. Any help really appreciated on this - been trying to figure it out for a day or so.
Add this tags
<meta property="og:video:width" content="640" />
<meta property="og:video:height" content="360" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video" content="DIRECT_VIDEO_FILE_URL" />
<meta property="og:video:secure_url" content="DIRECT_VIDEO_FILE_URL_SSL" />
<meta property="og:image" content="Image_you_want_to_use_as_thumbnail" />
<meta property="og:image:secure_url" content="Image_you_want_to_use_as_thumbnail_SSL" />
Video file will work in format mp4 and swf.
Important part here to get this to work is that you deliver file from an SSL / HTTPS source
The image will be the thumbnail behind the play button