I'm developing a simple gadget for Windows 7 as a learning exercise.
I read in this article (under the subtopic Gadgets and Script) that to initialize the gadget, you should use document.onreadystatechange instead of events such as onLOad. I've seen it in the example project code I've looked through as well. This is what I came up with for my project.
document.onreadystatechange = function()
{
if(document.readyState == "complete")
{
System.Gadget.settingsUI = "settings.html"; //this line enables the settings UI
System.Gadget.onSettingsClosed = settingsClosed;
}
}
However when I use this snippet in my work, it doesn't work. The Options button in the gadget doesn't show up. If I use onLoad, it works. I have installed 2 gadgets. Each of them use these 2 methods. One use onLoad and the other use document.onreadystatechange. And both of them works!
Now I'm confused why it doesn't work with my gadget. Is there any important part I'm overlooking?
try something along these lines,
move your onsettingsclosed to a different event and call the function with it
document.onreadystatechange = function()
{
if(document.readyState=="complete")
{
var searchTags = System.Gadget.Settings.read("searchTags");
if(searchTags != "")
{
searchBox.value = searchTags;
}
}
}
System.Gadget.onSettingsClosing = function(event)
{
if (event.closeAction == event.Action.commit)
{
var searchTags = searchBox.value;
if(searchTags != "")
{
System.Gadget.Settings.write("searchTags", searchTags);
}
event.cancel = false;
}
}
Related
I'm implemeting a very simple use case, and yet not only do I not find a solution, but I can't find any article that talks about it, as if I was the only one.
I want my custom Javascript to execute on every page of a given SharePoint site.
Easy, you'll say. Well, no. Far from it, like always with SharePoint.
Steps to reproduce :
Create a out-of-the-box publishing site
Include the custom javascript below using any of the means I describe below
Go to the site, to the home page. It's a publishing site, so by default you should have the left navigation pane with at least "Home" and "Documents" by default.
The first time you load the page, the javascript executes. Now, click on "documents". The page changes but the Javascript is not executed.
That's because SharePoint uses Ajax. Even if the MDS is disabled. It uses Ajax through the hash ( # ) in the URL.
For example, it transforms a very inocuous link like this one :
< a href src="/SitePages/Home.aspx">
into this URL when you click it:
https://your-url/sites/your-site/_layouts/15/start.aspx#/SitePages/Home.aspx
Here is my Javascript :
if (ExecuteOrDelayUntilScriptLoaded && _spBodyOnLoadFunctionNames) {
_spBodyOnLoadFunctionNames.push(ExecuteOrDelayUntilScriptLoaded(
function () {
alert("It's working!");
}, "sp.js"));
}
So, I've tried the following ways of including the Javascript :
Through a User Custom Action. I've used this very handy page to add it, but that's not relevant. The action is added to the site and I can see the JS in the DOM on first load. But then after I click on a link in the page and after SP uses Ajax, it does not execute it again.
By modifying the master page -- namely: seattle.html. at first I included it this way, simply under other native inclusions :
<head runat="server">
...
<!--SPM:<SharePoint:ScriptLink language="javascript" name="suitelinks.js" OnDemand="true" runat="server" Localizable="false"/>-->
<!--SPM:<SharePoint:ScriptLink language="javascript" Name="~sitecollection/SiteAssets/MYJAVASCRIPT.js" runat="server"/>-->
But then I read about AjaxDelta (here : https://msdn.microsoft.com/fr-fr/library/office/dn456543.aspx ) , and I moved my inclusion (still in the header) into < AjaxDelta >, like this :
<head runat="server">
...
<!--SPM:<SharePoint:AjaxDelta id="DeltaPlaceHolderAdditionalPageHead" Container="false" runat="server">-->
<!--SPM:<asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server"/>-->
<!--SPM:<SharePoint:DelegateControl runat="server" ControlId="AdditionalPageHead" AllowMultipleControls="true"/>-->
<!--SPM:<SharePoint:ScriptLink language="javascript" Name="~sitecollection/SiteAssets/MYJAVASCRIPT.js" runat="server"/>-->
<!--SPM:</SharePoint:AjaxDelta>-->
...and yet nothing works. The Javascript is never executed when switching between pages of the same site by clicking on SharePoint's "managed" links.
I'm looking for a solution that handles elegantly SharePoint's Ajax, not something heavy and risky that hijacks every hyperlink on a page. For example I've tried to hook my code onto ajaxNavigate methods (for example : addNavigate) but I'm not sure I understand what's actualy going on there and if it could be of any help to me.
EDIT :
There seems to be a consensus (for example, here at the very bottom) that User Custom Actions get executed no matter what -- because SharePoint allegedly places their ScriptLink into the AjaxDelta for some reason. Well, that's not what I witnessed.
There's another consensus that this issue can be adressed by using "RegisterModuleInit". This doesn't work for me either.
I'm extermely puzzled. I think those two solutions do address navigation issues when the user clicks on a link and then clicks "back". But it does NOT address SharePoint's clever "managed", Ajax-riddled, hyperlinks.
I've finally found a solution that never seems to fail so far. That's a real relief.
Short answer: use asyncDeltaManager.add_endRequest
This MSDN discussion suggests a simple way to implement it:
https://social.msdn.microsoft.com/Forums/office/en-US/1ae292b4-3589-46f6-bedc-7bd9dc741f1b/javascript-code-to-execute-after-all-the-elements-and-css-are-loaded?forum=appsforsharepoint
$(function () {
ExecuteOrDelayUntilScriptLoaded(function () {
if (typeof asyncDeltaManager != "undefined")
asyncDeltaManager.add_endRequest(MYCUSTOMCODE); //execute it after any ajax event
else
MYCUSTOMCODE(); //execute it at first load
}, "start.js");
});
This shows how to include it properly in SharePoint's cycle (with ExecuteOrDelayUntilScriptLoaded )
https://sharepoint.stackexchange.com/questions/171490/javacript-only-executed-on-first-page-load
Full-blown solution (objet "LefeCycleHelper"), by Mx
https://sharepoint.stackexchange.com/questions/192974/where-to-place-a-js-script-with-whom-i-need-to-get-an-div-id/193009#193009
//use an IIFE to create a scope and dont dirty the global scope
(function (_) {
// use strict to ensure we dont code stupid
'use strict';
var initHandlers = [];
var initMDSHandlers = [];
var ensureSharePoint = function (handler) {
var sodLoaded = typeof (_v_dictSod) !== 'undefined' && _v_dictSod['sp.js'] != null && _v_dictSod['sp.js'].state === Sods.loaded;
if (sodLoaded) {
handler();
} else {
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () { });
SP.SOD.executeOrDelayUntilScriptLoaded(handler, 'sp.js');
}
};
var initMDS = function () {
for (var i = 0; i < initMDSHandlers.length; i++) {
initMDSHandlers[i]();
}
};
var init = function () {
// Register MDS handler
if ('undefined' != typeof g_MinimalDownload && g_MinimalDownload && (window.location.pathname.toLowerCase()).endsWith('/_layouts/15/start.aspx') && 'undefined' != typeof asyncDeltaManager) {
asyncDeltaManager.add_endRequest(initMDS);
} else {
for (var i = 0; i < initHandlers.length; i++) {
initHandlers[i]();
}
}
};
var registerInit = function (handler) {
initHandlers.push(handler);
};
var registerInitMDS = function (handler) {
initMDSHandlers.push(handler);
};
var domReady = (function (handler) {
var fns = [];
var listener;
var loaded = (document.documentElement.doScroll ? /^loaded|^c/ : /^loaded|^i|^c/).test(document.readyState);
if (!loaded) {
document.addEventListener('DOMContentLoaded', listener = function () {
document.removeEventListener('DOMContentLoaded', listener);
loaded = 1;
while (listener = fns.shift()) listener();
});
}
return function (fn) {
loaded ? setTimeout(fn, 0) : fns.push(fn);
};
})();
var attachToLoad = function (functionToAttach) {
registerInit(functionToAttach);
registerInitMDS(functionToAttach);
domReady(function () {
init();
});
};
_.AttachToLoad = attachToLoad;
// THIS WILL PROTECT YOUR GLOBAL VAR FROM THE GARBAGE COLLECTOR
window.LifeCycleHelper = _;
if (window.Function != 'undefined' && typeof (Function.registerNamespace) == 'function') {
Function.registerNamespace('LifeCycleHelper');
}
})({});
var theCodeYouWantToRun = function () {
alert('theCodeYouWantToRun');
};
window.LifeCycleHelper.AttachToLoad(theCodeYouWantToRun);
I got the following code which was written into a Chrome Extension (Javascript?)
;
(function() {
function findCaptcha() {
return document.querySelector('.g-recaptcha') || document.getElementById('g-recaptcha');
}
function completeCaptch(intervalID) {
intervalID = setInterval(function() {
if (findCaptcha() != null) {
findCaptcha()
.remove();
clearInterval(intervalID);
}
}, 200);
}
var loadedID = null;
if (location.hash === '#checkout' || location.pathname === '/checkout') {
completeCaptch(loadedID);
}
var stateID = null;
window.addEventListener('popstate', function(event) {
stateID = null;
clearInterval(stateID);
if (location.hash === '#checkout' || location.pathname === '/checkout') {
completeCaptch(stateID);
}
}, false);
})();
Reading this code is simple enough, it calls the function completeCaptch with some sort of ID that is irrelevant and then calls the function findCaptch if it is present (return document.querySelector('.g-recaptcha') || document.getElementById('g-recaptcha');) and simply removes the document.ID by calling .remove();
This is code that bypasses reCAPTCHA in a demo and I was wondering if it is possible to convert this code (whatever it was written in) to C# if I were to use a .net WebBrowser.
Using a .net WebBrowser I would be able to getElementById but would I be able to call .remove() in C#?
Thanks.
Checkout the HtmlAgilityPack library. It's a fantastic library for dealing with HTML DOMs, allowing you to do something like this:
doc.DocumentNode.SelectSingleNode("/xpath/to/node").Remove();
This is my main.js
(function () {
"use strict";
//No need of WinJS
var activation = Windows.ApplicationModel.Activation;
var roaming = Windows.Storage.ApplicationData.current.roamingSettings;
// For App Start Up
Windows.UI.WebUI.WebUIApplication.addEventListener("activated", function (args) {
if (args.detail[0].kind === activation.ActivationKind.launch) {
if (roaming.values["currentUri"]) {
if (roaming.values["UserName"])
{
localStorage.setItem("UserName", roaming.values["UserName"]);
window.location.href = roaming.values["currentUri"];
}
}
}
});
// For App Suspension
Windows.UI.WebUI.WebUIApplication.addEventListener("suspending", function (args) {
roaming.values["currentUri"] = window.location.href;
roaming.values["UserName"] = localStorage.getItem("UserName");
});
// For Resuming App
Windows.UI.WebUI.WebUIApplication.addEventListener("resuming", function (args) {
var roam = Windows.Storage.ApplicationData.current.roamingSettings;
if (roam) {
if (roam.values["currentUri"]) {
localStorage.setItem("UserName", roam.values["UserName"]);
window.location.href = roam.values["currentUri"];
}
}
}, false);
// not working backpressed event
Windows.UI.WebUI.WebUIApplication.addEventListener("backpressed", function (args) {
// to do
}, false);})();
I need to add back key press event for windows phone without using winjs library?
Can anyone suggest me?
I am using ms-appx-web context in my app. I dont want to use winjs library.
I need to add back key press event for windows phone without using winjs library?
The backpressed event should be attached to Windows.Phone.UI.Input.HardwareButtons but not Windows.UI.WebUI.WebUIApplication.
If you refer to HardwareButtons.BackPressed and HardwareButtons, you will find the backpressed event is used like this:
var hardwareButtons = Windows.Phone.UI.Input.HardwareButtons;
function onBackPressed(eventArgs) { /* Your code */ }
// addEventListener syntax
hardwareButtons.addEventListener("backpressed", onBackPressed);
hardwareButtons.removeEventListener("backpressed", onBackPressed);
And since you are not making a Single Page Application. This event should be attached on every new page's JS codes.
Update: If you want to know your current device programmatically, you can use the following if-statement:
if (deviceInfo.operatingSystem.toLowerCase() == "windowsphone")
{
//do your windows phone logic
} else if (deviceInfo.operatingSystem.toLowerCase() == "windows")
{
//do your windows logic
}
I used this-
var flag = Windows.Foundation.Metadata.ApiInformation.isTypePresent("Windows.Phone.UI.Input.HardwareButtons");
if (flag) {
var hardwareButtons = Windows.Phone.UI.Input.HardwareButtons;
hardwareButtons.addEventListener("backpressed", onBackPressed);
}
It worked for me well!
First Question here, too! Yay! Just moved this from AskUbuntu.
I am just about to finish a little private project for gaining some experience where i try to change the app layout so it works as a normal website (on Jimdo, so it was quite of a challenge first) without much JavaScript required but is fully functional on mobile view.
Since Jimdo serves naturally only the actual site, I had to implement an
if (activeTab.getAttribute('jimdo-target') != null)
location.href = activeTab.getAttribute('jimdo-target');
redirect into the __doSelectTab() function in tabs.js . (In js I took the values from the jimdo menu string to build the TABS menu with this link attribute)
Now everything works fine exept at page load the first tab is selected. I got it to set the .active and .inactive classes right easily, but it is not shifted to the left.
So my next idea is to let it initialize as always and then send a command to change to the current tab.
Do you have any idea how to manage this? I couldn't because of the this.thisandthat element I apparently don't really understand...
Most of you answering have the toolkit and the whole code, but I am listing the select function part of the tabs.js:
__doSelectTab: function(tabElement, forcedSelection) {
if ( ! tabElement)
return;
if (tabElement.getAttribute("data-role") !== 'tabitem')
return;
if (forcedSelection ||
(Array.prototype.slice.call(tabElement.classList)).indexOf('inactive') > -1) {
window.clearTimeout(t2);
activeTab = this._tabs.querySelector('[data-role="tabitem"].active');
offsetX = this.offsetLeft;
this._tabs.style['-webkit-transition-duration'] = '.3s';
this._tabs.style.webkitTransform = 'translate3d(-' + offsetX + 'px,0,0)';
this.__updateActiveTab(tabElement, activeTab);
if (activeTab.getAttribute('jimdo-target') != null)
location.href = activeTab.getAttribute('jimdo-target');
[].forEach.call(this._tabs.querySelectorAll('[data-role="tabitem"]:not(.active)'), function (e) {
e.classList.remove('inactive');
});
var targetPageId = tabElement.getAttribute('data-page');
this.activate(targetPageId);
this.__dispatchTabChangedEvent(targetPageId);
} else {
[].forEach.call(this._tabs.querySelectorAll('[data-role="tabitem"]:not(.active)'), function (el) {
el.classList.toggle('inactive');
});
var self = this;
t2 = window.setTimeout(function () {
var nonActiveTabs = self._tabs.querySelectorAll('[data-role="tabitem"]:not(.active)');
[].forEach.call(nonActiveTabs, function (el) {
el.classList.toggle('inactive');
});
}, 3000);
}
},
...and my app.js hasn't anything special:
var UI = new UbuntuUI();
document.addEventListener('deviceready', function() { console.log('device ready') }, true);
$(document).ready(function () {
recreate_jimdo_nav();
UI.init();
});
So meanwhile found a simple workaround, however I'd still like to know if there is another way. Eventually I noticed the __doSelectTab() function is the one that executes the click, so it does nothing but to show the other tab names when they are hidden first. so I added the global value
var jnavinitialized = false;
at the beginning of the tabs.js and run
var t = this;
setTimeout(function(){t.__doSelectTab(t._tabs.querySelector('[data-role="tabitem"].jnav-current'))}, 0);
setTimeout(function(){t.__doSelectTab(t._tabs.querySelector('[data-role="tabitem"].jnav-current'))}, 1);
setTimeout(function(){jnavinitialized = true;}, 10);
at the top of the __setupInitialTabVisibility() function. Then I changed the location.href command to
if (activeTab.getAttribute('jimdo-target') != null && jnavinitialized)
location.href = activeTab.getAttribute('jimdo-target');
And it works. But originally I searched for a way to change the tab on command, not to run the command for selecting twice. So if you know a better or cleaner way, you are welcome!
I have a function, with some unfamiliar code inside. This works, but I am trying to assign a button, or link to run this and normal javascript events will not work. The app is based on jquery, and jqueryui.
el.prototype.commands.mkdir = function() {
this.disableOnSearch = true;
this.updateOnSelect = false;
this.mime = 'directory';
this.prefix = 'untitled folder';
this.exec = $.proxy(this.fm.res('mixin', 'make'), this);
this.shortcuts = [{
pattern: 'ctrl+shift+n'}];
this.getstate = function() {
return !this._disabled && this.fm.cwd().write ? 0 : -1;
}
}
Does anyone have any ideas.
The above is code from elFinder, which is open-source and can be found on github. elFinder has a function/button ready for you for the create folder action. What else are you trying to achieve?