Catching partial close in angularJS - javascript

So I've run into a small design problem.
I have a partial where you can fill in some form information, and a second partial where you can select some additional items. I store the details of the first partial in localstorage so that it can be filled back in when the user returns from the second partial (it makes sense, don't worry).
However, I want to delete the localStorage when the user leaves to any other part of the website, but there are about a dozen ways to do that. I would like to handle this with a partialClose event, but I can't seem to get it to work (I'm new at web development so forgive me if this is a stupid question).
What is the proper way of handling a partial close/switch event with both AngularJS and Jquery?

The event for a partial changing is $locationChangeStart

Related

Fill and add select options and sync with database

I'm very new with JavaScript and I'm struggling to implement something which I don't think should be very complicated.
What I want to do is:
form is open in browser with a drop-down list of records in a database
if the desired option is not in the list, the user can click on a link next to it to add a new entry to the database
this will open a new window with an additional form for this entry
on clicking submit the processing script will run to insert this information into the database
when the processing script has completed, the window will close and the drop-down list will refresh so that it includes the new option (but without losing any other information in the form)
Maybe that last thing with the list refreshing is quite complicated (unless the list only in fact loads from the db on click?) but everything else should be simple enough, I think. I've tried all sorts of things but nothing that's got close enough to working to be worth posting here.
Could someone please give me some sort of idea of the sort of functions I should be using and roughly how to implement them? I don't necessarily need precise code, just a framework to work from. (I'll learn more in that case anyway.)
ETA: I should add that I've been trying to work with window.open() and window.close(). I don't even really know if this is the best method?
No, that's not(at least relatively) complicated. What you'll need is jQuery and jQuery UI(these frameworks are just suggestions, you may chose any other if you like) to achieve that. So...
form is open in browser with a drop-down list of records in a database
This part is easy, just a simple html form with a select tag and a add link/button on it. You will need a JavaScript function to refresh the select options from database. For that I suggest this or this -there are many others on the web- post.
if the desired option is not in the list, the user can click on a link
next to it to add a new entry to the database
this will open a new window with an additional form for this entry
The easy way to do this is using jQuery UI Dialog Widget to open the popup with the new form.
on clicking submit the processing script will run to insert this information into the database
On that form you'll have to use jQuery Ajax to send data to database through your server language(PHP, ASP.Net, JSP, whatever...). Some examples here and here.
when the processing script has completed, the window will close and the drop-down list will refresh so that it includes the new option (but without losing any other information in the form)
So when data processing was complete, you call the refresh select function that you created before and close the dialog on the ajax success callback. Example here.
And this is it. Now it's up to you. Hope it helps.

Save the state of page. Cookie or session?

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.

Refresh parent page when popup's form submits

Ok, I am working on extending a legacy Coldfusion MX 7 application. I'm new to the project and have been charged with implementing a new feature which I have done however during code review it was recommended that I alter the method which I used to close the child page and refresh the parent page to reflect a newly created data point.
The popup has a CFFORM on it with some buttons. When the popup opens I capture a reference to the parent page with javascript in a variable we can call "opener". When the form posts I capture the data, insert it into the database, call refresh on "opener". This causes the new data item to show up in the parent page's grid.
Research indicates that if I was using Coldfusion 8 I could possibly use the CFWINDOW tag to work this magic.
I have no formal training when it comes to web applications in general so perhaps I am doing something taboo with my approach. How would you solve this particular problem?
EDIT:
I was thinking this over some and came to the conclusion that if I could capture the submit event, post the form data, and get feedback on if it was a success I could then trigger the parent page refresh. Is there a form property that I could bind javascript to for this sort of thing? Maybe some jquery AJAX combination of things that would allow me to submit the form, wait for the status, then refresh the parent and close the popup?

Maintain View State After POST

