requirejs on a windows phone 7 - windows-7

So I asked a question earlier about windows phone 7 with backbone and jquery and require.
I carried on investigating this and stripped it down to the bare minimum
and index page that just has
<script data-main="js/main" src="js/vendor/require/requireNew.js"></script>
and then a main.js that just has one path to jQuery
require.config({
//path mappings for module names not found directly under baseUrl
paths: {
jquery: 'vendor/jqm/jquery_1.7_min'
}
});
alert('why');
$(document).ready(function() {
alert('DOM IS READY ');
});
in windows 7 it will show the alert why - but not DOM is here...
it will do this on every other browser including ie7!!
Can anyone help?

Not sure if you are using Phonegap or not, if not you should be (or an equivalent framework).
If you follow the instructions here enter link description here
You will be able to build a default phonegap WP7 application when you have that take a look at the generated index.js
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// `load`, `deviceready`, `offline`, and `online`.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of `this` is the event. In order to call the `receivedEvent`
// function, we must explicity call `app.receivedEvent(...);`
onDeviceReady: function() {
app.receivedEvent('deviceready');
},
// Update DOM on a Received Event
receivedEvent: function(id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
console.log('Received Event: ' + id);
}
};
It's a bit more complicated on mobile devices as you first must wait for the "device ready" event before you can get a "dom ready" event

Related

outlook 365 add-in: Office.context is always empty

I work on a simple add-in for outlook 365, but it looks like I'm missing some simple point since office.context variable is always empty for me, for example even base code sample:
// The initialize function is required for all apps.
Office.initialize = function () {
// Checks for the DOM to load using the jQuery ready function.
$(document).ready(function () {
// After the DOM is loaded, app-specific code can run.
var item = Office.context.mailbox.item;
var subject = item.subject;
// Continue with processing the subject of the current item,
// which can be a message or appointment.
});
}
What can I miss? Adds-in permission is highest -- ReadWriteMailbox
Try to take some work example , for example: https://github.com/OfficeDev/Outlook-Add-in-Commands-Translator
You need parts of home.html and home.js.
I think this part of code need to work in your case:
(function () {
'use strict';
// The initialize function must be run each time a new page is loaded
Office.initialize = function (reason) {
$(document).ready(function () {
** now try to get the item **
});
}; })();
I try it and it's work for me..
Good luck.

Firefox Compile Simple Load Script - browser.xul

I'm trying to add a script tag to every dom page through privileged chrome, so far i'm able to get the first pageload of a tab, but after that, the script does nothing, I'm using Firefox Nightly 44.0. What am i doing wrong???
Documents I'm following:
https://developer.mozilla.org/en-US/Add-ons/Code_snippets/On_page_load
https://developer.mozilla.org/en-US/Add-ons/Overlay_Extensions/XUL_School/Intercepting_Page_Loads
mozilla-central/browser/base/content/browser.xul (line: 74)
<script type="application/x-javascript" src="chrome://browser/content/yyy/x.js" />
chrome://browser/content/yyy/x.js
var myExtension = {
init: function() {
// The event can be DOMContentLoaded, pageshow, pagehide, load or unload.
if(gBrowser) gBrowser.addEventListener("DOMContentLoaded", this.onPageLoad, false);
},
onPageLoad: function(aEvent) {
var doc = aEvent.originalTarget; // doc is document that triggered the event
var win = doc.defaultView; // win is the window for the doc
// test desired conditions and do something
// if (doc.nodeName != "#document") return; // only documents
// if (win != win.top) return; //only top window.
// if (win.frameElement) return; // skip iframes/frames
alert("page is loaded \n" +doc.location.href);
}
}
window.addEventListener("load", function load(event){
window.removeEventListener("load", load, false); //remove listener, no longer needed
myExtension.init();
},false);
mozilla-central/browser/base/jar.mn
content/browser/yyy/x.js (content/yyy/x.js)
You'll want to use loadFrameScript with argument of true to listen to future pages. Here are examples: https://github.com/mdn/e10s-example-addons/tree/master/run-script-in-all-pages
globalMM.loadFrameScript("chrome://modify-all-pages/content/frame-script.js", true);
This is documented here: https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIFrameScriptLoader#loadFrameScript%28%29
To stop it from loading in new tabs, then you have to use removeDelayedFrameScript
That github link also shows an example of how to do it with addon-sdk content-scripts.

