Writing variables to session from within an Element? - ajax

I have an element which is rendered via ajax on my "posts/add" view. The element counts the user's clicks with jQuery and saves it in a variable (let's call it $clickCount).
Now, I would like to pass $clickCount back to the /add view, so I can then save it to the database together with severall other form inputs.
I passed $clickCount to the controller (via Ajax) and tried saving in the session, but it seems like the /add view doesn't see it at all. It's as if the element has a completely different session (which to me makes no sense?). So even though I get the variable passed back to my controller, I can't access it from the posts/add view.
I have spent way too much time on this, I really hope someone can help.

Sounds like it might be because you are making an ajax call to save the session variable, but then you have to remember that you haven't refreshed the page, so the session on the page has not changed, and therefore your new session value isn't available to the view yet.
If you don't want to refresh the page after saving the session value, then you need to return the value back as the response from the ajax request, and add it into your page using JavaScript. You could write it into a hidden form field or something if that is appropriate for you to save it later into the database.
Or, if possible, save the value to the database when you make the ajax request in the first place, and eliminate the whole session thing (if this won't impact the database).

Related

Django delayed updates to database

I'm creating a Django/JQuery/MySQL application where I pass a composite data structure 'grid' as
return render_to_response('products.html', grid)
I render 'grid' into a set of UI elements ('td', 'button', 'div' etc. encapsulated in a HTML 'table'.
A typical use case:
User clicks on a certain UI element in the table
jQUery.click() is called which creates a inner 'input' tag for the clicked element.
User can add/modify/delete text from the element.
When focus is lost, jQuery.blur() is called which reverts the original properties of the clicked element such as removing input tag etc.
jQuery.blur() also calls a AJAX function where I do a .post call to send in user modified data back to a URL (function in view).
The called function in view then commits the new changes in database and returns a 'success' event back to web page:
tc_model_instance.update(tc_id=json_data['id'])
Through this use case, as you can see the changes are immediately committed to the database as soon as user eneters data and gives up focus on a particular element. Without using DB transactions in INNODB, how do I go about creating a View-Template association such that any changes in HTML template are asynchronously reflected in the model, but not necessarily written into the database.
A related question:
If possible I'd also like to create a event based bi-directional association between rendered template and my data structures as part of the view in such a way that any changes made either in web browser's UI element or associated view's data are always in sync. I plan to use AJAX for the most purpose. Not sure if forms would make sense in this regard.
Thanks.
You could probably throw a copy of the object into the session map and all posts alter that object instead of the DB directly. Then when the user presses a save button you'd fire off another POST command to the server that would then just call session['my_object'].save().
Note though that the session object is also saved in the DB, so if you are trying to avoid hitting the DB totally what I wrote above wouldn't help.

Maintain SelectList Options over postbacks

I was wondering if there is a way to maintain your list of options on a Select List in MVC 3. I am pretty new to MVC but in WebForms you could populate the DropDownList on the first load of the page and then the ViewState would maintain that list for all of the AutoPostBacks. This was nice because often, DropDownLists are populated by query to the database. I know that ViewState does not exist in MVC but is there a better way of repopulating the SelectList without having to hit the database during the request of every post?
You have several options here.
Your selected value will be posted back. With that in mind since you no longer have ViewState you ideally want to
Have your Repository (if you dont have one - create one. You simply ask the repository for the data and it controls the caching or loading) that you ask for the data in the drop down, cache the data and just simply request it again. Rebind your list (use DropDownFor)
Use MVCContrib's Html.Serialize to essentially ViewState it, however the cache is a bit cleaner and doesnt rely on data sent back and forth.
Also remember that after you post your data, if everything is 'good' you want to REDIRECT back to your "GET" action to reload the data and display to the client. This was an issue in web forms that sometime a user saw XYZ after postback but after a refresh saw YXX. Using the PRG pattern in MVC posts-redirects-gets to load up fresh data.
After your post you should generally only redisplay the data if there was a validation error, otherwise redirect to a get method.
Your controller receives the value on postback. You have to place that value back in the model to tell the view what the selected value is.

Ways to monitor the ajax call and wait for the same

I am calling a Ajax call from my asp.net page. I have a combo box called technology and when i select some value from it, i am calling an Ajax call which will trigger a function which talks to DB and then returns the Vendor name. Here if the data is very less then then call immediately returns and updates the associated fields. If the data is huge, the Ajax call is taking long time and before that if the user saves the form, it stores with null value. Here i should restrict the user from clicking any thing on the screen till the Ajax call is finished. For that, i need to know how can we track the Ajax call completion and how the ajax call can be monitored?
Can somebody help me in this?
Thanks in advance,
Ramprasad
I suggest you use Fiddler, its excellent for things like this.
I suggest you just to block form send button till all data would be filled. So user will need to wait of loading this select box. And also change value of combo box to "loading.." or something like this, so user see that there are some things doing.
Also you shouldn't block all from when combo box loading, because at this time user can fill some other form fields.

How do you switch backing bean objects in JSF?

Suppose I several tags, text input, radios, etc referencing one instance object. I would like to use a dropdown on that page to switch the references mentioned before to another instance of the object.
This part is pretty easy with change listener. However, the problem I have is the values currently displayed on the screen are getting set into the new, second instance.
I would like the current values to be stored in the current instance, and then the when the page refreshes I would like the new values to come from the new instance and be displayed on the screen.
Is there was way to do this? Does my question make any sense?
Grae
A value change listener is exactly the wrong tool for this, because it gets called before the values are set.
What you want is an action listener, which will get call after the values from the page are validated and set.

HTTP POST and graceful degradation

I have a web application which among other things contains a table of items created using an Ajax callback. A bunch of form fields at the top of the table allow me to filter the items that will be displayed in the table according to various criteria and show it.
Some parts of the table have lists of items with an [X] marked next to them that I can delete by clicking on those items.
Now, if I were doing this the non-ajax/javascript way, the page would receive a bunch of POSTed data fields and then would render the table accordingly. I can do this but I would also like to Ajaxify the entire setup. My questions are regarding this.
How would I create the [X] button. A simple <a> would "work" but it's a GET modifying state so I don't want to do that. The way I'm doing it now is a tiny form with a hidden parameter than holds the item to be deleted and a styled submit button that's the [x]. If I ajaxify this, I can get the response and do the needful.
How do I keep my backend DRY? I don't want to have two completely different bits of code for the Ajaxified version and the regular ones. What I'm doing right now is having the non-ajax version submit to a URL that changes the state and then redirects to the main page again (similar to a PRG type system). With the Ajax enabled, I simply call the URL and ignore the redirect but use the returned data to adjust the table. Is this the "right way"?
Any other advice on graceful degradation on how to keep my backend DRY?
I would put each row into it's own form (with method='POST'), and include a hidden field to say which item is to be deleted. The [X] would submit the form, and in the form's submit event, if no XmlHttpRequest is present simply submit the form to the server which would delete the item and redirect to the same page again (this is good practise to avoid a reload from resubmitting the delete POST).
If an XmlHttpRequest is present, set it up to POST with the id of the thing to delete and then remove the row if the request succeeded. You could set a flag in the AJAX request so that redirect doesn't happen, just a success (200 OK).

Resources