OneDrive API Button not opening window? - onedrive

I'm new to the OneDrive API and I cannot figure out why a window doesn't pop open when I call the function? I get no error logs in the console window either.
<script type="text/javascript" src="https://js.live.net/v7.0/OneDrive.js"></script>
<script type="text/javascript">
function launchOneDrivePicker(){
var options = {
clientId: "XXXXXXXXXXXXXXXXXXXXXXXX", (I put my client ID in here.)
action: "query",
multiSelect: true,
openInNewWindow: true,
advanced: {
redirectUri: "XXXXXXXXXXXXXXXXXXXXXXXXXXXX" (I put my redirect URI in here)
},
success: function(files) { /* success handler */ },
cancel: function() { /* cancel handler */ },
error: function(e) { /* error handler */ }
}
OneDrive.open(options);
}
</script>
<button onClick="launchOneDrivePicker">Open from OneDrive</button>
I don't know what I'm doing wrong? any assistance would be great.

try set action to one of [share | download | query], the action is like a enum, so it can only be set to action="query" for example.

Related

How to use one drive file picker in browser?

I need to integrate One Driver file picker in my website. I am using this js lib to do the task.
<script type="text/javascript" src="//js.live.net/v5.0/wl.js"></script>
The code I wrote is
WL.init({ client_id: "000000004C1xxxxx", redirect_uri: 'https://xxx.net/' });
WL.login({
scope: "wl.skydrive wl.signin"
}).then(
function(response) {
WL.fileDialog({
mode: "open",
select: "multi"
}).then(
function (response) {
},
function (responseFailed) {
}
);
},
function(response) {
log("Failed to authenticate.");
}
);
It showed the popup window, and went through the authentication process. However once I've logged in within the popup window. It just redirected to the redirect URL I provided, the file picker never showed. Any ideas?
I solved this issue by including the js script in my callback page, wl sdk will automatically handle the oauth process for you.
<script type="text/javascript" src="//js.live.net/v5.0/wl.js"></script>
It's weird as I could not find any documents related to how you should do with your callback page on MS developer website.
Can you get the "Using the open from OneDrive picker" sample working on http://isdk.dev.live.com?
Use the function below in your js file and don't forget to include :
<script type="text/javascript" src="https://js.live.net/v7.0/OneDrive.js"></script>
function launchOneDrivePicker() {
var odOptions = {
clientId: "*******************************",
action: "download",
multiSelect: true,
openInNewWindow: true,
advanced: {
queryParameters: "select=id,name,size,file,folder,photo",
redirectUri: (Eneter your default url e.g :)"http://localhost:60666/WebForm1.aspx"
},
success: function (response) { /* success handler */ },
cancel: function () { /* cancel handler */ },
error: function (e) { /* error handler */ },
};
OneDrive.open(odOptions);
}
I hope it works for everyone thanks.

fb:like_box failed to resize in 45s

Is there any working solutions to prevent Facebook Like Box to not breaking his container or something ? Have set the async to TRUE but still gets out. As I can see on stackoverflow there are issues only for fb:login_button, however I receive the same warning to console:
fb:like_box failed to resize in 45s
To sum up, here is my code, perhaps I am missing something.
HTML Tag
<html lang="en" xmlns:fb="http://ogp.me/ns/fb#">
FB Initialization
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId: <?php echo $this->config['facebook']['appId']; ?>,
status: true,
cookie: true,
xfbml: true
});
/* All the events registered */
FB.Event.subscribe('auth.login', function (response) {
// do something with response
alert("login success");
});
FB.Event.subscribe('auth.logout', function (response) {
// do something with response
alert("logout success");
});
FB.getLoginStatus(function (response) {
if (response.session) {
// logged in and connected user, someone you know
alert("login success");
}
});
};
(function () {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
} ());
</script>
FB Like Box
<div class="facebook-plugin">
<div class="fb-like-box" data-href="https://www.facebook.com/****" data-width="346" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div>
</div>
This is it. Any help would be appreciated. Thanks in advance!
Accordingly to new Facebook API upgrade, they give up to Like Box, therefore this is no longer an issue.
With the release of Graph API v2.3, the Like Box plugin is deprecated. Please use the new Page Plugin instead. The Page Plugin allows you to embed a simple feed of content from a Page into your websites.
If you do not manually upgrade to the Page Plugin, your Like Box plugin implementation will automatically fall back to the Page Plugin by June 23rd 2015.
Page Plugin link is https://developers.facebook.com/docs/plugins/page-plugin

Why dialog just works for the first time to open my dialog box?

I have a div (mvc4 razor):
<div onclick='dialogtrigger(this)'>send</div>
when user click on this div it goes to loading a view on popup dialog box and show it to user.
it works fine for the first time that user click it, after that when user close dialog box and want to reopen it again it gives me this error :
0x800a01b6 - JavaScript runtime error: Object doesn't
support property or method 'dialog'
I clean my browser cache and check my script file if it can not support dialog why works for the first time?
my function code:
$.ajax({
url: "OpenSendDialog",
type: "GET",
})
.done(function (result) {
$("#clientdetailmodal").html(result).dialog({
autoOpen: true, modal: true, show: {
effect: "blind",
duration: 500
}
});
});
}
in my main view:
<div id="clientdetailmodal"></div>
and my controller:
[HttpGet]
public ActionResult OpenSendDialog()
{
return view();
}
I think that a problem with your function and her scope...
look here, i hope that'll help you :
var dialogtrigger=null; // global scope
$(function() {
dialogtrigger = function (){
//replace with your ajax call
$("#clientdetailmodal").html($('#content')).dialog({
autoOpen: false, modal: true, show: {
effect: "blind",
duration: 500
}
});
}
$( "#opener" ).click(function() {
// or destruct your modal on close and re-call your ajax
$( "#clientdetailmodal" ).dialog( "open" );
});
});