I am creating a site that utilizes the jQuery UI tabs. Whenever the user flips between the tabs, the tab they just left is posted back to the server in order to save the state.
One of the tabs in particular is a bit complicated in that, if I select a particular data option, other options need to be disabled. However, because of the POST, those options reenable themselves in the view when I go back to the tab. The current solution I have found to fix this problem is to check to see if the specific option was selected and to disable the other options appropriately (which happens as the user flips back to the tab). However, this seems like too much work. I am wondering if there is any way for the disabled attribute to remain on the various options even through the POST. (If the answer is "No," I'll accept that, but I wanted to see if there was another alternative to ensuring the view is correct for the user.)
Edit: I wanted to add some code demonstrating the post that I am doing when the user switches tabs. (Particularly based on the responses.)
$.post($(form).attr("action"), $(form).serialize(), function (data, success) {
if (success) {
// Inject the resulting form back into the parent of the page.
var parent = $(form).parent();
parent.removeData($(form));
parent.html(data);
processTabAfterLoad(tab_index);
}
});
The processTabAfterLoad function does all of the selections and setting the state of the tab back to what it previously was.
If I were you, I'd take a different approach. It seems like your goal in posting back to the server when navigating is to preserve a user's location in an application so when they return, you can restore this state. Rather than reloading the whole page through a POST, what you could do instead is do an "AJAX" post to tell the server to store the user's UI location but do all of your UI enabling logic client-side. That way, not only will UI transitions look smoother, but you'll reduce server load and make the application more responsive.
It'd only be when the user does the initial GET of the page that you'd need to look up the last-known UI location. If there's something stored for that user, you would add logic to set the UI's initial state when the page loads.
Update:
Indeed you are doing an AJAX post, but you're also apparently inserting the HTML response from that post into your UI. That is a somewhat unusual pattern (excepting ASP.NET update panels). Typically, you'd either POST the data and expect no content in the response or you'd receive data back from the post which you'd apply to the UI rather than receiving a fragment of the UI.
If you're committed to the way you're currently handling form submittal, you could look into the jQuery live function which can apply changes to elements as well as newly-inserted elements that match the criteria.
Tabs are usually navigation techniques. Imho, its a bad practice to postback and redirect when a GET (i.e. an ordinary link) would do. A GET resets viewstate back to a known point, is a small payload, doesn't require a page life cycle that gets discarded anyhow before the redirect, etc.
I could also be completely wrong here-- I'm making some guesses since I can't see any code.

Avoiding too many submits to the page

I have an HTML page in which a table with innumerable no of cells are placed all over the page. In detail a employees 24 hour day schedule is divided into 30 min cell means 48 cells in row by 100 employees on average. Each cell on click opens a popup which on submit submits the whole page again.This is been in use since ages but a new client wants this should happen after all the random popups modfications are complete(means all changes should happen only once). This is mostly written in java,javascript with a custom framework.My qusetion is what is the dual approach for this kind of situation. Most generic answeres I researched is AJAX implementation but i feel some tweaking inside the javascript might fulfill the requirement.
Without AJAX, the only solution I can think of is not submitting the form every time one value is changed, but having a "Save" button that saves them all at once.
However, AJAX would be the best solution. All you do then is submit a iny amount of data to the server and that is dealt with, all while the user stays on the current page.
Mozilla's tutorial is probably the best on the subject if you're using plain Javascript. The various frameworks like jQuery have really simple built-in functions.
It's not absolutely necessary to use XML. A quick and dirty method for data for which you know the format and that is fairly similar is to just pass the data back and forth using the XMLHTTPRequest object. You could detect changes to individual cells with Javascript and events to store the cells that are modified and their new contents. Create the functions to pass the data back to a server page that updates the database.
This can be extremely fast. In one app I worked on, the HTML was 100k per refresh and this dropped to 5k or less when only the data was updated.
AJAX would definitely be the best solution for that. But seeing as you're hesitant to do a rewrite, two ways of improving come to mind:
Change the architecture of the table so that not every change requires a submit - it should be possible to change as many fields as necessary, and then save them all with one submit action. That depends on the table's structure, though, and the way the saving script works - a rework might be necessary, hard to tell without knowing more.
Create an invisible IFRAME, give it a name, and set all <form> elements' target attribute to that IFRAME. There would still be a submit action for every pop-up, but it would be submitted into the invisible Iframe, while the page does not have to be reloaded, and the user can continue working. This not really a beautiful solution but might do the job, at least as long as there are no file uploads involved.

Categories

Resources