Persist js user controls state - javascript

My RIA application has a lot js UI controls (almost all of their is jQuery UI parts like datepicker, dialog, jqgrid). So then user works with some controls on one page and then go to another page and then clicks back all page components has initial state (textboxes are empty, grids are empty and so on). So how can I persist UI controls state and then restoring it between pages? It seems I need some like JS serialization/deserialization methods storing serialized data in user server session. How can I do it with minimal costs? How do you guys it in your projects? Any thougs, links, posts will be very appreciated. Thank you guys in advance!
P.S. My project is ASP .NET MVC3
EDIT
Just now I remember about memnto design pattern. Could anyone of you advice me something related to this idea?
Thanks again!

I wrote this as a comment of your question but I'm putting it as an answer as it might be the only way to do this without having to "hack" it with some sort of side plugins.
The use of Viewstate have nothing to do with you using or not JQuery UI "addins". All you have to do is use server-side controls instead.
Note that for this you have to use the control client-side name, something like:
$('#<%= MyDateTextbox.ClientID %>').datepicker();
This way you can apply JQuery UI on server-side controls and take advantage of the Viewstate restoring the controls value on back-button navigation.

I would do it using Persist-JS (Persist-JS on GitHub), jQuery (which you are using already) and json.js (JSON-js on GitHub) .
Something like this:
var store;
//Restore form data
$(function() {
store = new Persist.Store('My Page Store');
var formDataStr = store.get('formdata');
if (formDataStr !== null) {
var formData = eval('(' + formDataStr + ')');
if (formData.hasData) {
$(':input').each(function() {
if (this.name != undefined && this.name != "") {
if (formData[this.name] != undefined) {
$(this).val(formData[this.name].value);
}
}
});
}
}
});
and...
//Persist form data
$(window).unload(function() {
var formData = {};
$(':input').each(function() {
if (this.name != undefined && this.name != "") {
formData[this.name] = {};
formData[this.name].value = $(this).val();
}
});
formData.hasData = true;
store.set('formdata', JSON.stringify(formData));
});
In other words, loop through all the inputs on the page, store their value ($.val()), create a JSON object and persist it for these values. When restoring the form, simply do the opposite -- loop through the inputs and grab the properties off of the JSON object by name formData[name]. There's some defensive stuff in there (ie: check for persisted object to be null, which is how persist-js works).

Related

setting a variable in javascript to be used in another form

I have form with a Grid (telerik), i think the technology behind it doesnt matter. I let user click on a row in the grid. During the click I extract a value from the Grid with Javascript, like so:
function RadDrillDoubleClick(sender, eventArgs) {
var Code = eventArgs.getDataKeyValue("Status");
if (Code == "In Progress" || Code == "")
{
location.href = "Main1.aspx?mode=edit&DID=" + eventArgs.getDataKeyValue("D_ID");
}
else {
location.href = "Main1.aspx?mode=view&DID=" + eventArgs.getDataKeyValue("D_ID");
}
}
After user has clicked the grid, I call this JS function and send them to correct .aspx page with either VIEW or EDIT mode dependent directly on the Code.
What I'm trying to do is once I get to the Main1.aspx page, I want to be able to continue to hold the CODE value, because when users performs a certain action, I'll need to call a javascript function and use the actual CODE to determine what the user will be able to do.....
var Code = eventArgs.getDataKeyValue("Status");
is there any way I can somehow create like a GLOBAL Variable called
CodeValue
that I can pass around to another form without doing it in the URL?
When the browser navigates to a page, all current JavaScript is unloaded from the browser. This means any functions/variables, etc. will not be accessible on the new page unless you've persisted the value in some way.
Common ways of persisting the value include:
Add it to the query string of the URL the user is navigating to
Save the value to a cookie
Save the value to local/session storage
For your scenario, #1 is probably your best bet (keep in mind the user can have multiple browsers/tabs open to your site).
One way to get the value from URL is like this: on the page Main1.aspx, you add to your JavaScript a function that will run after page loads and that will get what it needs from the current URL
var globalValue; // variable that will receive the value from URL
window.onload = function() {
var thisURL = window.location.href;
globalValue = url.split("?").pop();
// this will store in globalValue everything that comes after the last "?"
// example: if the url is www.site.com/text?value, it will store string "value" to globalValue
};

Two-way data binding for a Meteor app

