Save textbox as cookies with javascript and print result - javascript

I am new to JavaScript and I need one simple solution.
How to save two text box from first html page, and show it in another html page.

Use localStorage: http://jsfiddle.net/usNwP/. localStorage is an object of which the values persist among pages on the same domain (so also after reloading, navigating or even rebooting the computer).
document.getElementById('save').onclick = function() {
// save values into localStorage
localStorage['input1'] = document.getElementById('input1').value;
localStorage['input2'] = document.getElementById('input2').value;
};
// load textboxes from localStorage (can be on another page)
document.getElementById('input1').value = localStorage['input1'] || "";
document.getElementById('input2').value = localStorage['input2'] || "";

All you need to know about using cookies with JavaScript:
http://www.quirksmode.org/js/cookies.html
A few practical functions to interact with cookies easier (for example set a cookie in one page, get a cookie in another):
http://www.w3schools.com/js/js_cookies.asp

Related

Temporarily preserve changes with javascript in a cookie

I am trying to do a proof of concept and wrote a function that replaces values and styles in my current webpage with JavaScript
example;
const headerColor = document.getElementById("topheader");
headerColor.style.backgroundColor = 'white';
headerColor.style.background = 'none';
I am wondering if I can save all these in a cookie or so in order to create a demo with those styles throughout a checkout process.
For example, I am temporarily replacing the header of a page with JavaScript and would like to preserve that in a cookie for the remainder of the session.
Is this possible?

How to read an attachment content into an array or String by clicking a button on XPage?