Why success callback is not called in extjs form submission?

I'm trying to upload a file using Ext JS forms and in case of success or failure, show appropriate messages. But I'm not able to get the desired result. I'm not able to make success or failure callbacks work in form.submit action.
What I've done till now is:
Creating a form with this script:
new Ext.FormPanel({
fileUpload: true,
frame: true,
url: '/profiler/certificate/update',
success: function() {
console.log(arguments);
},
failure: function() {
console.log(arguments);
}
}).getForm().submit()
​/*
The response Content-Type is text/html (with charcode=utf8);
The response JSON is: { "success": true }
*/​​
Setting the response Content-Type to text/html based on this answer.
Sending an appropriate JSON result back, based on Ext JS docs. The response captured via Fiddler is:
{"success":false}
or
{"success":true}
I even set the response Content-Type to application/json. But still no success.
I've read links like this and this, but none of them helped. Please note that I also tried another script which creates a form, with an upload field in it, and a save button, and I submitted the form in the handler of the save button. But still no callback is fired.
Here's a working example - Javascript code:
Ext.onReady(function () {
Ext.define('ImagePanel', {
extend: 'Ext.form.Panel',
fileUpload: true,
title: 'Upload Panel',
width: 300,
height: 100,
onUpload: function () {
this.getForm().submit({
url: 'upload.php',
scope: this,
success: function (formPanel, action) {
var data = Ext.decode(action.response.responseText);
alert("Success: " + data.msg);
},
failure: function (formPanel, action) {
var data = Ext.decode(action.response.responseText);
alert("Failure: " + data.msg);
}
});
},
initComponent: function () {
var config = {
items: [
{
xtype: 'fileuploadfield',
buttonText: 'Upload',
name: 'uploadedFile',
listeners: {
'change': {
scope: this,
fn: function (field, e) {
this.onUpload();
}
}
}
}
]
};
Ext.apply(this, Ext.apply(this.initialConfig, config));
this.callParent(arguments);
}
});
var panel = Ext.create('ImagePanel', {
renderTo: Ext.getBody()
});
});
And PHP code:
<?php
if (isset($_FILES)) {
$temp_file_name = $_FILES['uploadedFile']['tmp_name'];
$original_file_name = $_FILES['uploadedFile']['name'];
echo '{"success": true, "msg": "'.$original_file_name.'"}';
} else {
echo '{"success": false, "msg": "No Files"}';
}
I have been struggling with this for quite some time now as well. Here's my code:
Ext.getCmp('media-upload-form').getForm().doAction('submit', {
url: './services/recordmedia/upload',
method: 'post',
waitMsg: 'Please wait...',
params: {
entityId: this.entityId,
},
failure: function(form, action){
alert(_('Error uploading file'));
this.fireEvent('file-upload');
this.close();
},
success: function(form, action){
this.fireEvent('file-upload');
this.close();
},
scope: this
})
The response was always wrapped in <pre> tags by the browser, what caused the Extj lib not to call the callbacks. To fix this:
make sure your server returns the correct json: {"success":true}
make sure that the content-type is set to text/html
Actually, this is well covered by docs for Ext.form.Panel and Ext.form.Basic. The problem with your code not working is that there are no config options "success", "failure" for the form panel. You should put them in the config object passed to the submit action. So your code should look like:
new Ext.FormPanel({
fileUpload: true,
frame: true
}).getForm().submit({
url: '/profiler/certificate/update',
success: function() {
console.log(arguments);
},
failure: function() {
console.log(arguments);
}
});
Note the difference: In Ext 4, there is a form component (Ext.form.Panel) which is basically a view component concerned with how you form looks, and then there is the underlying form class (e.g. Ext.form.Basic) concerned with the functionality. Form submissions are handled by Ext.form.Basic (or whatever returned by your form.getForm()).

How to get the load event before ajax call to PHP returns

I would like my webpage to render faster. Based on this article, I understand that the page renders when the 'load' event is fired.
When I look at the Network Tab of my Chrome browser, I see that the 'load' event is fired after an ajax call to a PHP script returns.
Webpage is live at http://www.99like.com/index.php
=> Is there any way to get the page to render before the PHP script is called?
Following is the extract of the code which I think is relevant for the question:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="highcharts.js"></script>
<script type="text/javascript">
var ajax_load = "<img class='loading' src='images/load.gif' alt='loading...' />";
var inputForm = "<div class='shadow'><form type='submit' onsubmit='displayChart(); return false'><input id='searchBox' type='text' size='30' value='search keyword' /></form></div>";
var chart = "<div id='chart' class='shadow'></div>";
var chartPage = inputForm + chart;
$(function ()
{
exampleChart();
});
function exampleChart() {
$('#searchBox').val("hotel"); // nice example
displayChart ();
}
function displayChart () {
var keyword = $('#searchBox').val();
var chart = new Highcharts.Chart({ ... });
chart.showLoading();
var phpFunctionURL = "getChartData.php";
var DataSeries;
$.ajax( {
url: phpFunctionURL,
dataType: 'json',
async: false,
data: { ... },
success: function(json) { DataSeries = json; }
} );
}
</script>
A few remarks:
Make sure all your JavaScript are at the bottom of the page, including JQuery and Google Analytics code
Your web-page is missing the end tag
If needed, you could wait for the onLoad event to launch your AJAX request instead of the DomReady event, this will speed up the page rendering.
Looks like your AJAX request is synchronous. Making it asynchronous will solve the problem.
$.ajax( {
url: phpFunctionURL,
dataType: 'json',
async: true, // Changed from false to true
data: { ... },
success: function(json) { DataSeries = json; }
} );