How to dynamically add and remove elements at same time in iScroll4? - javascript

I have been using iScroll4 for my work from quiet a time
Though I am facing an issue using it for a case where along with dynamic addition of elements at one end I also need to remove elements from other end. As in my work I might have to add a lot of data (which holds images) dynamically but I want to maintain same number of child elements in order to manage the memory/performance issue.
It would of great help if any one can suggest me any approach to do it.

You need to add or delete the elements from particular container using jquery.
And while adding and deleting the contents, you need to refresh the iScroll.
Say for example you create an iscroll as,
var myScroll = new iScroll('scrollwrapper', { });
Then after ever addition or deletion of scrollwrapper contents, refresh the iScroll, so as to work it properly.
myScroll.refresh();

Related

Best way to cycle through pages of data in multiple tables?

I'm aggregating network data from all our Cisco switch ports, plus other stuff from other databases, and am outputting into an HTML file that renders strikingly like this (except I'm an idiot and just realized I drew "tbody" everywhere instead of "thead"):
I'm only displaying 10 rows of data for now in each table (which they are HTML tables with tbody, thead, and tfoot tags assigned; No PHP, Javascript, etc. at all yet, just pure HTML) to keep everything neat and similar (some switches have 48 ports, some 24, etc.). I'd like to use those "Prev, 1, 2, [...], Next" buttons to cycle through the data of each switch, preferably without the page refreshing.
What I've used in the past is this setup:
Give each possible data set to show up its own "div" id
Make their "style.display" attribute = 'none' (except the first page)
Have a Javascript function that puts these divs in an array
The function can hide and show divs and will show only the div I pass
as an argument
Tie this function to an HTML button's onClick event
Is this the best way to go? Since I'm creating this HTML dynamically (I'm outputting text from a C++ program to index.html like a boss), it would mean an issue of assigning div ID's to many different sections, and even then could I create the function to update only the div that the button's parent is in?
I'm thinking this is possible and certainly time-consuming, but I'm not a great web programmer. If there is a better way out there, I'd like to hear it before I proceed to spend too much time on this.
If you don't mind an additional library, datatables would make paging easy (and, as you mentioned, just pre-populate then let JS do the work).
The downside is it's an included library (which means either directly including it in the HTML within a <script> or find a CDN reference to it). The upside is that the paging is built-in and all you have to worry about is getting the data in there. Then, with a few quick config options, and optionally some .CSS changes, you have the desired result.
You can use event delegation to set only a few event handlers:
var footers = document.getElementsByTagName('tfoot');
for(var i=0; i<footers.length; i++) {
footers[i].onclick = function(e) {
console.log(e.target); // the clicked element within the footer
}
}
This will create a single click handler for each table footer, and you can detect which button was clicked by looking at the event object's target property (or srcElement on oldIE). Then you can traverse the DOM relative to that element, using standard properties like parentElement (see MDN for reference).

jqgrid attaching data to a Cell

I've been using the jgrid for a couple of weeks and I love it.
We are using SignalR to provide updates to the grid, when a update comes in we highlight a cell on the grid and that highlight will fade after a user configured time.
currently to do this - we use data- attributes and every 3 seconds process all the elements with the attribute and decide on what class to apply.
the problem with this approach is that every time a client side event happens (sorting, paging, grouping, filter) these data- attributes are lost.
to combat that we have been using arrays to manage this but its got very messy and is just a nightmare already to maintain!
So what Id like to know is - is there a better way to attach data to a cell.. possibly at the array level? for example, id like to be able to just set a property on the cell in the data object and then just process that rather than maintaining lots of lists!
ok so long story short! is it possible to attach additional information a cell? so it can then be processed when the page is loaded..
Additional information
Setting the actual cell value isnt a problem, its attaching additional information to the cell which we need to do - currently we add a last updated data- attribute to the cell and this lets us decide on how to display that cell in the grid (it can changed based on multiple threshold that are defined by the user)
I have used the jquery.data() but sadly that was destroyed when the element was removed from the dom.
I could just use a single array but im hoping for a better solution!
Answer
Decided to use $(grid).jqGrid('getLocalRow', id)["field"] = value; this was persisted for the life of the grid and allowed me to query they property ongridloadcompleted!
cheers.
ste.
If you need just update some existing data in the grid you can use setCell method for example which allows your to specify new data, class or other attributes on the cell (see the answer which discusses the options). Disadvantage of the approach will be reflow of the page after every modification of the cell. Nevertheless if you have not so much modifications it could be more effective as one modification of the whole grid body. If you would provide small SignalR demo which demonstrate the problem I could try to provide you more optimization advises.

