"bwrap" is undefined - javascript

I have a class extending the old Ext.Panel class. I'm now trying to migrate my application with help of the migration guide provided by sencha. I'm using a modification of the ext3 "Portal"-Example.
When trying to load my application i get some "deprecated" and "breaking" errors with a good explaination. But there is one error, i can't fix. It says "portal.bwrap is undefined" as mentioned above, "portal" is a subclass of Ext.Panel. In ext3 there was a property "bwrap" in the new ext there is not. And it is not documented neither in the compatibility layer nor in the migration guide how to fix this in ext4.
Here are the two places where bwrap is used:
constructor : function(portal, cfg){
this.portal = portal;
Ext.dd.ScrollManager.register(portal.body);
Ext.ux.Portal.DropZone.superclass.constructor.call(this, portal.bwrap.dom, cfg);
portal.body.ddScrollConfig = this.ddScrollConfig;
},
[...]
getGrid : function(){
var box = this.portal.bwrap.getBox();
box.columnX = [];
this.portal.items.each(function(c){
box.columnX.push({x: c.el.getX(), w: c.el.getWidth()});
});
return box;
},
Any suggestions?

bwrap was a div that wrapped that panel body. It no longer exists. Without seeing the code I can't say what you should do, but chances are you should either refer to the main panel element or the body itself.
FYI the portal example is already ported to 4.

Related

Custom Unobtrusive Validation Method Not Firing as Per Documentation

I've been attempting to implement a ASP.NET MVC custom validation method. Tutorials I've used such as codeproject explain that you add data-val-customname to the element. Then jQuery.validate.unobtrusive.js then uses the third segment of the attribute
data-val-<customname>
as the name of the rule, as shown below.
$.validator.addMethod('customname', function(value, element, param) {
//... return true or false
});
However I just can't get the customname method to fire. By playing around I have been able to get the below code to work, but according to all the sources I've read Unobtrusive validation should not work like this.
$.validator.addMethod('data-val-customname', function(value, element, param) {
//... return true or false
});
I've posted an example of both methods
jsfiddle example
Any help would be much appreciated
I've updated my question hopefully to make clearer.
I have finally found got there in the end, but still feels like too much hard work and therefore I've probably got something wrong. Initial I was scuppered by a bug in Chrome Canary 62 which refused to allow the adding of a custom method.
My next issue was having to load jQuery, jQuery.validate and jQuery.validate.unobtrusive in the markup and then isolate javascript implementation in a ES6 class. I didn't want to add my adaptors before $().ready() because of my class structure and loading of the app file independent of jQuery. So I had to force $.validator.unobtrusive.parse(document);.
Despite this I was still having issues and finally debugged the source code and found that an existing validator information that is attached to the form was not merging with the updated parsed rules, and essentially ignoring any new adaptors added.
My final work around and admit feels like I've done too much, was to destroy the initial validation information before my forced re-parse.
Here is the working jsfiddle demo
Here is some simplified code
onJQueryReady() {
let formValidator = $.data(document.querySelector('form'), "validator" );
formValidator.destroy();
$.validator.unobtrusive.adapters.add("telephone", [], function (options) {
options.rules['telephone'] = {};
options.messages['telephone'] = options.message;
});
$.validator.unobtrusive.parse(document);
$.validator.addMethod("telephone", this.handleValidateTelephoneNumber);
}

JavaScript error using paper-dropdown-menu

As of adding a paper-dropdown-menu to my Polymer web application I run into the following:
When clicking on the dropdown:
Uncaught TypeError
Polymer.Gestures.findOriginalTarget is not a function
after confirming, followed by:
Cannot set property 'right' of undefined
After confirming again the dropdown shows, albeit a bit out of shape.
What's the problem here ?
The findOriginalTarget does not seem to be set in your version of polymer. Polymer will probably be updated to support it. In the mean time, however, you can download new version of gestures that will add and replace this types of functions.
Download
https://raw.githubusercontent.com/Polymer/polymer/master/src/standard/gestures.html and put it in your polymer folder.
Open paper-dropdown-menu/paper-dropdown-menu.html and add < link rel="import" href="../polymer/gestures.html">
Alternatively, you can find _onTap line at paper-dropdown-menu/paper-dropdown-menu.html and replace function with:
_onTap: function(event) {
//if (Polymer.Gestures.findOriginalTarget(event) === this) {
// this.open();
//}
var targetElement = Polymer.dom(event).localTarget;
if(targetElement === this){
this.open();
}
},
This does work, but I did not test it with touch devices so I can't guarantee that (and I would appreciate feedback on this).
And lastly, if you don't care about _onTap event you could just set it to return false.

Game with AngularJS/Phaser.io and destroy method

