Asynchronous view call in backbone.js when model is updated - html

I'm trying to make a demo application for practicing backbone.js.
In my app architecture I first designed the model and inside it wrote a code for parsing a JSON file and storing those records in localStorage and then populating model's attribute hotelsdata with the first 10 records of localStorage.
And then whenever I'm calling the backbone.view.extend() I'm fetching the data from model object.
Now, what I want to do is whenever my model is updated my view must also be updated from the new values in the model. I've already tried
model.on('change',function())
trigger but when I'm calling the view.render() method on the change event my page is being updated, but during the period of adding of records on the page my scroll is not working.
So, can anyone please suggest some way in which I can call that view.render() method asynchronously so that my page's scroll would not be affected during the pressing time of view.render().
In short when my view is being updated the scrolling of the page must work.

I think you have a problem of, how we can call it?, brutal render :)..
I should see your render() method to confirm it, but I think in your render you are removing from the DOM a big portion of the page and then recreating it again. This could cause your scroll to messup. And there is not any asynchronous behavior that can help you.
You should recreate the subelements of your View one by one to have a sweet scroll feeling.
(Show us your render() method if I'm completely confuse)

Related

How do I automate tab selection on a website

Here is the website I am trying to access. I dont want the default tab (Day) though, I want to select the Season tab
https://www.eex.com/en/market-data/power/futures/uk-financial-futures#!/2017/05/23
The link appears to be exactly the same whichever tab is chose making differentiation impossible as far as I can tell.
Any help on this would be much appreciated, using whichever programming method and language is appropriate.
Kind Regards
Barry Walsh
The URL does not change since this is an ajax request, which you can see from MarketDataTableAController's getPageData function. You can read about them here https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started
Ive inspected your html and you seem to be using angular. On further inpection you can see that the tabs have ng-click="setActiveTab(tab)" attribute on them. So whenever user clicks, this function gets executed. It is a matter of using this function with the appropriate tab object to get the content to change. You for example could put setActiveTab(tab) into your controller init method since setActiveTab() calls the forementioned getPageData() function to update the page.
Also the tab you are looking for is page.tabs[5] ($parent.page.tabs[5] if referring from TabController) since this is the tab with the label of season. Pass that to setActiveTab() and it should show you the season instead.
However this might not be a good solution since the tab array ordering might change. Then you would need to loop over all objects in page.tabs and see if tab.label === "Season" and pass that in the function instead or better yet use the $filter service provided by angular which would look more cleaner.
Your code source also seems to be minimized and its not very easy to read.

CakePHP - refresh element/view cell using ajax

I'm trying to build a way to update a user profile one question at a time.
Essentially I want a div on my page that displays a form that lets the user submit the most important information, say firstname. When that has been filled out (success on the form) I want to refresh that div and show the second most important form, for say lastname, or if that is already filled in then birthday and so on.
Much like linkedin prompts you to add one more piece to your profile.
How would you do it?
My first thought was to use elements. But I need to fetch existing profile data to populate the form and how would the element get that data, abusing requestAction is not an option.
So I guess I in that case need to call a controller action that determines which element should be rendered, renders it to a variable and submits that (response->body) in json to the js that updates the page. Seems a bit .. unclean but should work.
Then we have view cells. They seem ideal for the task until I want to call them via ajax. That is not possible right?
So how would you go about to build something like that?
A form that needs to have the ability to be prepopulated with data if there is any and then refreshed automagically to display the form for the next piece of info needed.
View cells can't really be used in AJAX requests. This is not what they thought for.
The best thing you could do, if you want to keep the cell, is to make sure you followed SoC properly and put all your business logic into the model layer.
Now have a separate controller and action that is reachable from the outside throught a request (a cell is not) and return the data as JSON from there using the same code.
You could try to instantiate the cell in the controller action as well and send it's output. But honestly, I think that's a pretty fugly way of doing it.

restore ajax dynamically added content on back button

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?

Run JS function (with a refreshed bean parameter) after commandLink's action that moves the user on another page?

This is my first question here and on top of that I'm really, really new to Spring/JSF/RichFaces (about 3 weeks) so, I'm sorry if my question is dumb :)
Long story short, having the following:
a4j:commandLink
action="myBean.doSomething" method that (among other things) updates a JSON parameter and returns another navigation page (so clicking on the commandLink moves the user on another page)
in the above case the oncomplete event does not trigger.
What I need to do is to refresh the JSON parameter so I can use it in a JS function before the user is moved to the next page. Since oncomplete doesn't trigger in my case I had to find a way around it but I am really not sure how "bullet proof" is the way I implemented. (not to mention that it is quite troublesome to implement it all over the place)
What I did so far was to have the commandLink's action point to the bean's method that does everything except returning the new navigation page and on oncomplete event to run my JS function with the updated JSON object then call a previously declared jsFunction that all it does is to return the navigation page.
It works ok, I guess, but I was wondering if there's "an official" (proper) way to do it (like forcing the oncomplete or similar event that comes after the action where I can use javascript).
Here's the example:
<a4j:form id="myForm">
<a4j:jsFunction name="moveToNextPage" action="next_page"/>
<a4j:commandLink action="#{myBean.doLogicAndUpdateJSON}"
oncomplete="callJSfunction(#{myBean.objJSON});moveToNextPage();">
</a4j:commandLink>
</a4j:form>
Thanks!

GWT HTML Report Printing

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.