In my cappuccino app, I am reading from an RoR backend via JSON and putting the results onto a list. When the app first loads everything is fine, but when I edit an item (and write the edit to the database) there is an error generated when the items list is refreshed.
The error is CPRangeException: -[_CPJavaScriptArray objectAtIndex:]: index (-1) beyond bounds (3).
I get this error even if I edit an item without making any actual changes. The JSON string received by the app remains exactly the same in this case, there are no items added or removed and therefore the array should not be written to out of bounds.
Here is my code:
- (void)connection:(CPRURLConnection)connection didReceiveData:(CPString)data
{
if(connection === listConnection)
{
var results = JSON.parse(data) ;
var posts = [Post initFromJSONObjects:results];
[postListView setContent:posts] ;
// My error occurs at the above line
[postListView setSelectionIndexes:[[CPIndexSet alloc] initWithIndex:0]] ;
}
}
I am not sure if it's an error with my code or if it's some kind of inconsistency with the cappuccino framework. Does anybody know what I can do to fix this?
The rest of the code can be found here
You should probably simply log what's in posts before setting it. CPLog.info('posts: ' + posts); should work, or console.log(posts). Next you can set a 'break on uncaught exception' debug point in Chrome or Safari to stop at the actual error you are seeing. Make sure you run your app using index-debug.html so that you get full method names. Then it should be an easy matter to look at the calling stack to see where things are going wrong. There's a lot of information on debugging a Cappuccino app here.
Related
just a brief question. I've been struggling to figure out what this error in javascript actually means: "Timed out retrying: expected null to deeply equal [Array (1)]
I'm basically working on a LocalStorage Shopping Cart and my code is actually based on this video: https://www.youtube.com/watch?v=uR3r3GJvQDY&t=417s
It's pretty much very identical. The code perfectly works on my system without any errors but as soon as I upload it to my university's server on which the code undergoes certain tests I receive the above-named error. It also doesn't really indicate in which line of the code the error is happening. My instructor only told me this usually happens when the cart should exist in the localStorage, however, it doesn't which means the localStorage returns NULL to the system.
For reference to the code please check: https://gist.github.com/prof3ssorSt3v3/3e15d06a8128d6ca7deaa831a7a1e52b
So, we basically create a cart called contents and we never remove empty the LocalStorage at any point in the code. How can the LocalStorage return null at some point then and cause the error?
For the init function I have this:
init(){
//check localStorage and initialize the contents of CART.contents
let _contents = localStorage.getItem(cart.KEY);
if(_contents){
cart.contents = JSON.parse(_contents);
}
else{
cart.contents = [];
cart.sync();
}
},
Thank you for your help in advance!
carousel.js:5 Uncaught TypeError: Cannot read property 'children' of null**
I got this error when I'm going to ad slider to the page.
here is the js code for the error.
const track = document.querySelector('.carousel_track');
const slides = Array.from(track.children);
const dotsNav = document.querySelector('.carousel_nav');
const dots = Array.from(dotsNav.children); //here
const slideWidth = slides[0].getBoundingClientRect().width;
slides[0].style.left = 0;
slides[1].style.left = slideWidth + 'px';
Can anyone give me a solution for this? I really appreciate your help.
Apparently the error throws here const dots = Array.from(dotsNav.children); //here , though the source of error is coming from previous line.
The error hints that the track is null, which can happen when the selector didn't return any value.
Without seeing your HTML code its not so clear whats the exact reason, but its obvious that the element with class carousel_nav doesn't exist in the DOM at the moment of execution of this code.
Steps to debug:
Do the console log after acquiring the track object.
const dots = document.querySelector('.carousel_nav');
console.log('Dots are: ', dots);
...
Then on the console of the browser check the value, its probably null.
Check if the class is written correctly on the HTML element, without typos and mistakes. You can even run the js directly on the browsers console to see if the code is actually fetching .carousel_nav
If when you run your js code in browser's console and it returns actual value instead of null, but on the page load it still returns null then it can mean the carousel is being initialized by 3rd party library after certain event, most probably document.ready, you have to as well listen to the document ready event and only after that execute your code.
Sometimes just waiting for the document ready is not enough, so check the documentation of the library that you use, it should have some callback where you can execute your code exactly after the carousel is being initialized.
Might be that the carouself library that you use, need an additional parameter to render dots, do you actually see the dots in the rendered dom?
If you need more hints, provide the library name youre using and also html
P.S.
Sorry I didn't see //here comment. But the debugging steps are the same
I have a classic asp project. In one of my pages i have to call a javascript function. That call does not have any problem and works fine on my test server (not localhost, just a server to test he project). But when i deploy it to the actual server, that function does not work. I call this function in onload event.
That function has this type of lines (i cannot write the whole code, because of the company that i work for, does not allow it)
document.getElementById("R6C2_1").style.display = 'block'
document.getElementById("R6C2_2").style.display = 'none'
....
When I try to debug it on IE10, i got "Unable to get property 'style' of undefined or null reference" error. After that, the elements in javascript function are not load. They are not seen on the page.
My main problem is, as i mentioned before differences between servers. I do not understand why it works on one server, but not on another server.
While it's not possible to determine the issue from this information alone, you should look into:
Whether the elements you're looking for actually exist when the code is invoked (use browser debug / breakpoints to look at the page the moment the code is invoked).
If they exist, check if they have the ID you expect (e.g R6C2_1) - if not, why? who creates these IDs? could be a server configuration issue.
Do a debug using the app from each server, and look at the page / DOM, see if there are differences or check if the code is invoked at different times.
These could lead you to pinpoint the issue. Good luck!
In case the elements just take time to be created, you can just wait until they are present:
function ExecuteWhenExists() {
var R6C2_1 = document.getElementById("R6C2_1");
var R6C2_2 = document.getElementById("R6C2_2");
if (R6C2_1 && R6C2_2) {
R6C2_1.style.display = 'block';
R6C2_2.style.display = 'none';
} else {
window.setTimeout(ExecuteWhenExists, 100);
}
}
ExecuteWhenExists();
This will not crash when the elements do not exist, and will just keep trying to execute in a non-blocking way (polling every 0.1 seconds) until they exist.
I found a way to inject information into the Firefox Web Console, catching and modifying the return value of createMessageNode, modifying the web-console output:
Oddly enough, the elements returned don't seem to have any possible way to link them back to the object they represent - yet when you click [object Array], it always pops up to the right. How is this connected?
As a side note, when I click upward on the breadcrumbs to see where it came from on the stack trace, some items aren't shown in the debugger. Is this a bug, or are some JS modules compiled so as to never show their contents here? Is this the correct place to add in an array to the console line instead of always saying [object Array] etc.?
Update You can see and run this code above in this branch: https://github.com/programmin1/DevTools-Tweaks/tree/webconsoleOutputBetter
by inject info do you mean Services.console.logStringMessage and stuff?
https://developer.mozilla.org/en-US/docs/Console_service
If you want to access the chrome of the web console do this:
var devtools = Cu.import("resource://gre/modules/devtools/Loader.jsm", {}).devtools;
var HUDService = devtools.require("devtools/webconsole/hudservice");
var hud = HUDService.getBrowserConsole();
var btnClear = hud.chromeWindow.document.querySelector('.webconsole-clear-console-button');
btnClear.addEventListener('mouseover', function() {
hud.jsterm.clearOutput(true);
}, false);
var fieldFilter = hud.chromeWindow.document.querySelector('.hud-filter-box');
fieldFilter.value = 'rawr'
this code access the crhome window, you can access all the text dumped there. this example above modies the filter value, and also makes the clear button clear the web console on mouseoever, just an example of how to access web console if thats what you're doing
I am pulling my hairs.
I have ZK grid then within the grid there's another grid.
Both are bound to separate view models.
Think about it as a social network wall.
Outer Grid is a ViewModel that render posts.
Then for each post an inner grid is used which is bound to another ViewModel to render comments.
Okay, the issue is "Failed to process setAttr Cannot call method 'set' of null (TypeError)"
HOW TO DEBUG THIS ERROR. No server side error at all. By the way code works fine but every now and then I start get this error.
I am using ZK 6.5.1.1 the latest version.
Note: I know without code it would harder to analyse the problem. But it's not too simple for me to post a portion of working or useful code snippet. So I would appreciate if someone knows how to debug this dreaded message. Also I see other type of similar messages: Failed to mount: cannot call replaceWidget of null etc etc.
Thanks
Regarding to debug this kind of issue, you can try something like below:
.1. Open the debug mode (see ref)
zk.xml
<zk>
<client-config>
<debug-js>true</debug-js>
</client-config>
<library-property>
<name>org.zkoss.web.classWebResource.cache</name>
<value>false</value>
</library-property>
</zk>
.2. Try reproduce this issue, here I create a sample to reproduce a similar issue by unbind a component manually as below (click 'test' button to see the similar error)
test.zul
<zk>
<textbox id="tbx" />
<button label="test">
<attribute name="onClick"><![CDATA[
String uuid = tbx.getUuid();
Clients.evalJavaScript("zk.Widget.$('$tbx').unbind();");
tbx.setValue("abc");
]]></attribute>
</button>
</zk>
.3. See the error message in chrome's developer tooles then click the source link:
.4. Left click on the first line under setAttr to add a breakpoint.
.5. Refersh page and click the 'test' button again, we can see the 'wgt' is null at right side, wgt usually denotes a widget (the Component at client side).
.6. Now what we know is a widget becomes null and then ZK executing setAttr command of it, to debug this, we can simply log every uuid and className while bind_ is called (bind_ is a function of widget's life cycle, basically instanciate all dom elements of a widget) by Client Side Programming, and log all widget again while button clicked.
e.g.,
test.zul (updated)
<zk>
<script><![CDATA[
var allUuids = [];
zk.afterLoad("zul", function () {
var _wgt = {};
// override zk.Widget,
// basically zk.Widget is the
// root of all widget classes
zk.override(zk.Widget.prototype, _wgt, {
bind_: function (a, b, c) {
// call original function
_wgt.bind_.apply(this, arguments);
// each widget has a uuid and className
allUuids.push({uuid: this.uuid, ele: this.className});
}
});
});
function showAllUuids () {
var info,
wgt;
for (var i = 0; i < allUuids.length; i++) {
info = allUuids[i];
// get widget by uuid
wgt = zk.Widget.$('#'+info.uuid);
// show the old className and current status
// you can also try record some more information as needed
// e.g., parent, previousSibling, sclass, etc
zk.log(info.uuid + ' was ' + info.ele + ' now ' + (wgt? wgt.className : wgt));
}
}
]]></script>
<textbox id="tbx" />
<button label="test">
<attribute name="onClick"><![CDATA[
String uuid = tbx.getUuid();
Clients.evalJavaScript("zk.Widget.$('$tbx').unbind();");
tbx.setValue("abc");
Clients.evalJavaScript("showAllUuids();");
]]></attribute>
</button>
</zk>
.7. Now we will get the log message below with the updated zul page after 'test' button clicked and let us know a textbox widget becoms null at client side, you can also check the response value in Network of chromes developer tooles.
Hope this helps
References :
ZK Client Side Programming
Open the debug mode
bind_ in zk.Widget
This particular error seems due to updating a component that is already detached/removed from ZK desktop. In other words, on server side you have a reference to a component that is cached but no longer attached to the component tree. When you try to update it ZK might try to sync its status with its corresponding Widget on client side. However since it was detached, it no longer exists in client side so calling a setAttr on a null widget gives you this error.
Although the best answer possible is already provided I wanted to add I was hitting this error and after debugging it turned out that there was a hflex="min" in a grid component. I changed this to hflex="1" and the error went away. This error started after updating zk version several versions at once so I'm not sure between which versions this change occurred but was a hard to identify. Hopefully simply searching your code base for hflex="min" might save someone some time... I would assume the same to be true for vertical flex.
It come when we are setting something to a already element which is already set previously..
like
OFCchart chart = new OFCchart;
chart.setJSONScript("somedata");
//----- Some other place setting to the same---
chart.setJSONScript("somedata");