Child Node attributes changes after store.put in IE8 only - javascript

I am using dojo 1.9.
Functionality:
I am populating data in observable dgrid store based on continuous polling call.
There is a functionality of expansion of row, in which some data( termed as child node) is appended to node created after of store.put().
We are creating this child node on click on "+" sign button used for expansion and store that in one global variable for JS.
eg. this.childNode[var1] = tempNode;
After every polling call we populate main row using store.put(mainRow).
Then we fetch mainNode =>mainNode = dom.byId(mainRow).
After fetching mainNode we append child node if that row is expanded. => mainNode.appendChild(this.childNode[var1]); where var1 is parameter.
In all browsers this functinality is working fine. Only in case of Internet Explorer 8 after store.put attributes of child Node like innerHTML/childnodes get blank which is breaking expansion in case of polling call.
Please let me know in case anyone has come across this issue. Also please suggest some solution/approach for this issue?

Seems like IE8 did not have native capability to handle the code. I have added http://modernizr.com/ JS library and got this to work.

Related

KnockoutJS: multiselect issue in Internet Explorer

I have a very simple case using a multiselect select element with KnockoutJS 3. If you use the selectedOptions binding with a multiselect element with IE (any version), the select element always bounces to the bottom-most selected element when selecting a new option. I've seen many articles that seem somewhat related to this and extremely outdated, but no definitive solution. Any help appreciated.
Simple example here:
http://jsfiddle.net/unp9j9dc/1
Reproduce by clicking Item 1, holding control, clicking item 20, then going back to item 2. UI will bounce back to item 20.
In addition, I should mention that while the JSFiddle is using knockout 3.0.0, I am using 3.2.0 locally with the same results. I'll be trying 3.3.0 shortly.
UPDATE: same results with Knockout 3.3.0 also.
I got it. I am using subscriptions and two way binding pretty extensively and all of that seems to still work properly.
Basically, the KO infrastructure just goes through and syncs up the UI with the updated model binding on a UI or model update. Thus, it is setting every options' selected property on a UI update, and when it "re-selects" the last one, IE decides to scroll it into view.
I took the debug version of Knockout 3.2.0 and edited lines 305-310 to NOT attempt to update the options' selected property if it is already equal to whatever is being set. I plan to submit a pull request for this when I get time, but here it is if anyone else runs into this.
UPDATE:
Thanks again, to #JamesThorpe, here is the source I edited.
setOptionNodeSelectionState: function (optionNode, isSelected) {
// IE6 sometimes throws "unknown error" if you try to write to .selected directly, whereas Firefox struggles with setAttribute. Pick one based on browser.
if (ieVersion < 7)
optionNode.setAttribute("selected", isSelected);
else if (optionNode.selected != isSelected)
optionNode.selected = isSelected;
},

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.

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.

How to trigger rendering of JQuery treeview

I use jquery tree plugin to render hierarchical data.
I have coded additional functions which would allow user to interact with this data (like adding/deleting nodes, swapping nodes, etc...)
Currently this plugin supports that whenever you want to add any node, you can call following method,
$("#browser").treeview({
add: branches
});
here branches is jQuery object created with the HTML block, which would represent a particular node.
However, for delete and swapping of nodes, I use common JQuery functions like,
for delete,
$("#topnd2").remove();
for swapping,
var next = $("#topnd2").next();
$("#topnd2").insertAfter(next);
topnd2 is an id of any particular tree node.
The nodes get deleted / swapped properly but the problem is the tree does not get rendered and therefore the tree images (mainly vertical lines denoting branches) are not set properly.
For example, if I delete the last node then that node will be removed from rendered treeview but the remaining sibling node should get L as branch line image but not | .
I tried calling
$("#browser").treeview();
Please let me know your ideas.
Thanks,
Jatan
I found some workaround as given below,
Once the node is swapped up, virtually add its previous node to its child,
$("#browser").treeview({add:$("#topnd2").insertBefore(previous).next()});
If node is swapped down, virtuall add the current node to its next node.
$("#browser").treeview({add:$("#topnd2").insertAfter(next)});
currently it's working fine, will update this post, if I find any problems in this approach. Also please validate this approach if you know.
Regards,
Jatan
If you try to refresh the treeview again after node removal, the link will work but not the [+] or [-] icon. Tried this on several browsers..

Categories