I have a site where items are loaded onto a page in the DOM as I'm using a masonry type effect.
Now, users can delete these items at any time, many at once if they choose to.
The problem is, after deleting, I refresh the page showing the items by reloading it, and the items are still there. Even if I leave the page and return the items are still there. But they have definitely beeen removed from the db table. The only way to clear them from the page is CTRL+R, a complete refresh
How can I clear the DOM cache, or force a refresh? Or is there a better way to do this?
I'm using PHP as main backend lanuguage. I'm also using Jquery.
Not sure what to tag this but think JS and Jquery issue so will start with that.
It's neither a JavaScript nor jQuery issue. It's a caching issue. You need to configure your web server to set the correct cache control headers (Expires and similar) so the browser knows to re-fetch the page. (You can also set them in the PHP response if you need to vary them from page to page by using the header function.)
I won't single out a specific link, but if you search for "cache control" you'll find a million tutorials. :-)
Added timestamp to ajax call so it doesn't cache in the first place, simple really when you think about it backwards!
Many thanks for the other answer/comment
Related
We provide live chat service to our customers. customer just copy some code and put in their footer. then they can have video chat, cobrowsing and many things..
but problem comes when user switch from page to page. so we have resume functionality as well. but thats not robost solution.
So i've come to two solution.
1. Iframe solution
i'll give client a some.html file which he'll need to upload to their root url, then upon video chat and cobrowse we load that page in some.html's iframe and chat appear in some.html
so that work well. chat box apprear seamlessly no page reload effects came in. and as its on same domain i can access all contents of iframe.
2. Another hack solution (not implemented yet, looks good solution)
i was thinking that instead of redirecting user to new page (some.html)
i should clear all contents of current page and load same url in one iframe within the page.
i think that will work well. but i affraid that some client might be using complex js based web app. so if i remove complete body from their page they might have problems.
as much as i know i can remove all dom nodes with their events handlers as well. but is their way to clean js runtime. so all js objects will destroyed and removed from scope so no longer run.
so is there a ways to clear any page completely with all its html and associated java-script as well. means reset page to blank.
Finally i found that there is no way to reset page.. but got another way to make it done.
upon need we can redirect user to same page with query string that identity that its reload for iframe, we put small bit of another code at head which remove all dom before loading dom, css, js.. and create just one iframe of same url.
thus it allows me, have user see no change in url, user browse website as normal without any problem and my chatbox always be there in same state across all pages.
will make it live soon on tagove.com
Why don't you empty the HTML page using empty() function of jquery first,
Then remove/update the link i.e.<script src="...."></script> so that the HTML has no dependency on that javascript and that way it won't be able to Modify the DOM.
And then try to build a javascript program to remove any file in the folder which is isolated(No calling, No dependency, no connection whatsoever)
I have HTML and JavaScript in place that allows a user to move Django database entries (displayed in a table) up and down. However, is there a way that I can store this new order that the user has customized so that it will show up any time the user navigates back to that specific page view? I think get_queryset is what is causing the page (after refreshing) to switch back to the basic filtering. But, I have no good ideas on how to override it or avoid it to accomplish this task. Any help would be much appreciated!
I would suggest using ready solutions: django-admin-sortable or django-admin-sortable2. As for me, I have successfully used second solution and it works. One important note about it is to run ./manage.py reorder my_app.models.MyModel after adding new order field as mentioned here.
I have a page A that displays some text from my database. The text is editable and gets autosaved using AJAX. If the user would go away from that page, and then go back to page A using browsers history functionality, the page would not have the latest data (since we went back in history). And the user would edit the old data, which would overwrite the latest data on the server when it gets autosaved.
I assume this is purely a front-end issue, where my server can do nothing about this. What solutions could be aplied? If it was possible do detect with javascript that the user went back in history, then I could simply display a text saying that the user has to refresh the page. But is that even possible? Or are there any better solutions?
There are lots of options and strategies for a situation like this.
The first thing you can do is to try to disable caching on the page. You can use meta tags to do this.
You can also keep track of when the user presses the back button using libraries such as this one. You can respond either on the server or on the client, although you want to be careful because a disabled back button can annoy users.
Should you ever happen to consider using a javascript framework such as AngularJS you can probably keep track of the back button using the framework.
Finally you can solve issues like this with careful page design. If the data on a page can change you might load the current data via ajax before the user has a chance to edit it. By doing this - your "load" code will run even if the user does use the back button. Take a look at this stack for more information on that!
Hope these suggestions help a bit!
If you are using Jquery then use/
$(document).on('pageshow', '#Content' ,function()
in place of
$(document).ready(function()
It will solve your problem, the javascript file that is back end will be loaded when that particular page loads
I have a little web app (which only has 1 page) that allows user to input and select some options. The input texts and selections will be displayed in another div in the form of table. You may want to refer to the example here: http://jsfiddle.net/xaKXM/5/
In this fiddle, you can type anything and after you clicked submit it will get the text input and append them to another table #configtableTable
$('#labels #labelTable tr:last').after(addmore);
$('#configtable #configtableTable tr:last').after(displaymore);
I'm using cherrypy as a mini web server (and thus major codes are written in python) and i know that it has session here but i have no idea how to use it at all as the example given is not really what i want to see.
FYI, i'm not using PHP at all and everything is in a single page. i simply show and hide them. But I want the page to remain as showing #configtableTable and hiding #labelTable even after refresh. Note that the fiddle is just part of the web app which will only show all these after getting a reply from another device.
Not sure about cookie because all the links i've found seem broken. How about jQuery session? Is it applicable in my case? I need some examples of application though :(
okay, to conclude my questions:
1. can i save the page state after refresh? and how? which of the methods mention above is worth trying? is there any examples for me to refer? or any other suggestions?
2. can i simply DISABLE refresh or back after reaching a page?
Thanks everyone in advance :)
Don't disable Refresh and / or back navigation. It's a terrible idea - user's have a certain expectation of what actions those buttons will perform and modifying that leads to a bad user experience.
As for saving state, while you could use session or cookies, if you don't need that data server side, you can save the state on client side as well.
For example, you could use localStorage
Alternatively, you could create an object out of the data in the table, JSON.stringify() it and append it to the url like this: example.com#stateData.
In case of either option, at page load, you'd have to check if there is state data. if you find there is, then use it to recreate the table, instead of displaying the form.
The disadvantage of the first, is that not all browsers support localStorage.
The disadvantage of the second is that URLs have a length limit and so this solution won't necessarily work for you if you're expecting large amounts of data.
EDIT
It appears that Midori does support most HTML5 features including localStorage however, it's turned off by default.. (I'm trying to find a better reference). If you can, just point Midori to html5test to see what HTML5 features it supports.
I was searching for a script or at least a code snippet but haven't really made any progress. Anyway, I'm looking for a script that works like a simple pagination javascript but it should be accessible by linking from anywhere in the document and by calling it with the URL (e.g. on www.abc.de/default.html#thirddiv the third page of the pagination is displayed). Further, the contents should be loaded upon request (when the user clicks on the link and enters the specific page of the pagination), so that cookies, that have been set or deleted in the same document earlier can be used later without reloading the entire page. Something like that is used on Facebook for calling contents and loading them.
I've found a script on CSS Tricks called BetterBlogroll but I don't really get my mind into this. A pagination script from DynamicDrive is already working very well on the page but my problem is that there should be running three of them on the same page and as I said, the content should be loaded upon the user's request.
The script I'd need does not has to be with loads of CSS, the best way would be plain javascript and only the required CSS and HTML data. Anything else just disturbs. If anyone can help me out here, I'd be very thankful.
Check out Ryan Bates's Railscasts #174 and #175. These two are not rails specific, and explain this well.