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
Related
I'm getting this strange behaviour in a very specific set of inputs on one my applications. I create some inputs and I can see them as I created them on the Elements panel (google chrome), but the way the browser renders it is different.
Note how the input is renders with comma instead of a point, but the value attribute uses a point
When I get a referente to that element using the selector API, I get this:
A direct reference to the Dom Element will return 11,00. The tag has 11.00 and jQuery returns the 11,00. I've removed all js that interacts with this element (masks, events, etc) and the issue still happens.
I've been swearing at the DOM for a day and a half, but I know this is most probably an issue with my application. What bothers me the most is that the browser does not honor what I see in the elements panel.
This is the small piece of code that creates the element, stopped right before the tag is created. Note the variables values in the right panel:
Could someone give me a hint about what could be causing this difference in between element, view and attributes? If possible, I'd like to know what/how this is happening in depth.
Thank you in advance
There have been a few related questions on SO about how to remove CKeditor instances, most using .destroy(). This is fine when the editor is still in the dom, however. I have a situation where a CMS is adding a text area, which I am converting to a CKeditor. the cms moves elements from the dom (on an unrelated event).
I can bind an event to the complete emit of that unrelated event, so that the CKeditor can be re-initialized. All that works fine but when I come to remove those left over instances I get errors, this is how I tried:
for (var name in CKEDITOR.instances) {
CKEDITOR.instances[name].destroy(true);
}
but it generates a error:
Uncaught TypeError: Cannot read property 'clearCustomData' of null
I have recreated the issue on a jsfiddle You'll see that the code:
creates a ckeditor instance from a textarea
removes the parent dom element
creates new dom elements
tried to remove all current instances
creates a new ckeditor instance
Step 4 generates the error.
n.b. related questions on removing ckeditor instances relate to still existing dom elements where in this situation the dom has been removed. I have no control over the dom element being removed.
Is there a way to bind an event to the ckeditor triggered when it parent dom elements are removed? I'd assume I'd still hit this issue even if that was the case. Any one any idea?
n.b. I am using jQuery in other places in this project, so a solution involving jQuery would be suitable even though I'm not using it in the ckeditor code.
UPDATE:
I did try setting the instances to null, which does work, but doesn't kill the object created on a CKeditor instance. i.e. CKEDITOR.htmlDataProcessor
(using 'Profiles -> Heap snapshot' in Chrome dev tools is a good demo of the issue)
UPDATE:
Thanks #oleq for the information, I looked at the discussion but couldn't so how to add to it so updated here:
Please see the image of mem profiles before and after dom changes.
You'll see the size of the CKEDITOR properties really go up.
I notice that CKEDITOR.instances.editor1.element.$ stores the element the ckeditor has been bound to/fired upon. Would a check for an existing ckeditor instance on that element, which would destroy the existing CKEDITOR.htmlDataProcessor etc objects and recreate before a new instance is added to the text area?
Does that sound like something that would be appropriate or would the fact that this is seen as an edge case mean its too low a priority? I'm happy to put in the work and pull request if deemed a reasonable solution?
The root cause of the issue appears to have been fixed in https://github.com/ckeditor/ckeditor-dev/pull/200
In short - the iFrame element is detached/removed from the DOM before you call destroy which results in the ckEditor getFrame method returning null.
My workaround until upgrading to the latest ckEditor version is to put the destroy within a try/catch.
The algorithm that controls destruction of CKEditor instances wasn't designed to handle edge cases. The error is thrown at that specific point in wysiwygarea plugin because basically editor.window.getFrame() returns null.
It's an edge case, already discussed on CKEditor bug tracker.
I have a web app built on KO and for the most part it has been a god-sent. However, I have one very frustrating problem.
When I move an element with jQuery from one spot in the DOM to another, the bindings seem to randomly break. Sometimes they survive the move, sometimes they don't. Anyone know what might be causing this? I wish I could give a specific example, but I can't seem to re-create it in a simple case (for a fiddle) and it truly is random (3 in 10 tries).
Is there a way to refresh the bindings in an element?
Cheers,
Had a similar issue. It was happening for me when I was moving the DOM element before applying bindings.
Make sure that all the applyBinding calls are made before you move the DOM element.
That is about all the help I can give without a code sample.
Perhaps try using ko.cleanNode to clear the bindings from the moved element, then ko.applyBindings( model, element ) to rebind them?
See also How to clear/remove observable bindings in Knockout.js?.
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();
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).