I have an XPage with an File Upload/Download control that shows my attachments. I need to read a content of first file attachment (name not known/random) into a string var or array by clicking a button.
I am not sure if XMLHttpRequests() can work on XPage or if there is an standard XPages control to do that?
I do need just to read content. (Users don't need to interact with attachment directly (select/save/other UI actions)).
You need to clarify what "first" means: oldest, attached first, first in alphabet? Domino doesn't guarantee a sequence. You can use #AttachmentNames in an evaluate statement. You then get use that name to directly access that attachment from your browser using a rest call using this syntax:
http(s)://[yourserver]/[application.nsf]/[viewname|0]/[UNID| ViewKey]/$File/[AttachmentName]?Open
More details are in this blog entry.
If you want to handle that on the server side then you use document.getAttachment().
Working example:
importPackage(java.net);
importPackage(java.io);
var valString:String = "";
var nrt:NotesRichTextItem=document1.getDocument().getFirstItem('Body');
if (nrt!=null){
var eos:java.util.Vector = nrt.getEmbeddedObjects();
if (!eos.isEmpty()) {
var eo:NotesEmbeddedObject = eos.get(0);
var inputReader:BufferedReader = new BufferedReader(new InputStreamReader(eo.getInputStream(), "UTF-16"));
while ((inputLine = inputReader.readLine()) != null) {
valString+=inputLine + "<br>";
}
if (inputReader != null){inputReader.close();}
eo.recycle();
}
}
return valString;

Pull in random html page

I have a comic website www.twistedshotgun.com and it has a random button with some javascript someone made for me. I now need something that is easier to update.
I need the random button to choose a random html page, but I dont want to manually add each webpage to each html page, because as I make more pages it means changing every single individual page that has a random button to add the new content.
So is there a way to have an external file that lists all the random pages in one file so I can just update that?
I do not know javascript but this is my current code, but this is on every page:
<script type="text/javascript">
//INDEX VERSION ONLY
//pages (use full url if in a different domain);
var page1 = "comics/101/longbear.html";
var page2 = "comics/102/do_bees_pump.html";
var page3 = "comics/103/how_I_feel_on_a_daily_basis.html";
var page4 = "comics/104/windows_8 _space oddity.html";
//array (add all the pages inside [])
var pages = [page1,page2,page3,page4];
function showRandomPage()
{
var num = Math.round(Math.random() * (pages.length-1));
window.location.href=pages[num];
console.log(num);
};
To keep the information about the random pages between sessions, store the list of the random pages in a database and access the database whenever you want to get to the random URL.
Another possibility is to store the list in Javascript, in an external file (depending on how long it is).
Since the pages are all in different directories, there is no need or benefit to them having different names, and as you'll see there's a lot of benefit in them being the same, so I recommend renaming your page files to the same name, which might as well be simply index.html.
If your pages have the same name, your random selection script becomes very simple:
<script type="text/javascript">
function showRandomPage() {
var num = 100 + Math.round(Math.random() * 4);
window.location.href = "comics/" + num + "/index.html";
console.log(num);
};
</script>
If you number your directories sequentially from 100 on up (not skipping any numbers), all you need to do to maintain your code is increase the 4 in the code to whatever is quantity of pages you have.
put your random generating page java script in a file with extension .js , say pagedatabase.js
now in your html page where you want to call the function
place this code above it.
<script src="pagedatabase.js"></script>
it should work. id did for me. i too had the same problem with big database of header scripts.
keep in mind that the script call and the function call should be in the same region. do not place one in the head and other in the body. your html editor will give an error.

Saving without dialog window

I'm trying to write a script that will automate a bunch of stuff for Photoshop CS5. Part of this involves saving a bunch of files. Is there a way to save a file in a way that doesn't open up a dialog window? I've been looking over the JavaScript Tools Guide, but I didn't see a way to do this. This suggested I used an action to deal with it but I'd really prefer not to do that.
EDIT: specifically I want to save the files as crytiff format but I'd just like to know how to save a file with whatever extension I want
The following saves the active document as PNG. You can change the type to save it as.
// reference open doc
var doc = app.activeDocument;
// set save options
var opts = new ExportOptionsSaveForWeb();
opts.PNG8 = false;
opts.transparency = true;
opts.interlaced = false;
opts.quality = 100;
opts.includeProfile = false;
opts.format = SaveDocumentType.PNG; // Document Type
// save png file in same folder as open doc
activeDocument.exportDocument(doc.path, ExportType.SAVEFORWEB, opts);
Try using Document.saveAs(). But, like El Cas said, you still have to pass in some kind of SaveOptions object. You don't necessarily have to specify all the options if you don't want. You can just use the generic object like this:
app.activeDocument.saveAs(new File(doc.path + "/myDocument"), TiffSaveOptions);
// or BMPSaveOptions or GIFSaveOptions or JPEGSaveOptions...
Here's a much more complete Photoshop CS5 Javascript Reference
Open:
Windows > Actions
You will find Toggle Dialog On/Off check box before every action. Turn it off.

Is robust javascript-only upload of file possible

I want a robust way to upload a file. That means that I want to be able to handle interruptions, error and pauses.
So my question is: Is something like the following possible using javascript only on the client.
If so I would like pointers to libraries, tutorials, books or implementations.
If not I would like an explanation to why it's not possible.
Scenario:
Open a large file
Split it into parts
For each part I would like to
Create checksum and append to data
Post data to server (the server would check if data uploaded correctly)
Check a web page on server to see if upload is ok
If yes upload next part if no retry
Assume all posts to server is accompanied by relevant meta data (sessionid and whatnot).
No. You can, through a certain amount of hackery, begin a file upload with AJAX, in which case you'll be able to tell when it's finished uploading. That's it.
JavaScript does not have any direct access to files on the visitor's computer for security reasons. The most you'll be able to see from within your script is the filename.
Firefox 3.5 adds support for DOM progress event monitoring of XMLHttpRequest transfers which allow you to keep track of at least upload status as well as completion and cancellation of uploads.
It's also possible to simulate progress tracking with iframes in clients that don't support this newer XMLHTTPRequest additions.
For an example of script that does just this, take a look at NoSWFUpload. I've been using it succesfully for about few months now.
It's possible in Firefox 3 to open a local file as chosen by a file upload field and read it into a JavaScript variable using the field's files array. That would allow you to do your own chunking, hashing and sending by AJAX.
There is some talk of getting something like this standardised by W3, but for the immediate future no other browser supports this.
Yes. Please look at the following file -
function Upload() {
var self = this;
this.btnUpload;
this.frmUpload;
this.inputFile;
this.divUploadArea;
this.upload = function(event, target) {
event.stopPropagation();
if (!$('.upload-button').length) {
return false;
}
if (!$('.form').length) {
return false;
}
self.btnUpload = target;
self.frmUpload = $(self.btnUpload).parents('form:first');
self.inputFile = $(self.btnUpload).prev('.upload-input');
self.divUploadArea = $(self.btnUpload).next('.uploaded-area');
var target = $(self.frmUpload).attr('target');
var action = $(self.frmUpload).attr('action');
$(self.frmUpload).attr('target', 'upload_target'); //change the form's target to the iframe's id
$(self.frmUpload).attr('action', '/trnUpload/upload'); //change the form's action to the upload iframe function page
$(self.frmUpload).parent("div").prepend(self.iframe);
$('#upload_target').load(function(event){
if (!$("#upload_target").contents().find('.upload-success:first').length) {
$('#upload_target').remove();
return false;
} else if($("#upload_target").contents().find('.upload-success:first') == 'false') {
$('#upload_target').remove();
return false;
}
var fid = $("#upload_target").contents().find('.fid:first').html();
var filename = $("#upload_target").contents().find('.filename:first').html();
var filetype = $("#upload_target").contents().find('.filetype:first').html();
var filesize = $("#upload_target").contents().find('.filesize:first').html();
$(self.frmUpload).attr('target', target); //change the form's target to the iframe's id
$(self.frmUpload).attr('action', action); //change the form's
$('#upload_target').remove();
self.insertUploadLink(fid, filename, filetype, filesize);
});
};
this.iframe = '' +
'false' +
'';
this.insertUploadLink = function (fid, filename, filetype, filesize) {
$('#upload-value').attr('value', fid);
}
}
$(document).ready(event) {
var myupload = new Upload();
myupload.upload(event, event.target);
}
With also using PHP's APC to query the status of how much of the file has been uploaded, you can do a progress bar with a periodical updater (I would use jQuery, which the above class requires also). You can use PHP to output both the periodical results, and the results of the upload in the iframe that is temporarily created.
This is hackish. You will need to spend a lot of time to get it to work. You will need admin access to whatever server you want to run it on so you can install APC. You will also need to setup the HTML form to correspond to the js Upload class. A reference on how to do this can be found here http://www.ultramegatech.com/blog/2008/12/creating-upload-progress-bar-php/

Categories

Resources