Why is the scope wrong on MS Edge console at breakpoints? - microsoft-edge

I'm finding that in MS Edge when I use the debugger; statement or a breakpoint, the scope of this is always the global scope (e.g. the Window object) regardless of what the scope of this is where the code is actually breaking.
For example, the following code is inside a constructor (thus this is not the global object!):
this.myString = "hello";
// returns the current function scope [object Object]
console.log(this);
// returns "hello"
console.log(this.myString);
var fakeThis = this;
/* In this breakpoint, typing:
* `this` returns [object Window]
* `this.myString` returns undefined
* `fakeThis` returns the correct function scope
* `fakeThis.myString` returns "hello".
*/
debugger;
Is this a known bug with the MS Edge console or is there something specific that might be causing this?

Can't reproduce the problem on my side (using Microsoft Edge 44.18362.1.0), it seems that everything works well on my side, the screenshot like this, and the sample code as below:
<p id="demo"></p>
<script>
// Constructor function for Person objects
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
this.myString = "hello";
// returns the current function scope [object Object]
console.log(this);
// returns "hello"
console.log(this.myString);
var fakeThis = this;
/* In this breakpoint, typing:
* `this` returns [object Window]
* `this.myString` returns undefined
* `fakeThis` returns the correct function scope
* `fakeThis.myString` returns "hello".
*/
console.log(this);
console.log(this.myString);
console.log(fakeThis);
console.log(fakeThis.myString);
debugger;
}
// Create a Person object
var myFather = new Person("John", "Doe", 50, "blue");
// Display age
document.getElementById("demo").innerHTML = "My father is " + myFather.age + ".";
</script>
please try to clear the cache and history, then re-test your code. Also, you could create a new page to test above code, check whether they are working on your side.

Related

Adding key value pair to object inside forEach loop

