I currently have an app that has five components. On the left I have a radio button field and a grid below it, on the right I have a display field, chart, and another grid [top to bottom]. The radio buttons filter every other component by a certain date, and the left grid [when selected] will filter the right components by the selected object.
Currently the app does what is needed, but when I select a few radio buttons in a row OR select a few objects in the grid, the app will eventually totally disappear. I tried running the app externally and internally with a custom HTML app, but the problem does not go away.
Here is a picture of the app before anything crashes:
Interestingly, when I look through the chrome debugger and look at the Elements tab, I see there are lots of masks that have been created and not destroyed. Here is a picture of a slight piece of the HTML that looks fishy and occurs after I select a few objects from the left grid:
Every time I select a new object, one more mask will be added to the DOM. I don't know if this is what breaks my app, but it seems odd so it may be related?
I didn't include any code because I thought it should be some easy fix - plus, the code does exactly what it should [before it disappears]. Any help on how to fix an app that disappears would be great!
In itself a mask sticking around to be reused after data loaded successfully is not an indication of a problem. I see mask being created and not destroyed in a simpler app:
Perhaps what you experience is an issue of timing when elements load asynchronously.
Related
I have a map with a slider that controls the display of some points as you move the slider left and right (from year 1 to year 10).
I have some of these points filtered based on another parameter that is tied to 4 individual buttons.
When I slide the slider, and then click on one of the buttons, the text that tells you how many points are on the map doesnt update. It only updates after you move the slider (again, not when you click the button).
I want to ensure that as soon as one clicks the button, not only does the map update, but the text also updates.
Ive tried a variety of options, but none seem to work. I am not entirely sure where to look here.
The easiest way to see the issue is by following the link, i have everything hosted on bl.ocks.
https://next.plnkr.co/plunk/Ov8dHR7jI09aTFSU
(the plnkr needs to be refreshed for the data to start loading)
no error messages
A dirty and easy fix is to just replace filterData() call inside the buttonClick with what you do in slider callback -- document.getElementById("slidertext").innerHTML = "Achieved Goals: " + filterData() + " ";, really confusing you didn't come up with it. Probably should be refactored into a separate method to avoid repetition.
I am new to NativeScript and Javascript development in general. My background is Android.
Background:
As a test I try to replicate one of my old apps with NativeScript and have encountered a problem:
I use a RadListView with multiple templates. The correct template is chosen at runtime. The templateSelector uses a boolean variable to determine the correct one. (Imagine tapping a ListView item. When you do it expands and shows 2 buttons. You tap it again -> the buttons disappear.)
Now that works just fine.
Problem
My problem is that I cannot figure out how to animate the template switch. The new content just appears/disappear instantanously.
What I managed so far
I managed to animate the buttons when their template has just been chosen. I set their opacity to 0 and animated it to 1. Problem is: The necessery height for the buttons is reserved as soon as the template is chosen.
Question
Is this at all possible? If so how?
Sources
Expandable ListView items by manojdcoder:
https://discourse.nativescript.org/t/expand-element-radlistview/4268/3
There are few built-in animations you could find in the docs and working examples in Github.
I was just wondering If I could get some thoughts and feedback on my todo app to see where I could improve. Also, one current issue I'm having the is with the checkbox.
I'm using the materialize framework to help create the UI but I can't get the materialized styled checkbox to function properly. My way around that was to place the standard checkbox over the materialized styled one with the help of positioning and Z-index, with the opacity at 0.
So the checkbox can still function while the materialized checkbox displays. The issue with that is that If I input to many characters for the task the standard checkbox moves.
Link to todo-app()
I have an issue that I can't seem to resolve. Even though my current job does not call for integration, I have been doing a bit of it for a specific project.
BACKGROUND:
Basically, this is what I am currently working on: when I click on my fake button, it creates a box - more clicks, means more boxes which are created. However, the boxes need to be able to do one more thing than simply replicate - each one of them needs to allow me to drag and drop an image into them. So, if I click 5 times on the fake button, the 5 new boxes needs to allow me to drag and drop 5 different images. Currently, I have a box there by default (as a testing ground).
PROBLEM:
I cannot seem to duplicate the boxes correctly. I have tried several things, including switching classes to id's and what not to try and merge several pieces of coding together. Ultimately, I need to be able to place any images in the draggable boxes. 5 boxes, 5 images dragged into them etc.
NOTE 1:
I cannot use server-side coding, as I don't have access to the server. All of it has to be client side.
NOTE 2:
The images I bring in are from outside folders - from the desktop (dragged and dropped).
NOTE 3:
I watered down the code in the fiddle to only have the pieces of coding relevant to what I am attempting to do. However, the scripts there don't work within the fiddle, since I had to take them out of the environment. Though, they do work within the correct environment.
FIDDLE:
[My link] https://jsfiddle.net/t9dq3w28/10/
...
I have a use case where there are thousands of items on a list shown to the user. They are loaded a small batch at a time and I see the network traffic going in and out, I see data getting loaded. I see the DOM getting bigger, but the list itself in the UI stops updating (Chrome).
When I examine it, I see thousands of items in the code, when I select the items through console and make it count them, I see the proper number. But in the page itself, I don't see these items get displayed. The list uses drag-and-drop to put items from it into another list (and load additional data about them).
Not using jquery.datatables at the moment, but been meaning to migrate to them a long time ago. I can’t find a good example, though, everything I see uses pagination to split, but what if this is not an option?
How can I pinpoint what it is that is preventing the items from display? The number of entries will vary between 500 and 20 000.
Never mind. everything works as intended, duh. I was stupid and missed something very obvious: things had "display: none" for a very good reason about which I totally forgot (has to do with the core logic of the application). Next time hit me with a stick so I could remember to pay more attention.
Not sure what you meant by saying 'DOM getting bigger' but 'don't see items get displayed'.
Typically JS has a main thread which will handle functions/callbacks as well as view-refresh. So if you operation is blocking , the view will not be refreshing.
As for the pagination is not an option thing, you can consider using DOM-lazy-Loading mechanism where you only put what should be in the current viewport into the dom. As user scroll, you calculate the scroll height dynamically to add/remove items to/from the DOM. One thing to remember is you typically need to define a fixed height for your rows so that you could do the calculation. This lazy-loading way is a common way of solving this type of problem and is widely used by different frameworks like GXT, angular-gird..etc.