Firefox Bootstrapped Add-On Injecting before load

Is it possible to add event listeners for a document before a page has been navigated to using a Bootstrapped add-on? I would like to see what page the user wants to navigate to as well as later after the page loads to inspect the DOM. I need to run code in the HTML content context.
In the past I used a toolbar XUL and included javascript within it and it would load before the HTML page loaded.
i looked into doing stuff before DOMContentLoaded sometime ago and found out there is a document inserted observer.
order of events after running research code at bottom
readystate changes to interactive (i think multiple times, not sure)
readystate changes to complete
DOMContentLoaded event fires
load event fires (Sometimes load doesnt fire, if you might have to change addEventListener with capture arugment (3rd argument) as false or true)
apparently there should be readystate loading before all of this but i can never catch it i dont know why.
after running the code in scratchpad, browser environemnt of course, then load a new page and watch the error console it will throw these reports in this order:
ready state changed! ("interactive") Scratchpad/4:18
02:28:07.873 ready state changed! ("complete") Scratchpad/4:18
02:28:07.874 DOMContentLoaded event fired! Scratchpad/4:53
02:28:07.938 Load event fired! Scratchpad/4:45
here is the research code. it adds a the listeners and observer to see whats firing.
var {classes: Cc, interfaces: Ci, utils: Cu} = Components;
var os = Cc['#mozilla.org/observer-service;1'].getService(Ci.nsIObserverService);
var LMObserver;
function myObserver() {
this.register();
}
myObserver.prototype = {
observe: function (subject, topic, data) {
//Cu.reportError(subject);
//Cu.reportError(data);
//i think subject is window element
subject.onreadystatechange = function () {
//loading
//interactive
//complete
Cu.reportError('ready state changed! ("' + subject.readyState + '")');
//var body = subject.documentElement.querySelector('body')
//you want to change title so you would do that here do something like: if (subject.readystate == 'complete') { subject.title = 'blah blah' }
//Cu.reportError('has body element: ' + body)
}
},
register: function () {
os.addObserver(this, 'document-element-inserted', false);
},
unregister: function () {
os.removeObserver(this, 'document-element-inserted', false);
}
};
//below this is the DOMContentLoaded thing i put this here so we can see what fires in what order
var pageLoad = function(event) {
var win = event.originalTarget.defaultView;
if (win && win.frameElement) {
return;
}
Cu.reportError('Load event fired!');
}
var pageDOMContentLoaded = function(event) {
var win = event.originalTarget.defaultView;
if (win && win.frameElement) {
return;
}
Cu.reportError('DOMContentLoaded event fired!');
}
LMObserver = new myObserver;
gBrowser.addEventListener("load", pageLoad, true);
gBrowser.addEventListener("DOMContentLoaded", pageDOMContentLoaded, true);
//gBrowser.removeEventListener("load", pageLoad, true);
//gBrowser.removeEventListener("DOMContentLoaded", pageDOMContentLoaded, true);
//LMObserver.unregister();
Here's some more indepth research on load events added with true or false as capture argument: https://github.com/Noitidart/event-listener-experiment-DOMC-and-load/blob/master/bootstrap.js

Firefox extension development: load event only once

I'm developing a kind of kiosk system for firefox. Therefore I need to listen to the load event, everytime a link is clicked and a new page / document is loaded. I used this in the js file to accomplish that:
window.addEventListener('load', function () {
gBrowser.addEventListener('DOMContentLoaded', function () {
alert("load");
}, false);
}, false);
But the event is only fired if i open the new browser window but not on reload or loading another content.
What could I do?
You should probably use nsIWindowWatcher service to do this:
let {Services} = Cu.import("resource://gre/modules/Services.jsm", {});
function windowObserver(aSubject, aTopic, aData) {
if (aTopic == "domwindowopened") {
let win = aSubject.QueryInterface(Ci.nsIDOMWindow);
// Do stuff here
}
}
// To start watching windows do this
Services.ww.registerNotification(windowObserver);
// To stop watching windows do this
Services.ww.unregisterNotification(windowObserver);

KendoUI DataSource binding to MVVM grid in durandal (using hottowel template) doesn't seem to work

