I am developing sharepoint hosted app in sharepoint 2013. I am using following function to upload file in sharepoint.
self.UploadFile = function () {
// Suppose my business logic goes here
appWebContext.load(files);
appWebContext.executeQueryAsync(
function () {
alert("All files are uploaded.");
SP.UI.ModalDialog.commonModalDialogClose();
//SP.UI.ModalDialog.commonModalDialogClose();
//window.close();
},
function (error, errorMes) {
//SP.UI.ModalDialog.commonModalDialogClose();
//$("#btnMigrate").val("Migrate Class");
//$("#btnMigrate").removeAttr("disabled");
//alert(errorMes.get_message());
alert("Oooooops... it looks like something went wrong uploading your file.");
});
};
The above code works fine. It shows the messsage 'All files are uploaded'. Then it gives error on SP.UI.ModalDialog.commonModalDialogClose(); In above code when I call SP.UI.ModalDialog.commonModalDialogClose(); in appWebContext.executeQueryAsync function I get the error 'Javascript runtime error : Function is undefined'. Can anyone please tell me how to update UI from async function in javascript? Can you please provide me any code or link ?
The SP.UI.ModalDialog.commonModalDialogClose() method takes a "result" as a parameter.
SP.UI.ModalDialog.commonModalDialogClose(1,'Yay Success!'); is like using SP.UI.DialogResult.OK
Also, to manipulate the dialog window you'll need to have <script src="/_layouts/SP.UI.Dialog.js" type="text/javascript"></script> loaded somewhere.
See related post: commonModalDialogClose(SP.UI.DialogResult.OK, someValue) throws error
Related
I am trying to send information to a dialog box in an Outlook web-add in.
var url = window.location.origin+'/dialog.html'
var dialog
Office.context.ui.displayDialogAsync(url2,
function (asyncResult) {
dialog = asyncResult.value;
dialog.messageChild('message')
});
Which opens a dialog box and tries to send information to the dialog which has this Javascript:
Office.onReady().then(()=> {
Office.context.ui.addHandlerAsync(
Office.EventType.DialogParentMessageReceived,
onMessageFromParent);
});
function onMessageFromParent(arg){
console.log(arg.message)
document.getElementById('ID').style.display = 'none';
}
However, that just gives me the error:
TypeError: Office.context.ui.addHandlerAsync is not a function
When I run console.log(Office.context.ui), I get:
OSF.DDA.UI.ParentUI
[[Prototype]]:Object
closeContainer:function(){ … }
displayDialogAsync:function(){ … }
openBrowserWindow:function(){ … }
__proto__:Object
As you can see, there is not a addHandlerAync function within Office.context.ui but the Microsoft documentation says to use it.
What is going wrong here? Thanks
I look at your add-in. Its taskpane.html is not completed yet and the JavaScript is not included. However, I manually load the dialog page in the debugger and I confirm that your code in dialogbox.html is working. I can see Office.context.ui.addHandlerAsync is available in the Office.onReady handler. Would you like to fix your add-in and double check it's working?
I'm using the Office JS library to create an Excel add-in, and the Microsoft object is not being recognized. All the other classes from the library seem to to work fine, but when I call dialog.addEventHandler(Microsoft.Office.WebExtension.EventType.DialogMessageReceived,processMessage the Microsoft object is not evaluated properly. This is despite every other object from this library working fine.
I'm following this tutorial https://learn.microsoft.com/en-us/office/dev/add-ins/tutorials/excel-tutorial
I'm using CDN from this link: https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
The method that calls Microsoft.Office.WebExtension fails, and I knew it would because WebStorm tells me its not recognized.
All of the other objects from Office JS work fine though...here's an example of working code:
function sortTable() {
Excel.run(function (context) {
// Queue commands to sort the table by merchant name
var currentWorkbook = context.workbook.worksheets.getActiveWorksheet();
var expensesTable = currentWorkbook.tables.getItem('ExpensesTable');
var sortFields = [
{
key: 1,
ascending: false,
}
];
expensesTable.sort.apply(sortFields);
return context.sync();
}).catch(function (error) {
console.log("Error" + error);
if (error instanceof OfficeExtension.Error) {
console.log("Debug info: " + JSON.stringify(error.debugInfo));
}
});
}
I've review in detail the Office JavaScript API documentation: https://learn.microsoft.com/en-us/office/dev/add-ins/reference/overview/excel-add-ins-reference-overview
I've reviewed that there is an older common API: https://learn.microsoft.com/en-us/javascript/api/office?view=word-js-preview
I have suspected that I need access to this older common API, but the only documentation I've found says that you are just supposed to use the office.js library I've linked above.
Here's the whole function I'm trying to use:
function openDialog() {
//Call the Office Common API that opens a dialog
Office.context.ui.displayDialogAsync(
'https://localhost:3000/popup.html',
{height: 45, width:55},
function (result) {
dialog = result.value;
dialog.addEventHandler(Microsoft.Office.WebExtension.EventType.DialogMessageReceived,processMessage);
}
)
}
It does in fact open a dialog box as the Office.context.ui.displayDialogAsync method works. But as soon as you get to Microsoft.Office.WebExtension.EventType.DialogMessageReceived WebStorm tells me that the element Microsoft is an unresolved reference.
And here's the function it should call if it worked, processMessage. Because it does not get this far, the element does not get updated, and the dialog box does not close. I'm near 100% certain the issue is not with the function below, but I'm not ruling it out yet.
function processMessage(arg) {
console.log("made it inside processMessage")
document.getElementById("user-name").innerHTML = arg.message;
console.log("made ti just before dialog.close")
dialog.close();
}
The full name has been shortened to Office.EventType.DialogMessageReceived. Here's the GitHub issue: https://github.com/OfficeDev/office-js-docs-pr/issues/1710
I am building a Cordova App by myself and i need to create a new folder to store images in phone's internal storage. I have visited a lot of articles online and everyone is giving the same solution but it is not working for me.
Following is the code i am using in OnDeviceReady event but it is not working.
var new_directory = 'TEST';
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem) {
fileSystem.root.getDirectory(new_directory, { create: true }, function (file) {
alert("got the file: "+ file.name + ', ' + file.fullPath);
});
}, function(error) {
alert("can't even get the file system: " + error.code);
});
For Debugging i have also tried to alert
cordova.file
object but it is shown as undefined.
I have tried writing simple file request statement even its is not working
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, alert('success'), alert('failed'));
also the rest of the javascript code does not work when i write above code.
Please help me to get on with this.
Have you been asked to grant the proper permissions when you try to save the file? A window like this should have appeared:
If this is not the case, you are using an obsolete plugin version. Otherwise, there is something wrong with your code, sorry but I can't help you with that.
I'm coding a script in nodejs to automatically retrieve data from an online directory.
Knowing that I had never done this, I chose javascript because it is a language I use every day.
I therefore from the few tips I could find on google use request with cheerios to easily access components of dom of the page.
I found and retrieved all the necessary information, the only missing step is to recover the link to the next page except that the one is generated 4 seconds after loading of page and link contains a hash so that this step Is unavoidable.
What I would like to do is to recover dom of page 4-5 seconds after its loading to be able to recover the link
I looked on the internet, and much advice to use PhantomJS for this manipulation, but I can not get it to work after many attempts with node.
This is my code :
#!/usr/bin/env node
require('babel-register');
import request from 'request'
import cheerio from 'cheerio'
import phantom from 'node-phantom'
phantom.create(function(err,ph) {
return ph.createPage(function(err,page) {
return page.open(url, function(err,status) {
console.log("opened site? ", status);
page.includeJs('http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js', function(err) {
//jQuery Loaded.
//Wait for a bit for AJAX content to load on the page. Here, we are waiting 5 seconds.
setTimeout(function() {
return page.evaluate(function() {
var tt = cheerio.load($this.html())
console.log(tt)
}, function(err,result) {
console.log(result);
ph.exit();
});
}, 5000);
});
});
});
});
but i get this error :
return ph.createPage(function (page) {
^
TypeError: ph.createPage is not a function
Is what I am about to do is the best way to do what I want to do? If not what is the simplest way? If so, where does my error come from?
If You dont have to use phantomjs You can use nightmare to do it.
It is pretty neat library to solve problems like yours, it uses electron as web browser and You can run it with or without showing window (You can also open developer tools like in Google Chrome)
It has only one flaw if You want to run it on server without graphical interface that You must install at least framebuffer.
Nightmare has method like wait(cssSelector) that will wait until some element appears on website.
Your code would be something like:
const Nightmare = require('nightmare');
const nightmare = Nightmare({
show: true, // will show browser window
openDevTools: true // will open dev tools in browser window
});
const url = 'http://hakier.pl';
const selector = '#someElementSelectorWitchWillAppearAfterSomeDelay';
nightmare
.goto(url)
.wait(selector)
.evaluate(selector => {
return {
nextPage: document.querySelector(selector).getAttribute('href')
};
}, selector)
.then(extracted => {
console.log(extracted.nextPage); //Your extracted data from evaluate
});
//this variable will be injected into evaluate callback
//it is required to inject required variables like this,
// because You have different - browser scope inside this
// callback and You will not has access to node.js variables not injected
Happy hacking!
I am trying to move from events-push:1.0.M7 (latest released official version) to events-push:1.0.0.BUILD-SNAPSHOT. To obtain the latter version I cloned the https://github.com/smaldini/grails-events-push repo and built the plugin locally. The supposed advantage of the later version of the Grails plugin is that it uses newer versions of Atmosphere JavaScript and Java libraries.
In the README file the plugin refers to the GrailsTodos application at https://github.com/smaldini/grailsTodos. However the configuration and the code in the Todos application has nothing in common with the events-push usage information provided in its README file.
Instead, I am trying to use another sample written to demonstrate events-push plugin: https://www.dropbox.com/s/378bqmbu3ad4fnt/GrailsEventsPush.zip. This is an application running in Grails 2.3.7 and using events-push:1.0.M7. It works correctly out of the box with the released version (M7) of the events-push plugin.
Here are the steps I made to make it compile and run with events-push:1.0.0.BUILD-SNAPSHOT (which I installed locally using 'grails maven-install'):
In BuildConfig.groovy
grails.servlet.version = "3.0"
grails.tomcat.nio = true
...
dependencies {
compile 'org.grails.plugins:events:1.0.0.BUILD-SNAPSHOT'
}
plugins {
...
//compile ":events-push:1.0.M7"
compile ":events-push:1.0.0.BUILD-SNAPSHOT"
}
In MyEvents.groovy
events = {
'bagsUpdated' namespace: 'browser', browser:true // allows browser push on this topic
}
In the EventTestingController:
def updateBags() {
Thread.sleep(3000)
event([namespace: 'browser', topic: 'bagsUpdated']) // will trigger registered browsers on 'bagsUpdated' topic
render "OK"
}
I did not change index.gsp:
<script type="text/javascript">
try {
var grailsEvents = new grails.Events("${createLink(uri:'')}", {transport: "sse"});
grailsEvents.on('bagsUpdated', function (data) {
window.console && console.log("GOT bags!");
$("#waiting").html("Event fired!");
});
} catch (error) {
console.log("ERROR: " + error.toString());
}
$(function () {
// Call controller method that emits event when its done
$.ajax({
url: "${createLink(action:'updateBags')}",
success: function () {
console.log("Event should have been already fired...");
},
error: function () {
console.log("Ops something went wrong... ");
}
});
});
</script>
The code that worked correctly with 1.0.M7 version of the plugin does not work with 1.0.0.BUILD-SNAPSHOT version. Here is what I see in the Chrome console:
defer connecting topic: eventsbus grailsEvents.js:108
defer connecting topic: bagsUpdated grailsEvents.js:108
XHR finished loading: POST "http://localhost:8080/GrailsEventsPush/g-eventsbus/eventsbus?X-Atmosphere-t…sport=polling&X-Cache-Date=0&Content-Type=application/json&_=1416503898595". jquery.atmosphere.js:1691
XHR finished loading: POST "http://localhost:8080/GrailsEventsPush/g-eventsbus/eventsbus?X-Atmosphere-t…sport=polling&X-Cache-Date=0&Content-Type=application/json&_=1416503898598". jquery.atmosphere.js:1691
XHR finished loading: GET "http://localhost:8080/GrailsEventsPush/eventTesting/updateBags". jquery-1.11.0.min.js:4
Event should have been already fired... index:32
There are no errors - the browser simply does not get the event fired by the controller, which would produce "GOT bags!" and "Event fired!" statements in the Console.
The application I am trying to upgrade exhibits the same behavior - the server side events do not reach the browser. What am I missing?