I do not want to use a table view. The above code works fine with iOS but crashes on Android.
var rowViewList = [];
for (var i = 0; i < data.length; i++) {
rowViewList.push(Alloy.createController("untilNextTime/minifigureTradingRow", {
data : data[i]
}).getView());
}
$.parentFrameTrade.add(rowViewList); // This is the line where android crashes.parentFrameTrade is a normal view.
As documented the add() method only accepts a single view. You are right it works on iOS and we might make this official and have parity but not atm.
Related
I’m not sure just how much detail I can provide or how much is necessary here, but-
I’m trying to upgrade an application from Kendo UI v2015.1.429 to v2019.1.220. However, it is failing when I try to bind a particular viewmodel to an element, throwing Uncaught TypeError: Cannot read property 'length' of undefined.
I’ve managed to track what I believe is the cause of this bug to the inferSelect function, in the code below. However, as far as I can tell, everything involved is or should be defined and this error should not be happening. It's working perfectly fine for a viewmodel on another page, and it works if I remove one specific element that I'm trying to bind the viewmodel to, but I can't find any reason for that element to fail.
What further information should I provide/investigate to fix this?
function inferSelect(select, fields) {
select = $(select)[0];
var options = select.options;
var firstField = fields[0];
var secondField = fields[1];
var data = [];
var idx, length;
var optgroup;
var option;
var record;
var value;
for (idx = 0, length = options.length; idx < length; idx++) {
--> record = {}; //The error is thrown on this line
...........
PROBLEM SOLVED. I was trying to bind a multiselect widget to an <input> rather than to an actual <select>. Thanks Kendo for giving such an informative error message.
I'm a newcomer to NativeScript. I was playing around to replicate a common UI pattern used by weather apps. I achieved a similar look working fine on the emulator (I've tested on Android versions 4.4, 6 and 9 and all works fine) but it doesn't work as I expected on physical devices ( Bottom pane doesn't scroll, tested on 3 different devices with Android versions 4.4, 6 and 7). I've created a playground project. My question is why am I getting different behaviours for the bottom scollview between emulators and physical devices?
Android Emulators may not give the accuracy in some cases, after all you are not really dealing with a real touch interface there.
Also Android has an extended version of ScrollView just to support nested scrolls, you will have to extend the NativeScript ScrollView to use androidx.core.widget.NestedScrollView
var __extends = this.__extends || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
__.prototype = b.prototype;
d.prototype = new __();
};
var scrollView = require("tns-core-modules/ui/scroll-view");
var NestedScrollView = (function (_super) {
__extends(NestedScrollView, _super);
function NestedScrollView() {
_super.call(this);
}
NestedScrollView.prototype.createNativeView = function () {
if (typeof android !== void 0) {
return new androidx.core.widget.NestedScrollView(this._context);
}
return _super.prototype.createNativeView.call(this);
};
return NestedScrollView;
})(scrollView.ScrollView);
exports.NestedScrollView = NestedScrollView;
Updated Playground
I could use a little more info, but this might be due to the nature of ScrollView.
If the screen is large enough to display all of the content declared inside of the ScrollView tags, then it will not be scroll-able.
Is that the issue you are experiencing?
Hope this helps!
i'm working with squarespace developer mode, i create some javascript code to get my blog articles or events, the problem i have is that when i use ajax call to get my events to display them in a page i've created, the data is loaded correctly except blocks having audios and videos, i had the same issue with images, but SQS gives a solution for images :
var images = document.querySelectorAll('img[data-src]' );
for (var i = 0; i < images.length; i++) {
ImageLoader.load(images[i], {load: true});
}
But this do not solve the audio and videos blocks, i've tested every single code part existing on SQS forums but none of them work, ive also tested what suggested here but no solution.
Here is my code to get events:
$(document).ready(function(){
var url = '/test-blog?format=json';
$.getJSON(url).done(function(data) {
var items = data.items;
var $_container = $('#events-container-concert');
var result = "";
var appendText = [];
items.forEach(function(elm) {
var body = elm.body;
var $_body = $(body);
appendText.push("<div class='blog-item'><div id='body'>"+body+"</div>");
});
appendText.join(" ");
$_container.html(appendText);
var images = document.querySelectorAll('img[data-src]' );
for (var i = 0; i < images.length; i++) {
ImageLoader.load(images[i], {load: true});
}
});
});
Please is there anyone who had this issue on SQS?
no one answered my question on SQS forums
Thanks
You may use this to automatically load all the blocks (I believe even the image blocks, but if not then pair it with your call to ImageLoader):
window.Squarespace.AFTER_BODY_LOADED = false;
window.Squarespace.afterBodyLoad();
Of course, you'll want to wait until the content is on the page. You can pull up the page you linked-to and then run those two lines via console as a quick test. Worked well for me in that context.
Reference: https://github.com/Squarespace/squarespace-core/blob/master/src/Lifecycle.js
Well, I've been reading the documentation and I believe that I'm calling functions and passing parameters correctly, but for the life of me I can't get this simple UI code to work.
I'm generating a UI for a Spreadsheet using the following code:
function checkOut() {
var app = buildUI();
var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
spreadsheet.show(app);
}
function buildUI() {
var gui = UiApp.createApplication();
gui.setTitle("Check-Out/Check-In");
gui.setStyleAttribute("background", "lavender");
// Absolute panel for setting specific locations for elements
var panel = gui.createAbsolutePanel();
// Equipment ID#s Label
var equipmentIDLabel = gui.createLabel("Equipment ID#s");
equipmentIDLabel.setHorizontalAlignment(UiApp.HorizontalAlignment.CENTER);
equipmentIDLabel.setSize("20px", "125px");
equipmentIDLabel.setStyleAttributes({background: "SteelBlue", color: "white"});
// Add all components to panel
panel.add(equipmentIDLabel, 10, 0);
gui.add(panel);
return gui;
}
function getUIdata(eventInfo) {
// I know how to get the data from each element based on ID
}
It generates the Absolute Panel correctly when checkOut() is called, but the EquipmentIDLabel is never added to the panel. I am basing the code on the simplistic design I created in the GUI builder (that will be deprecated in a few days, which is why I am writing the code so that I can change it later):
So what exactly is going wrong here? If I can figure out how to add one element, I can infer the rest by looking at the docs. I've never been any good at GUI development!
You could maybe use grid as an interesting alternative... here is an example :
// define styles
var labelStyle = {background: "SteelBlue", color: "white",'textAlign':'center','line-height':'20px','vertical-align':'middle','font-family':"Arial, sans-serif",'fontSize':'10pt'};// define a common label style
var fieldStyle = {background: "white", color: "SteelBlue",'font-family':"Courrier, serif",'fontSize':'11pt'};// define a common label style
function checkOut() {
var app = buildUI();
var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
spreadsheet.show(app);
}
function buildUI() {
var gui = UiApp.createApplication();
gui.setTitle("Check-Out/Check-In");
gui.setStyleAttribute("background", "lavender");
var panel = gui.createAbsolutePanel().setStyleAttribute('padding','10px');
var grid = gui.createGrid(4,2).setWidth('300').setCellPadding(10);//define grid size in number of row & cols
var equipmentID = ['equipmentIDLabel','equipmentIDLabel1','equipmentIDLabel2','equipmentIDLabel3'];// define labels in an array of strings
for(var n=0 ;n<equipmentID.length ; n++){;// iterate
var equipmentIDLabel = gui.createLabel(equipmentID[n]).setWidth('125').setStyleAttributes(labelStyle);
var equipmentIDField = gui.createTextBox().setText('Enter value here').setName(equipmentID[n]).setSize("125", "20").setStyleAttributes(fieldStyle);
grid.setWidget(n,0,equipmentIDLabel).setWidget(n,1,equipmentIDField);
}
gui.add(panel.add(grid));
return gui;
}
It looks like the absolute panel offset method is a little capricious and take control of your positioning, in my tests I have been able to position panels that are visible in the following way:
panel.add(equipmentIDLabel);
panel.add(equipmentIDField,150,0);
panel.add(otherLabel);
panel.add(otherField, 150, 20);
Try it out with trial and error, you may get the UI you need, if not I would move to an alternate layout, verticalPanel is a little better behaved and of course you can use forms as well.
Another small bug is that you inverted the length and hight in equipmentIDLabel.setSize("20px", "125px");
Let me know if I can be of more assitance
The specific problem in your code is the following line :
// Add all components to panel
panel.add(equipmentIDLabel, 10, 0);
Simply change it to : panel.add(equipmentIDLabel);
..and you will see the field (at position 0,0).
As patt0 observes, you can then add OTHER components and use positioning. It seems to be a limitation of adding the first field to an absolutePanel.
Of course, the Google Script gui is now deprecated (since December 2014) but I was interested to try your code and see that it still basically executes (as at Feb 2016).
I have an HTML5 canvas which is displaying a number of images. I also have some simple HTML <p></p> tags on my page below the canvas.
I want to update the contents of the <p></p> tags when the cursor hovers over these images, and I found a quick tutorial at: http://www.quirksmode.org/js/newmouseover.html which seemed to suggest it could teach you how to do this.
I've followed the tutorial, however, when I view my page in the browser now, I get a console error that says
getElementByTagName is not a function
I've not seen this function before, and I'm just wondering if it is actually a pre-defined function, or if it's one that the writer of the tutorial has defined themselves...? I couldn't see anything on that page where the author has defined the function, so I thought it might be a pre-defined one, but I'm not sure. Does anyone know?
Edit
Ok, so correcting the typo fixed it, and the function is now being called. However, I'm currently calling it from my window.onload function, so as soon as the page loads, the paragraph has already been updated- it's not actually conditional on the onmouseover event being called.
My window.onload function looks like this:
window.onload = function () {
var sources = [];
sources[0] = document.getElementById("building").src,
sources[1] = document.getElementById("chair").src,
sources[2] = document.getElementById("drink").src,
sources[3] = document.getElementById("food").src,
/*There are roughly 30 lines like this adding images in the same way */
if (document.getElementById) {
var x = document.getElementById('mouseovers')
.getElementsByTagName('IMG');
} else if (document.all) {
var x = document.all['mouseovers'].all.tags('IMG');
} else {
return;
}
for (var i = 0; i < x.length; i++) {
console.log("for loop adding onmouseovers is being called");
x[i].onmouseover = displayAssetDescriptionTip();
}
loadImages(sources, drawImage);
drawGameElements();
drawDescriptionBoxes();
stage.add(imagesLayer);
};
I tried moving the if statements into a function called displayAssetDescriptionTip(), and this function now looks like this:
function displayAssetDescriptionTip() {
if (document.getElementById) {
var x = document.getElementById('mouseovers')
.getElementsByTagName('IMG');
} else if(document.all) {
var x = document.all['mouseovers'].all.tags('IMG');
}else {
return;
}
for (var i = 0; i < x.length; i++) {
console.log("for loop adding onmouseovers is being called");
x[i].onmouseover = displayAssetDescriptionTip();
}
document.getElementById('tipsParagraph').innerHTML = "Assets are items that"
+ " can be bought or sold for cash.";
console.log("displayAssetDescriptionTip being called");
}
However, the onmouseover event doesn't appear to be firing when I hover the cursor over the images to which it's been added- any ideas why this is?
getElementByTagName is not a function.
getElementsByTagName is though :)
It's plural because it returns every element that matches the given tag.