I am working on an AJAX application with a lot of Javascript. All pages are loaded through AJAX.
On a certain page I have a grid which is build in Javascript. Now when I leave that page I want to destroy that grid. I call jQuery.remove() but this only deletes the object from the DOM.
My question is how can I delete this grid object from the memory? Cause it still exists when I move away from the page.
Much appreciated!
If you delete all references to your grid (i.e. assign null to the variable), the garbage collector will delete the object from memory.
put the grid into a div or anything you want.
when you want to delete it use
$("<the name of the div>").empty();
that will clear it.
Related
I have an object with a variable number of processes and their properties. These processes are to be visually displayed on the website. Since the user can edit/delete/add processes and their properties on the website, the object is constantly changing or being expanded. So it must always be possible to dynamically adjust/update the web page.
My approach would have been to have an initial function and an update function, which is called again and again, as soon as there are changes to the object. This update function with a foreach loop then calls other functions needed to build the page for each element of the object.
In this case, almost the entire HTML content is created with Javascript using createElement(). Is this the common way to go, or are there other, more efficient ways to do this?
I want to restore an ajax entire modified page along with the javascript variables in memory when the browser back button is pressed. It was added to the brwoser history manually using window.history.pushState(). I'm trying to save/restore the page using :
function changeURL(){
window.history.pushState(document.body.innerHTML,"","...");
}
window.onpopstate = function(e){
if(e.state){
document.body.innerHTML = e.state;
}
};
Seemingly this works but just a problem that the javascript variables that were in memory at the time page was loaded are no longer there as they are modified by subsequent ajax requests but I didn't made any provision to restore them on pressing back button. How can I restore all those values to the variables ?
Write a function that will serialize all of the variables you want to track into some easy to manage format (I'd suggest JSON).
Write a second function that can accept the serialized data and parse/deserialize it, restoring variables as it goes (this will be a mirror image of your first function).
Find some reasonable place to store your serialized state so that it is preserved across page loads. Personally I've used cookies for this in the past, though you can also use localStorage or any other mechanism you prefer.
Add code to your page to store/update the serialized state either every time the state changes, or at least at some point right before the user leaves the page.
Add code to your page to check for stored/serialized state when the page loads, and load it if it exists.
Edit: I'd also recommend not treating the entirety of document.body.innerHTML as your serialized "state". It should be possible to isolate the variables that you are using to modify the HTML content, and use that as your state. Then you can just regenerate the corresponding HTML by re-applying your variables.
My situation
First of all, I hope I can explain it right; I have an admin panel which will be fully ajax driven. It uses jquery to bind all internal (everything that uses domain.com/admin///* ) and instead of following the link it gets the page via ajax.
Problem
Lets say I have a table of news in which i want to dynamically delete one, it links to page which deletes the page. This link has the event to get the page dynamically linked to it, (because all the links are binded).
I want a good way to get feedback from the global ajax function handling the grabbing of the page and fadeout the row in the table. And thus a good way to reuse this.
$.ajaxcomplete works, but it KEEPS doing whatever i define, no way to reset it.
As many developers will be I'm producing web based application that are using AJAX to retrieve data and HTML.
I'm new to web development and javascript but have a couple of decades experience in programming in other languages.
I'm using mootools, which is a great framework, but have been battleing with the lack of destructors in javascript or even onDestroys/ unloads for the dom elements.
I've written a number of UI classes ( mostly to learn ) and alot of them use setInterval timers to periodically get data from the WebServer and update elements on the page (mostly images from cameras).
Most issue occur when another page is requested with the menu and the content div is reloaded with new HTML and Javascript ( using Request.HTML ). This simple replaces all the elements already in the div with the new one and runs the new scripts. Any timers in the old scripts or old objects created will continue to run. This was leaving me with lots of orphaned Clases, elements and timers.
I've been reading more on the mootools site and have realized a number of mistakes I've been making and have started to correct alot of the issues. The biggest of which was not using Element.store and Element.retrieve instead of linking my classes directly to the Elements.
I've already found that the contents of the div being reloaded need to be freed by calling destroy on all its child elements before calling the Request.HTML but that will not remove (clear) any timers that are running.
So I've done a JSFiddle here deinitialize classes to show what i've been trying, its appears to work fine but the following and what i want to know is,
Is it a good idea?
are there any other issues I might have missed?
can you see any problem with this type of implementation ?
or am I reinventing the wheel and missed
something?
Explanation
When the class is initialized it stores itself with the element.
It also appendes (makes if necessary) itself into an AssocClasses array also stored with the element.
I've created a ClearElement function that is called whenever the contents of an element are to be replace with and AJAX call or other method, which gets all elements within the div and if they have and AssocClasses array attached, calls the deinitialize on each of the Classes in the array, then it calls destroy on each of its direct children to free the elements/storage.
Any information, pointers etc would be most greatfully recieved.
Most issue occur when another page is requested with the menu and the content div is reloaded with new HTML and Javascript ( using Request.HTML ). This simple replaces all the elements already in the div with the new one and runs the new scripts. Any timers in the old scripts or old objects created will continue to run. This was leaving me with lots of orphaned Clases, elements and timers.
I would rethink your timer storage and use of evalScripts in your ajax calls.
Keep these outside of your AJAX requests. When doing peer code reviews rarely have I seen an instance where these were needed and could be done in a better way.
Maybe on the link that is clicked have it trigger a callback function on Complete or onSuccess
Without seeing your exact code it will be hard to advise further.
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.