I've built an app that is form-based. I want to enable users to partially fill out a form, and then come back to it at a later date if they can't finish it at the present. I've used iron router to create a unique URL for each form instance, so they can come back to the link. My problem is that Meteor doesn't automatically save the values in the inputs, and the form comes up blank when it is revisited/refreshes. I tried the below solution to store the data in a temporary document in a separate Mongo collection called "NewScreen", and then reference that document every time the template is (re)rendered to auto fill the form. However, I keep getting an error that the element I'm trying to reference is "undefined". The weird thing is that sometimes it works, sometimes it doesn't. I've tried setting a recursive setTimeout function, but on the times it fails, that doesn't work either. Any insight would be greatly appreciated. Or, if I'm going about this all wrong, feel free to suggest a different approach:
Screens = new Meteor.Collection('screens') //where data will ultimately be stored
Forms = new Meteor.Collection('forms') //Meteor pulls form questions from here
NewScreen = new Meteor.Collection('newscreen') //temporary storage collection
Roles = new Meteor.Collection('roles'); //displays list of metadata about screens in a dashboard
//dynamic routing for unique instance of blank form
Router.route('/forms/:_id', {
name: 'BlankForm',
data: function(){
return NewScreen.findOne({_id: this.params._id});
}
});
//onRendered function to pull data from NewScreen collection (this is where I get the error)
Template.BlankForm.onRendered(function(){
var new_screen = NewScreen.findOne({_id: window.location.href.split('/')[window.location.href.split('/').length-1]})
function do_work(){
if(typeof new_screen === 'undefined'){
console.log('waiting...');
Meteor.setTimeout(do_work, 100);
}else{
$('input')[0].value = new_screen.first;
for(i=0;i<new_screen.answers.length;i++){
$('textarea')[i].value = new_screen.answers[i];
}
}
}
do_work();
});
//onChange event that updates the NewScreen document when user updates value of input in the form
'change [id="on-change"]': function(e, tmpl){
var screen_data = [];
var name = $('input')[0].value;
for(i=0; i<$('textarea').length;i++){
screen_data.push($('textarea')[i].value);
}
Session.set("updateNewScreen", this._id);
NewScreen.update(
Session.get("updateNewScreen"),
{$set:
{
answers: screen_data,
first: name
}
});
console.log(screen_data);
}
If you get undefined that could mean findOne() did not find the newscreen with the Id that was passed in from the url. To investigate this, add an extra line like console.log(window.location.href.split('/')[window.location.href.split('/').length-1], JSON.stringify(new_screen));
This will give you both the Id from the url and the new_screen that was found.
I would recommend using Router.current().location.get().path instead of window.location.href since you use IR.
And if you're looking for two way binding in the client, have a look at Viewmodel for Meteor.

Submitting form/getting HTML with JavaScript without iframe?