is it possible to view one html element twice on the same page, or must I create a duplicate?

I am creating a site that allows viewing and editing the contents of the 'src-div' contents within the 'edit-div.' I am not editing the src-div directly, because its thumbnailed using css zoom property.
I have considered using knockout.js to bind both elements to an observable. Currently, I have implemented the feature with jquery .html() function: simply set edit-div innerhtml to src-div innerhtml on 'select', and reverse the process after changes are made to edit-div to update the src-div.
I am wondering if I really need 2 divs here, or if there is some way to actually view the same element twice on a page, and any changes made will automatically reflect in both 'views,' elimiating the need to copy innerhtml property back and forth between two elements.
essentially, this is like a mirror effect, without the flip.
the closest thing I found so far is:
http://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Reflections/Reflections.html
Any recommended practices for performing this task are appreciated.
(Almost) everything you see on a page has a counterpart in the DOM. Everything in the DOM gets exactly rendered one time (apart from pseudo-classes). And every node in the DOM can only have one parent (no exclusions).
Unfortunately you'll have to clone the specific node and add changes to both, as there is no copy & translate mechanism in the current CSS documentation.
If you're using jquery you can use one div and "clone" it. You can read this for more information.
http://api.jquery.com/clone/
If you set the class of the div to the same thing, you can have changes propagated to both. Then you can apply .addClass to the second div to apply a "reflected" affect (if that's your final goal).

How to correctly remove generated HTML with Sencha Touch

It seems I am running into issues with the Sencha Touch 2 caching mechanism.
The issue occurs when adding/ removing html dynamically with setHtml method of e.g. a panel. The html that gets inserted is either a full html table or table rows with cells. The problem occurs when using the Ext.get method, which introduces an Ext-element-xyz id on the element that have been read by code.
When removing this element, adding new html, and trying to re-read the information, the cache points to the old element.
I tried to iterate all rows and cells and remove it via destroy method, still no luck. Actually it looks like the references between elements are still cached while the ids have been removed from cache.
Has anybody a hint for me?
Thanks.
in case anybody runs into that issue.
I used Ext.get for retrieving elements from dom. It creates an id for every element that I touched and adds that to the cache. All of these elements must be destroyed explicitely clearing the cache. This is certainly not what I intended, so Ext.fly does solve the issue.
hiro

backbone.js - How are models/views linked to DOM element?

I'm just playing around with backbone.js and some jQuery magic to prepare for some upcoming projects.
One test case contains a table whose rows are rendered by a backbone view. They get perfectly re-rendered on value change. Afterwards the whole table is sorted by an jQuery plugin (Animated Table Sort), rows move to new positions. In fact, this process works once, but the next time, rows appear twice, everything ends up in chaos.
Is it possible, that the link between DOM element and backbone view can't handle such an change? Are there any workarounds?
When you're developing with a Model/View framework like backbone.js or knockout.js, I find that you need to re-arrange your thinking and implementations to make changes to what is diplayed (like sorting) to the Model, and not allow them to happen in the view (like using a jquery plugin).
If you do end up using a view-side script to do something fancy (animations are a good example), then it is up to you to make sure the model is updated correctly, either by disabling or extending the binding.
Also note that according to the documentation, that animated sort plugin removes your table rows from the DOM, adds them to new DIVs, animates them, removes them from the DIVs, and restores them to the table. I'm wondering if after this is all done, backbone has lost track of those TDs, and when it re-renders after the change, it's just adding a new set since the last set is 'gone'.
Thanks for your answers. Indeed, the table sorter does a lot that makes it difficult fpr backbone to maintain bindings. I've switched over to the great Quicksand plugin which uses a hidden list to animate changes in another (visible) list. Fits better to backbone.js.
Your collection maintains an order for your models, and therefor your corresponding views. If an outside force (like a jQuery table sorting plugin) modifies the order of the views, this change is not inherently reflected in the Backbone collection, so things are quickly out of sync.
Also, if the table sorter clones elements and removes the original, Backbone would likely lose track of the views and end up recreating them.

Categories