I am using Visual Studio 2012 Update 2 hottowel template with updated durandal and jquery nuget packages...
Here is my code:
Durandal main.js:
require.config({
paths: { "text": "durandal/amd/text" }
});
define(['durandal/app', 'durandal/viewLocator', 'durandal/viewModelBinder', 'durandal/system', 'durandal/plugins/router', 'services/logger'],
function (app, viewLocator, viewModelBinder, system, router, logger) {
// Enable debug message to show in the console
system.debug(true);
app.start().then(function () {
toastr.options.positionClass = 'toast-bottom-right';
toastr.options.backgroundpositionClass = 'toast-bottom-right';
router.handleInvalidRoute = function (route, params) {
logger.logError('No Route Found', route, 'main', true);
};
// When finding a viewmodel module, replace the viewmodel string
// with view to find it partner view.
router.useConvention();
viewLocator.useConvention();
// Adapt to touch devices
app.adaptToDevice();
kendo.ns = "kendo-";
viewModelBinder.beforeBind = function (obj, view) {
kendo.bind(view, obj.viewModel || obj);
};
//Show the app by setting the root view model for our application.
app.setRoot('viewmodels/shell', 'entrance');
});
});
Durandal viewmodel:
define(['services/datacontext', 'durandal/plugins/router'],
function (datacontext, router) {
var activate = function () {
//yes yes - I will separate this out to a datacontext - it is here for debugging simplicity
var service = $data.initService("https://open.jaystack.net/c72e6c4b-27ba-49bb-9321-e167ed03d00b/6494690e-1d5f-418d-adca-0ac515b7b742/api/mydatabase/");
//return promise as durandal seems to want...
return service.then(function (db) {
vm.set("airports", db.Airport.asKendoDataSource());
});
};
var deactivate = function () {
};
var viewAttached = function (view) {
//kendo.init($("#airportGrid"));
//kendo.bind(view, vm);
//kendo.bind($("#airportGrid"), vm);
};
var vm = new kendo.data.ObservableObject({
activate: activate,
deactivate: deactivate,
airports: [],
title: 'Airports',
viewAttached: viewAttached
});
return vm;
});
Durandal view:
<section>
<h2 class="page-title" data-bind="text: title"></h2>
<div id="airportGrid" data-kendo-role="grid" data-kendo-sortable="true" data-kendo-pageable="true" data-kendo-page-size="25" data-kendo-editable="true" data-kendo-columns='["id", "Abbrev", "Name"]' data-kendo-bind="source: airports"></div>
</section>
I see the call being made to jaystack in Chrome's network monitor:
https://open.jaystack.net/c72e6c4b-27ba-49bb-9321-e167ed03d00b/6494690e-1d5f-418d-adca-0ac515b7b742/api/mydatabase//Airport?$inlinecount=allpages&$top=25
And I see data coming back.
The kendoui grid is created nicely but there is no data in it (I think this means kendoui is happy and the MVVM bindings are being bound to, however the created kendoui grid doesn't seem to want to understand the kendoui datasource created from jaydata)
Without durandal this works just nicely as demonstrated in:
http://jsfiddle.net/t316/4n62B/29/
I have been trying and trying for 2 days now - can someone please help me out?
Thanks
TJ
Sounds like everything is working now after removing the parts that are only required by breeze.
Nevertheless I'd suggest restructuring the working dFiddle code slightly to ensure that a) vm is defined before setting vm.airports in activate and b) there's no need to create a dummy vm.airports kendo.data.DataSource() that gets overwritten in activate anyway.
define(function( ) {
var vm = new kendo.data.ObservableObject({
activate: activate,
deactivate: deactivate,
// airports: new kendo.data.DataSource(),
title: 'Airports',
viewAttached: viewAttached
});
return vm;
function activate () {
var service = $data.initService("https://open.jaystack.net/c72e6c4b-27ba-49bb-9321-e167ed03d00b/6494690e-1d5f-418d-adca-0ac515b7b742/api/mydatabase/");
return service.then(function( db ) {
vm.airports = db.Airport.asKendoDataSource();
});
}
function deactivate () {
}
function viewAttached ( view ) {
//kendo.init($("#airportGrid"));
//kendo.bind(view, vm);
//kendo.bind($("#airportGrid"), vm);
}
});
Which version on jQuery do you use? Try with 1.8.3 or 1.9 + Migration.
In Chrome switch the stop sign to purple (two clicks) to catch uncaught exceptions and see if there is any.

Resources