I am making a game with a friend and we have some problems with AngularJS and Phaser.
So, we have a page named game, it has a template, a controller and a factory.
There is a page who "redirect" us to the game page (just with a link).
In the template :
<div id="game"></div>
Back
In the factory :
// function prealod and create ....
init: function(data) {
game = new Phaser.Game(width, height, Phaser.AUTO, 'game', { preload: preload, create: create });
},
destroy: function() {
game.destroy();
}
In the controller :
gameFact.init();
$scope.$on('$destroy', function() {
gameFact.destroy();
});
Of course, there are more code.
The problem is simple :
If i come to the game page, Phaser load very well the game (we just display a map with sprites).
After that, i click on the back button and reclick on the link to return to the game page.
If i do that 7 times, there is an error in the console :
Uncaught SyntaxError: Failed to construct 'AudioContext': number of hardware contexts reached maximum (6).
And after few seconds, i have this error :
Uncaught TypeError: Cannot read property 'gain' of undefined
I already search on the web, and the solution are :
Use an iFrame (I really don't think that iFrame is a good solution)
Use the destory method (it doesn't work)
Do you know how to solve this problem ?
If you have any ideas, don't hesitate. Even if you use another game framework (maybe it works the same way).
I had a similar issue, it seems that destroy() doesn't work correctly (issue discussed here) with the current version:
Could you please test out the dev branch, which has lots of fixes for this in.
I resolved the issue by using the dev branch (available here)
You need to use an Angular directive and using the navigation event to do that, check my example: http://market.ionic.io/plugins/ionphaser
Regards, Nicholls
There's a new WebComponent to integrate Phaser with any other Framework https://github.com/proyecto26/ion-phaser

Querying the DOM in Windows 8 Apps from within a method

I'm struggling with this even after reading the MSDN documentation and the following online guides:
Codefoster
Stephen Walter
I think my problem is easy to fix and that I just am thinking about something in the wrong way. Basically I am querying my web service and on success running the following method. I am then trying to bind the result to my listview. For now I am using a hardcoded value publicMembers.itemlistwhich has been declared at the top of the document just to make sure I can actually bind to the list before doing it with my query results. Ignore line 2 for now.
Success Method:
_lookUpSuccess: function xhrSucceed(Result) {
var response = JSON.parse(Result.responseText);
listView = document.querySelector("#termTest");
ui.setOptions(listView, {
itemDataSource: publicMembers.itemList,
itemTemplate: document.querySelector(".itemtemplate"),
})
},
Now, instead of using document.querySelector, I have also tried with WinJS.Utilities.id and WinJS.Utilities.query, neither of which worked either. This doesn't break my code and introduce an error but it doesn't bind to the listview either so I think I have an issue in querying the right DOM element. However exactly the same code does work if I add it to the top of the script, it is only when I place it in this method that it stops working.
EDIT: Also to clarify, when I debug publicMembers.itemList is storing the values I expect them to be.
Please point out if I have explained things poorly and I will try and improve my question.
Thanks.
I haven't used WinJS.UI.setOptions, but rather this other way of setting the data source. Can you see if it works?
_lookUpSuccess: function xhrSucceed(result) {
var response = JSON.parse(result.responseText);
listView = document.querySelector("#termTest");
listView.winControl.itemDataSource = publicMembers.itemList;
},
This would assume you're defining the itemTemplate as part of the data-win-options attribute of your ListView's HTML element. You could also probably just do listView.winControl.itemTemplate = document.querySelector(".itemtemplate") if you prefer to set it programmatically.

"Error calling method on NPObject!" in Uploadify

I'm using Uploadify to upload file in my CMS. Everything works fine until recently. I got an error
Error calling method on NPObject
on this line
document.getElementById(jQuery(this).attr('id') + 'Uploader').startFileUpload(ID, checkComplete);
on this part
uploadifyUpload:function(ID,checkComplete) {
jQuery(this).each(function() {
if (!checkComplete) checkComplete = false;
document.getElementById(jQuery(this).attr('id') + 'Uploader').startFileUpload(ID, checkComplete);
});
},
I don't know why and after a day debugging and testing I found that if I remove replace(/\&/g, '\\&') from
String.prototype.escAll = function(){
var s = this;
return s.replace(/\./g, '\\.').replace(/\?/g, '\\?').replace(/\&/g, '\\&');
};
It then works again. I really don't know why.
Any helps would be appreciated!
I think the reason is in additional Javascript libraries you use.
Some libraries (for example Prototype.js or jQuery.js) change behaviour of your code. For example, you can't overload prototype in some cases. The result may be undefined in clear (obvious) places (like you use an array variable with wrong index). You should view the source code of additional libraries, probably they do with prototype something that breaks your code in the function you mentioned.
In my practice I had the situation when overloading of prototype worked incorrectly (it was String prototype like in your case).
So just don't use prototype.

Categories

Resources