I'm trying to add a thenable result to an object using a forEach loop. I can see the entries when I console.log the results, but when I try to use them for other parts of my code, I get an empty object.
I was getting an error previously telling me that the object's name (results) was not defined. I moved the object outside of the function and now I just get an empty object returned when I try to return the values of the object.
I tried this first:
let results = {};
// Check for all videos in cache (returns [])
const findAllVidsInCache = (videoArray) => {
videoArray.forEach(video => {
check(video).then(res => {
// resultsArray.push(res);
results[video] = res;
return results;
});
});
return results;
}
Then I tried this:
let results = {};
// Check for all videos in cache (returns [])
const findAllVidsInCache = (videoArray) => {
videoArray.forEach(video => {
check(video).then(res => {
// resultsArray.push(res);
results[video] = res;
return results;
});
});
let values = Object.values(results);
return values;
}
But I still keep getting an empty object when the function is called (I'm using devTools to call the function so nothing else should be interfering with it).
What I'm looking for, and what I can see in the console when I log it to the console, is an object that appears like so:
'video1': false,
'video2': false,
'video3': false,
'video4': true,
'video5': false,
...
Up to 12 videos.
Any ideas what I'm doing wrong here?
Try reading about promise handling. return results; returns a promise.

Trying to get a picker{} to show in SmartFace App Studio

I have been using the example code from SmartFace.io to work as follows:
pick(
myCars,
selectedIndex,
function(e) {Pages.NewPage.Label1.text = myCars[e.index]; selectedIndex = e.index; },
function() {},
function() {}
);
However the picker just doesn't want to show in the emulator. I have also tryied putting this code in a sepparate function and call it from a OnPress event of an ImageButton but still nothing.
I am trying this on an iPhone 4S so maybe that is the issue...
Any hint on what I am doing incorrectly would be greatly appreciated.
Thanks
Gerry
I just add a TextButton and Label to Page1 and write these codeLines. and it works; Maybe, some other codes breaks the functions.
var myCars = ["Audi", "Volvo", "Volkswagon"];
var selectedIndex = 0;
/**
* Creates action(s) that are run when the user press the key of the devices.
* #param {KeyCodeEventArguments} e Uses to for key code argument. It returns e.keyCode parameter.
* #this SMF.UI.Page
*/
function Page1_Self_OnKeyPress(e) {
if (e.keyCode === 4) {
Application.exit();
}
}
/**
* Creates action(s) that are run when the page is appeared
* #param {EventArguments} e Returns some attributes about the specified functions
* #this SMF.UI.Page
*/
function Page1_Self_OnShow() {
//Comment following block for removing navigationbar/actionbar sample
//Copy this code block to every page onShow
header.init(this);
header.setTitle("Page1");
header.setRightItem("RItem");
header.setLeftItem();
/**/
}
/**
* Creates action(s) that are run when the object is pressed from device's screen.
* #param {EventArguments} e Returns some attributes about the specified functions
* #this SMF.UI.TextButton
*/
function Page1_TextButton1_OnPressed(e){
pick(
myCars,
selectedIndex,
function(e) {Pages.NewPage.Label1.text = myCars[e.index]; selectedIndex = e.index; },
function() {},
function() {}
);
}

Full-featured autocomplete widget for Dojo

As of now (Dojo 1.9.2) I haven't been able to find a Dojo autocomplete widget that would satisfy all of the following (typical) requirements:
Only executes a query to the server when a predefined number of characters have been entered (without this, big datasets should not be queried)
Does not require a full REST service on the server, only a URL which can be parametrized with a search term and simply returns JSON objects containing an ID and a label to display (so the data-query to the database can be limited just to the required data fields, not loading full data-entities and use only one field thereafter)
Has a configurable time-delay between the key-releases and the start of the server-query (without this excessive number of queries are fired against the server)
Capable of recognizing when there is no need for a new server-query (since the previously executed query is more generic than the current one would be).
Dropdown-stlye (has GUI elements indicating that this is a selector field)
I have created a draft solution (see below), please advise if you have a simpler, better solution to the above requirements with Dojo > 1.9.
The AutoComplete widget as a Dojo AMD module (placed into /gefc/dijit/AutoComplete.js according to AMD rules):
//
// AutoComplete style widget which works together with an ItemFileReadStore
//
// It will re-query the server whenever necessary.
//
define([
"dojo/_base/declare",
"dijit/form/FilteringSelect"
],
function(declare, _FilteringSelect) {
return declare(
[_FilteringSelect], {
// minimum number of input characters to trigger search
minKeyCount: 2,
// the term for which we have queried the server for the last time
lastServerQueryTerm: null,
// The query URL which will be set on the store when a server query
// is needed
queryURL: null,
//------------------------------------------------------------------------
postCreate: function() {
this.inherited(arguments);
// Setting defaults
if (this.searchDelay == null)
this.searchDelay = 500;
if (this.searchAttr == null)
this.searchAttr = "label";
if (this.autoComplete == null)
this.autoComplete = true;
if (this.minKeyCount == null)
this.minKeyCount = 2;
},
escapeRegExp: function (str) {
return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
},
replaceAll: function (find, replace, str) {
return str.replace(new RegExp(this.escapeRegExp(find), 'g'), replace);
},
startsWith: function (longStr, shortStr) {
return (longStr.match("^" + shortStr) == shortStr)
},
// override search method, count the input length
_startSearch: function (/*String*/ key) {
// If there is not enough text entered, we won't start querying
if (!key || key.length < this.minKeyCount) {
this.closeDropDown();
return;
}
// Deciding if the server needs to be queried
var serverQueryNeeded = false;
if (this.lastServerQueryTerm == null)
serverQueryNeeded = true;
else if (!this.startsWith(key, this.lastServerQueryTerm)) {
// the key does not start with the server queryterm
serverQueryNeeded = true;
}
if (serverQueryNeeded) {
// Creating a query url templated with the autocomplete term
var url = this.replaceAll('${autoCompleteTerm}', key, this.queryURL);
this.store.url = url
// We need to close the store in order to allow the FilteringSelect
// to re-open it with the new query term
this.store.close();
this.lastServerQueryTerm = key;
}
// Calling the super start search
this.inherited(arguments);
}
}
);
});
Notes:
I included some string functions to make it standalone, these should go to their proper places in your JS library.
The JavaScript embedded into the page which uses teh AutoComplete widget:
require([
"dojo/ready",
"dojo/data/ItemFileReadStore",
"gefc/dijit/AutoComplete",
"dojo/parser"
],
function(ready, ItemFileReadStore, AutoComplete) {
ready(function() {
// The initially displayed data (current value, possibly null)
// This makes it possible that the widget does not fire a query against
// the server immediately after initialization for getting a label for
// its current value
var dt = null;
<g:if test="${tenantInstance.technicalContact != null}">
dt = {identifier:"id", items:[
{id: "${tenantInstance.technicalContact.id}",
label:"${tenantInstance.technicalContact.name}"
}
]};
</g:if>
// If there is no current value, this will have no data
var partnerStore = new ItemFileReadStore(
{ data: dt,
urlPreventCache: true,
clearOnClose: true
}
);
var partnerSelect = new AutoComplete({
id: "technicalContactAC",
name: "technicalContact.id",
value: "${tenantInstance?.technicalContact?.id}",
displayValue: "${tenantInstance?.technicalContact?.name}",
queryURL: '<g:createLink controller="partner"
action="listForAutoComplete"
absolute="true"/>?term=\$\{autoCompleteTerm\}',
store: partnerStore,
searchAttr: "label",
autoComplete: true
},
"technicalContactAC"
);
})
})
Notes:
This is not standalone JavaScript, but generated with Grails on the server side, thus you see <g:if... and other server-side markup in the code). Replace those sections with your own markup.
<g:createLink will result in something like this after server-side page generation: /Limes/partner/listForAutoComplete?term=${autoCompleteTerm}
As of dojo 1.9, I would start by recommending that you replace your ItemFileReadStore by a store from the dojo/store package.
Then, I think dijit/form/FilteringSelect already has the features you need.
Given your requirement to avoid a server round-trip at the initial page startup, I would setup 2 different stores :
a dojo/store/Memory that would handle your initial data.
a dojo/store/JsonRest that queries your controller on subsequent requests.
Then, to avoid querying the server at each keystroke, set the FilteringSelect's intermediateChanges property to false, and implement your logic in the onChange extension point.
For the requirement of triggering the server call after a delay, implement that in the onChange as well. In the following example I did a simple setTimeout, but you should consider writing a better debounce method. See this blog post and the utility functions of dgrid.
I would do this in your GSP page :
require(["dojo/store/Memory", "dojo/store/JsonRest", "dijit/form/FilteringSelect", "dojo/_base/lang"],
function(Memory, JsonRest, FilteringSelect, lang) {
var initialPartnerStore = undefined;
<g:if test="${tenantInstance.technicalContact != null}">
dt = {identifier:"id", items:[
{id: "${tenantInstance.technicalContact.id}",
label:"${tenantInstance.technicalContact.name}"
}
]};
initialPartnerStore = new Memory({
data : dt
});
</g:if>
var partnerStore = new JsonRest({
target : '<g:createLink controller="partner" action="listForAutoComplete" absolute="true"/>',
});
var queryDelay = 500;
var select = new FilteringSelect({
id: "technicalContactAC",
name: "technicalContact.id",
value: "${tenantInstance?.technicalContact?.id}",
displayValue: "${tenantInstance?.technicalContact?.name}",
store: initialPartnerStore ? initialPartnerStore : partnerStore,
query : { term : ${autoCompleteTerm} },
searchAttr: "label",
autoComplete: true,
intermediateChanges : false,
onChange : function(newValue) {
// Change to the JsonRest store to query the server
if (this.store !== partnerStore) {
this.set("store", partnerStore);
}
// Only query after your desired delay
setTimeout(lang.hitch(this, function(){
this.set('query', { term : newValue }
}), queryDelay);
}
}).startup();
});
This code is untested, but you get the idea...

Dynamic publishing swfobject external interface callback method undefined

Could some genius help on this issue to sort it out!!! It will be much appreciated
Actually I have flash music player loaded by means of config file named config.xml
Flash player Action script example
**myUltimateMp3Player.loadConfig("config.xml");**
import flash.external.ExternalInterface;
stop();
// ExternalInterface receive
if (ExternalInterface.available) {
ExternalInterface.addCallback("sendTextFromHtml", null, function(val:String):Void {
myUltimateMp3Player.loadConfig(val); });
}
I'm tried to embed the flash dynamically using Swf object,so when a click event handled from a list from html, the corresponding config.xml should be loaded on the flash player.
Sample HTML code:
$( document ).on( "click", "#Musiclist li", function() {
var c = "youtube-playlist";
$("#media-" + c).remove();
createMedia(c);
var id=this.id;
var idxml=id+".xml";
var swfPanel="media-" + c;
var flashvars = {};
var params = {};
params.swliveconnect = "true";
params.allowfullscreen = "true";
params.allowscriptaccess = "always";
var attributes = {};
attributes.id = "flashobj";
attributes.name = "flashobj";
swfobject.embedSWF("source.swf", "flashcontent", "100%", "100%", "9.0.0", "swf/expressInstall.swf", flashvars, params, attributes,callbackFn);
});
callback function
//This function is invoked by SWFObject once the <object> has been created
var callbackFn = function (e){
//Only execute if SWFObject embed was successful
if(!e.success || !e.ref){ return false; }
swfLoadEvent(function(){
var obj=e.ref;
obj.sendTextFromHtml("config.xml");
alert("The SWF has finished loading!");
});
};
Function to hold timer for SWF's PercentLoaded value and waits until it hits "100"
function swfLoadEvent(fn){
//Ensure fn is a valid function
if(typeof fn !== "function"){ return false; }
//This timeout ensures we don't try to access PercentLoaded too soon
var initialTimeout = setTimeout(function (){
//Ensure Flash Player's PercentLoaded method is available and returns a value
if(typeof e.ref.PercentLoaded !== "undefined" && e.ref.PercentLoaded()){
//Set up a timer to periodically check value of PercentLoaded
var loadCheckInterval = setInterval(function (){
//Once value == 100 (fully loaded) we can do whatever we want
if(e.ref.PercentLoaded() === 100){
//Execute function
fn();
//Clear timer
clearInterval(loadCheckInterval);
}
}, 1500);
}
}, 200);}
So I cant figure it out what I'm doing wrong,
The error getting was,
Uncaught ReferenceError: e is not defined
If I'm not using the swfLoadEvent Timer,
The error getting was,
Uncaught TypeError: Object # has no method 'sendTextFromHtml'
e is not a global variable. try modifying your swfLoadEvent function to pass a reference to the swf as an argument:
function swfLoadEvent(swf, fn){
swf.sendTextFromHtml("config.xml");
...
}
which then gets invoked as
swfLoadEvent(e.ref, function(){
...
});

Flex AsyncToken implementation on Rails

i'm using a Rails backend with my App and getting a AsyncToken returned from it (a DB-Call to be specific)
As far as i know the AsyncToken returns a result event when done loading all data from the request, this way its possible to make sure all data was loaded before executing some function which uses the data.
i tried the following implementation to get the AsyncToken converted into an Array and plotting its objects as strings to the user:
var dataSrv:services.databaseservice.DatabaseService = new services.databaseservice.DatabaseService;
dataSrv.addEventListener(ResultEvent.RESULT, dbListener);
//DBOPERATION returns my AsyncToken
var listData:AsyncToken = dataSrv.DBOPERATION;
var responder:AsyncResponder = new AsyncResponder( resultHandler, faultHandler );
listData.addResponder(responder);
public function resultHandler(event:ResultEvent, token:Object=null):void{
var output: Array = (event.result as Array);
for (var i:int = 0; i<output.length; i++){
Alert.show( output[i].toString() );
}
}
public function faultHandler(event:FaultEvent, token:Object=null):void{
Alert.show( "FAULT: " + event.fault.message );
}
But i keep getting a "null object-pointer" error!
Ok here how it works:
var output:ArrayCollection = (event.result as ArrayCollection);
for (var i:int = 0; i<output.length; i++)
{
// where VARIABLE is the name of the transmitted data-variable
Alert.show(output[i].VARIABLE);
}
hope this helps others. Thx for Help Guys, stackoverflow is just awesome!
You could add a breakpoint on the following line
var output: Array = (event.result as Array);
Then go to the Flash Debug perspective, in the "Variables" pane you should be able to access the properties of the event and see the content of the result property.
If the result property is null, you may want to double check what is returned from Rails

Resources