So, I understand this is an odd question. I have 2 pages, one that somebody fills out w/ a bunch of inputs. The next page would be a "print to pdf" type deal w/ Coldfusion. However, I want to send all the info to the next page and not lose what the person entering data has put in. Is there a way with jQuery (or some other option in CF that I haven't seen) to potentially grab the $('body') and pass it to sub in on the next page so it keeps the <input> values? I don't want to do a form submit, as there are a bunch of calculations that also take place based off those inputs that are shown, using javascript, and <cfdocument> has trouble with javascript after the fact.
I would serialize all the form input values using jQuery's serializeArray, and store it in the localStorage. In the next page, just read the localStorage and parse your data back to an object using JSON.parse.
Page 1 :
localStorage.formData = $("form").serializeArray()
Page 2 :
var formData = JSON.parse(localStorage.formData)
...aaaand you'll get all your data in an object on page 2.
Ok, so the element data to local storage worked, but the way I actually did it was writing the $('body').html() to a string, passing that using $.ajax() to a cfc file, where I wrote a text file to the CF temp directory using <cffile>, then re-rendered that text into HTML/CFML on the PDF page using <cfinclude>. Hope this helps someone if they need it!
You can cache the data for use on another page in CFML. I do this with Railo, but Adobe CF has a similar function. Any data I want to use on the next page goes in to an array of structs. I haven't tried cacheput('formdata', form), but it seems like it would work.
Page 1
// Empty cache storage
cacheClear();
// call the function to cache data
cachePut('cData', data);
Page 2
// get items from the cache
data = cacheGet('cData');
Related
So I have one HTML page which consists of a bunch of form elements for the user to fill out. I push all the selections that the user makes into one global variable, allTheData[] inside my only Javascript file.
Then I have a 2nd HTML page which loads in after a user clicks a button. This HTML page is supposed to take some of the data inside the allTheData array and display it. I am calling the function to display allTheData by using:
window.onload = function () {
if (window.location.href.indexOf('Two') > -1) {
carousel();
}
}
function carousel() {
console.log("oh");
alert(allTheData.toString());
}
However, I am finding that nothing gets displayed in my 2nd HTML page and the allTheData array appears to be empty despite it getting it filled out previously in the 1st HTML page. I am pretty confident that I am correctly pushing data into the allTheData array because when I use alert(allTheData.toString()) while i'm still inside my 1st HTML page, all the data gets displayed.
I think there's something happening during my transition from the 1st to 2nd HTML page that causes the allTheData array to empty or something but I am not sure what it is. Please help a newbie out!
Web Storage: This sounds like a job for the window.sessionStorage object, which along with its cousin window.localStorage allows data-as-strings to be saved in the users browser for use across pages on the same domain.
However, keep in mind that they are both Cookie-like features and therefore their effectiveness depends on the user's Cookie preference for each domain.
A simple condition will determine if the web storage option is available, like so...
if (window.sessionStorage) {
// continue with app ...
} else {
// inform user about web storage
// and ask them to accept Cookies
// before reloading the page (or whatever)
}
Saving to and retrieving from web storage requires conversion to-and-from String data types, usually via JSON methods like so...
// save to...
var array = ['item0', 'item1', 2, 3, 'IV'];
sessionStorage.myApp = JSON.stringify(array);
// retrieve from...
var array = JSON.parse(sessionStorage.myApp);
There are more specific methods available than these. Further details and compatibility tables etc in Using the Web Storage API # MDN.
Hope that helps. :)
I have a co worker who asked me for help but I wasn't able to. Essentially he has created a page with pure java script that has a div element and child div elements. Each one of those child div elements have a form. He wants to be able to save all that hierarchical data in a text file whether or not it is in json / html in which he can load it later on without having to process it manually again. That way the next time the person loads the page, they are greeted with all the same information and div elements.
So essentially when you load the page again, you are able to simply dump the json / html into the DoM and it will automagically work. He's been on it for 2 days now, I thought I would ask you guys for some help or at least lead me on the right path.
Doing so would take three steps:
Get all the form data values from the DOM (a simple matter of knowing how to access HTML forms and putting them into an object)
Save the form data object into localStorage or on server (saving on the server would only work if you save some identifying information about the user, like if they are logged in, or their IP address)
On form load, check for saved data (on localStorage or server) and load it into the forms.
You can get the data of all forms into a JSON object like so:
function getAllFormsData(){
var formsData = {}
for(var i=0;i<document.forms.length;i++){
var form = document.forms[i],
name = document.forms[i].name;
formsData[name] = {}
for(var j=0;j<form.elements.length;j++){
var element = form.elements[j];
if(element.type=="submit") continue;
formsData[name][element.name] = element.value;
}
}
return formsData;
}
so formsData is a JSON object that contains properties for each form (by its name, but you can use ID if you prefer) on the page, and the value of each of those properties is an object containing the name and value of each input element (unless it's a submit type element).
Saving the data can be triggered either by the user clicking a "Save" Button on the page, or by using the window.onunload event. (If you are using localStorage, you can also set the saving function inside a setInterval that triggers every 30 seconds or whatever.)
localStorage is pretty straightforward (with a really easy API), but only allows string values. If you want to load a whole object into it instead of having to loop through and save each value, you can use a library. I have found store.js to be very useful and straightforward, and it serializes data for you so you don't need to mess with JSON.parse or JSON.stringify.
So, using the library, the save function would boil down to something as simple as:
function saveAllFormsData(){
var data = getAllFormsData();
for(var formName in data)
store.set(formName, data[formName]);
}
And on load, you can call this function:
function restoreAllFormsData(){
var forms = document.forms;
for(var i=0;i<forms.length;i++){
var form = forms[i];
if(store.get(form.name)){
for(var j=0;j<form.elements.length;j++){
var element = form.elements[j];
if(element.type=="submit")
continue;
element.value = store.get(form.name)[element.name];
}
}
}
}
I suggest looking into HTML5 local storage. This will allow you to save form data on the client, which can be used for repopulation when necessary.
Alternatively, you could also set a cookie on the client. However, this method has drawbacks that are discussed in the aforementioned document.
Either approach will likely require you to stringify any HTML before storage, due to the key:value nature of these data storage methods.
Hello I have a small website where data is passed between pages over URL.
My question is can someone break into it and make it pass the same data always?
For example let say, when you click button one, page below is loaded.
example.com?clicked=5
Then at that page I take value 5 and get some more data from user through a form. Then pass all the data to a third page. In this page data is entered to a database. While I observe collected data I saw some unusual combinations of records. How can I verify this?
yes. as javascript is open on the website, everyone can hack it.
you will need to write some code on you backend to validade it.
always think that you user/costumer will try to hack you sytem.
so take precautions like, check if user is the user of the session, if he is logged, if he can do what he is trying to do. check if the record that he is trying get exists.
if u are using a stand alone site, that u made the entire code from the ashes, you will need to implement this things by yourself.
like using the standard php session, making the data validation etc.
or you can find some classes that other people have made, you can find a lot o this on google. as it is a common problem of web programing.
if u are using a backed framework that isnt from another world, probably already has one. sp, go check its documentation.
html:
<a id = 'button-one' name = '5'> Button One </a>
javascript:
window.onload = function() {
document.getElementById('button-one').onclick = function() {
changeURL(this.attributes.name.value);
};
};
function changeURL(data) {
location.hash = data;
}
In my case :
I have created a form and in the form there is a button and a combo box that contains the data (Say it page A). When I click on the button, all I wanted was to call page B to perform a second process. The syntax for calling the page B is :
bb.pushScreen('PageB.htm', 'PageB', {'Key': MyComboValue});
How do I after page after page B called B will capture and get the value of the "MyComboValue" being sent from page A ??
Regards,
Bertho
Firstly, this is available in bbUI 0.94 (next branch) just to make sure you're running the right build.
Now, the object you pass to the new page is available in the ondomready, and onscreenready functions, so you would do something like this:
onscreenready: function(element, id, passed_object) { }
There are several ways to achieve this:
Use cookies to save the data. Wouldn't recommend it much.
Use localStorage. Works for newer browsers, some browsers won't be able to enjoy it.
Pass the values as querystring parameters when doing the change of url.
I would go with the third option myself. If you're only using JavaScript and you're not using any server side programming language:
Attach an event to the button so that when clicked, it fetches the data and generates a querystring. Then: top.location = "http://something/PageB.htm?" + querystring;
On the Page B, read the querystring (top.location.href) and parse it to get the querystring. Use the values of the querystring to set whatever you want on your page.
If you require code or if I misunderstood, please tell and I will check right away!
EDIT: I just realized you tagged your question as using blackberry-webworks. I have never worked with it and thus I have no idea if my solutions make sense on it. Try to specify it on your question too if possible, or in the title :)
We're using a lot of YUI data tables to display data, and rather than using the built-in pagination we've done our own so we can paginate on the server side using AJAX without downloading the whole data set (which is often huge).
Whenever we use the data table's sorting funcionality, though, it will only sort the one page because from YUI's point of view that's the entire data set.
I need to be able to call an arbitrary function to reload the page data whenever the user tries to sort the data. I've looked into DataTable's sortFunction parameter and it's not ideal because it gets called multiple times (once for each row combination it needs) and I need to do it just once.
There are probably plenty of hacky ways I could do this, but what's the "nicest" way of going about this?
Ideally, you would sort on the server side.
when create the datatable, one of the config options is generateRequest (see this example: http://developer.yahoo.com/yui/examples/datatable/dt_bhm.html )
generateRequest is a meant to be a function which generates a URL which returns the correct data set with which to fill the table. You probably have this.
For me, whenever I click on the column header (to sort), it makes a new request to the server, getting the correct page of sorted data.
Why not write a custom function and close over a variable that tracks whether it's been called?
var hasBeenCalled = false;
function mySortFunction(){
if(!hasBeenCalled){
// do something
hasBeenCalled = true;
}
}
Then replace the sortFunction with that.