I have a very simple scenario. A web page with a list of items which invokes ajax call upon clicking on any item and dynamically add some text to the page.
Now, obviously, if I leave this page and then I press the back button I get the initial list without all the dynamically added text.
I've been reading a lot about this issue. There are a many tricks to preserve the information and/or load it again from server. But it seems to me that this really simple and desired behaviour should have a simple solution without the need for any trick or server re-loading which will result in obvious noticeable delay for the user.
So, does anyone know about a simple way to get back to the page via back button and retain all the dynamically added parts without the need to load them again from the server?
Related
I started to work on this project which uses django volt dashboard.
The problem is I can edit all the data in the navbar, sidebar and tables.
This is the table present in the original template we have used
Current state
Morover, I can't nagivate to other sections as well. The mouse pointer becomes a I-beam pointer for every dawn UI element.
Literally everything is editable (tables,navbar,paginator)
I tried to put some random values in the tables instead of fetching the data from DB.
Still the problem persists.
I can't wrap my head around this.
Please give me some insights on where it is going wrong?
I'm trying to write a very simple client application for iOS to go to a website with three buttons. Each of these buttons load a different webpage and run a command in an application on the server, takes the results from that command and displays them on a map on the very same page that the button loaded.
What I'm trying to achieve is to be able to do the following:
Click on one of the three buttons.
Have it then run the query.
JUST PULL THE DIV WITH THE MAP TO SHOW THE DATA instead of the entire page, which is what I currently have happening.
I was going to go about this by parsing the html with "libxml2" and "hpple" but I thought that I would ask here before I got started instead of spending a few days on this to realise that I am going about it the wrong way.
So with all of that said I guess my main questions are:
Is this possible?
Is the way I'm going about it correct?
2a. If the way I am going about it is wrong, how best should I go about it?
Normally on the webpage the map, that I am trying to pull, updates dynamically every second or so. In order to make the map dynamic in my application will I have to poll the site every time I want the map to update? or will it automatically update?
I have a 3 column structure for my site.
Links are shown at Left hand side layout.
User clicks a link, and I trigger an AJAX call to load middle column of layout. I load a complete template file in the middle column.
My question -
When user clicks another link, I make another AJAX call to load middle column.
After each sub sequent ajax call, does my DOM gets heavier in size, as I am loading different htmls in middle column, without refreshing whole page ?
No. If you are replacing the data with new data then the old data is discarded.
Well, yes your DOM as you say is technically bigger and you are dynamically injecting HTML. However, this should not be an issue, and certainly not on the client. Size is only of concern if you are downloading the whole page.
I am currently working on a GWT application that requires report
printing. The use can select report parameters from a screen, and
upon clicking print we would like to display the file as it is being
generated. Currently we have server side code that is generating HTML
and writing it to a file. When the user clicks print, an RPC is being
made to pass the report parameters to the server and begin the
report. A second RPC is made after the report has started to obtain
the report's URL. From here, we are creating a Frame and setting the
URL to be the URL retrieved by the second RPC.
The issue I am running into, is that when setUrl gets
called, it only displays as much HTML that was contained in the file
at the time of the call. What would be the best way to refresh just
the frame containing the HTML report? It appears making subsequent
calls to setUrl passing in the same Url each time would do the trick,
but it actually doesn't seem to contain the additional content that
would've been written since the last call. It is also resetting the
vertical scroll bar's position each time back to the top of the bar
which is something else I would like to prevent.
Is there a better way to go about doing this?
I think it would be better to request HTML in chunks from GWT and render them as they arrive. Doing this with ajax instead of wholesale refreshes will enable better behavior with the scrollbar, eliminate flashing, get around caching problems, and will also let you add some feedback like a progress bar, estimated time remaining, etc.
There's a lot more infrastructure required for this, but your suggested solution doesn't seem quite appropriate for the task.
I'm wracking my brain on this one.
After an HTML document loads in a browser, I want to be able to monitor
the page in case any content on it changes for any reason.
Is there a Javascript function with which I can track 'what has
changed' on the webpage. This should be irrespective of the type of content on the HTML page.
I have two examples for you to ponder on:
Ex1:
Say in an HTML document there are two select boxes s1 and s2.
The items list in s2 depends on selections in s1 (page is not
refreshed — that is, s2 is loaded through Ajax or something).
So after the HTML page loads I need to get a notification whenever s2
is populated...
Ex2:
Say, in an HTML page, there's a link, Onclicking which a light pop-up
div is created with some text.
How can I capture the content of this dynamic pop-up?
In all this discussion, I'm not taking into account any particular
format of HTML...the HTML content can be anything...I just need
to keep tracking if any content changes after the page loads...
Ideally I need to achieve this using JavaScript (client-side
scripting).
How can I achieve this?
You can keep track of changes in a textbox using onkeyup. This will tell you every time someone makes a change in a given textbox.
This could potentially fire alot of events. However, using onblur won't necessarily tell you about changes in the textbox and onchange's browser coverage is spotty at best.
If you are using AJAX, you could setup the response function to handle a home grown "event listening" system. So after the response does what it needs to do, it could call any methods that were registered with it, passing in the response text when necessary.
So from your examples above, in Ex1, when the AJAX returns from S1, it would load S2, then call a method saying S2 had changed. In Ex2, when the new AJAX returns the DIV's contents, after loading it into the DIV, it call a different method (or possibly the same depending on what your trying to do) and alerts it that the DIV has new contents.
You could set your "watcher" script as a timer, running a diff function on the current document.body.innerHTML and a stored version captured on load. Depending on how fast the diff will run will give you an idea on what timer interval to use.
This may not capture changes in form elements, but for those, it's easier to loop through all form elements in every form on the page.
Here's someone's diff function I found on Google: http://snowtide.com/jsdifflib