Context:
I work a student job transcribing paper reports in a webapp. It's old and we unfortunately can't change the source nor directly run a DB query.
It only checks if the unique ID exists once you submit the entire form, and you can't submit it unless it's entirely filled. Needless to say, it's a huge waste of time as you often transcribe the whole thing only to realise it's a duplicate.
Objective:
I made the userscript below that launches a search the search on the onblur of the unique ID's input(noReferenceDeclarant), checks if there are any matches (rows) and returns accordingly. Runs with Greasemonkey. The search form is in another page on the same domain. The search form does not take any URL arguments.
Can this be done without using an iframe (AJAX perhaps?)
This is a tool for my own productivity & to learn JS at the same time. As I'm still very much a beginner, any tips to make that code cleaner are welcome.
//Adding function to input's blur event
$(document).on ("blur", "#noReferenceDeclarant", isRefNumberExists);
//Vars
var noReferenceDeclarant = '';
var loadCode = 0;
var $searchForm;
//Fonctions
function isRefNumberExists ()
{
noReferenceDeclarant = $('#noReferenceDeclarant').val();
loadCode = 0;
//Make sure there's data in the input before proceeding
if (noReferenceDeclarant)
{
//Build search iframe
$searchForm = $('<iframe />', {
name: 'searchWindow',
src: 'rechercherGriIntranet.do?methode=presenterRechercher',
id: 'searchWindow',
width: 0,
height: 0
}).appendTo('body');
$searchForm.load(searchRefNumber);
}
}
function searchRefNumber()
{
var isExists = false;
//Check which "load" it is to avoid submit loops
if (loadCode === 0)
{
loadCode = 1;
//Filling search form with search term
$(this.contentDocument).find('#noReference').val(noReferenceDeclarant);
//Set search form preferences
$(this.contentDocument).find('#typeRapportAss').prop('checked', false);
$(this.contentDocument).find('#typeRapportAS').prop('checked', false);
$(this.contentDocument).find('#typeRapportSI').prop('checked', true);
//Submit the form
$(this.contentDocument).find('form:first').submit();
}
else if (loadCode === 1)
{
loadCode = 2;
//See if there are any tr in the result table. If there are no results, there a thead but no tr.
var foundReports = $(this.contentDocument).find('.resultatRecherche tr').length;
if (foundReports > 0)
{
if (confirm('A report matching this ID already exists. Do you want to display it?'))
{
//Modal window loading the report in an iframe. Not done yet but that's fairly straightforward.
}
else
{
//Close and return to the form.
}
}
}
//Reset variables/clean ressources
delete $searchForm;
$('#dateRedactionRapport').focus();
}
On the whole I've seen far, far worse code.
Ajax could do it, but then you'd just have to put the AJAX response into the DOM (as an iframe, most likely).
In this instance, I'd keep the approach you have. I think it is the sanest.j
Without the full context, there may be a way to clean up the loadCode -- but what you have is pretty same and works. A lot of folks would call it a semaphore, but that is just an issue of terminology.
The only thing I"d really clean up is recommend not calling the jQuery object so often..
// Many folks recommend that jQuery variables be named $<something>
var $doc = $(this.contentDocument);
doc.find('#typeRapportAss').prop('checked', false);
$doc.find('#typeRapportAS').prop('checked', false);
$doc.find('#typeRapportSI').prop('checked', true);
If you wanted to play with jQuery data structures, you could make a 'config' object that looks like this:
var formValues = {
typeRapportAs: false,
typeRapportAS: false,
typeRapportSI: true
};
then iterate over that to (using for ... in with .hasOwnProperty).
Not NEEDED for this project, what you are doing is fine, but it might make a learning exercise.

Taking Data from Form to collection in Backbone

I am having a very big form which has lot of form columns.
I am putting my form data using this code :
var formData = {};
$("#newwaitlist div").children().each(function(i, el){
formData[el.id] = $(el).val();
});
var waitdriver= new DriverWaitModel(formData);
console.log(JSON.stringify(waitdriver));
this.collection.add(waitdriver);
The data is correctly getting taken.
but i am having a small bug in this.
Inside my form i also have my buttons and also form that takes options(like drop downs).
The above code also logs the button value and its id. Is there a way to remove it before adding to the collection ??
IS the way i am passing my data to the collection correct ?? or is there a better way of doing the same ??
Note
I cannot use backbone-stickit or anyother .. Just with backbone, underscore and jquery we have to do. So ...
You could just do a check for the type, as in el.prop('type'). Like this:
$("#newwaitlist div").children().each(function(i, el) {
if (el.prop('type') !== 'button') {
formData[el.id] = $(el).val();
}
});
The above answer also solved the problem,
But in my case i had also to filter out some form elements that were also of not button type.
So this is how i made it work;
if(el.id!="addDriveBtn"===true){
formData[el.id] = $(el).val();
}
which ever id you dont want to input you can just filter out.
Worked great...
JavaScript and Backbone just rocks

Filtering of Telerik MVC Grid using javascript doesn't work with custom binding

I have a Telerik MVC grid which uses custom binding.
Using javascript I store the filter, page and grouping in a cookie, such that when the user reloads the page, the filtering etc. is restored:
$(document).ready(function () {
//restore previously saved filters
var params = $.deparam($.cookie("MyGridCookie"));
var grid = $("#MyGrid").data("tGrid");
var refresh = false;
if (params.filterBy && params.filterBy != "") { grid.filterBy = params.filterBy; refresh = true; }
if (params.currentPage && params.currentPage != 1) { grid.currentPage = params.currentPage; refresh = true; }
if (params.orderBy && params.orderBy != "") { grid.orderBy = params.orderBy; refresh = true; }
if (refresh) grid.ajaxRequest();
});
I've used the exact same code for grids without custom binding and this works just fine. However, in this particular case, the parameter command.FilterDescriptors is empty. But when I manually input the same filter which is stored in the cookie, the filtering works just fine.
So apparently, when custom binding is enabled, the telerik grid does something different when it comes to filtering compared to a grid without custom binding. Does anyone know how to resolve this issue?
Indeed the problem was with the filters being stored in CompositeFilterDescriptors. Problem solved.
Did you try grid.rebind(); instead of grid.ajaxRequest();

Categories