Use Javascript to find text within DIV, insert into HTML form? - javascript

I'm currently working on a Safari Extension to create a printable form based upon information provided within a website. A custom CSS stylesheet wouldn't be ideal, instead I was hoping that it would be possible to do the following...
If I were to have the following DIV on page called name.html
<div id="name">John</div>
Is there a way of getting the contents of #name and passing it into a text field in another page called form.html? Ideally, avoiding server side scripts?

To retrieve the element's text (as in ALL the text, subnodes included):
var value = document.getElementById('name').textContent;
Then to assigned the text to the input field in another page:
document.getElementById('myField').value = value;
Of course that doesn't work across pages. If you don't want to use server-side code for this, one simple way of doing it would be to pass the code in a query string, redirect to your form page, and retrieve the variable from the query parameters. Which sounds simpler than it actually is, as you'd need a function to add a query parameter, another one to read a query parameter, and to be sure that everything is encoded and decoded properly.
Another - bad - alternative could be to use cookies via JavaScript.
Another - better but not yet widespread - alternative could to use the WebStorage API. (see localStorage and/or sessionStorage). This will require a modern browser supporting these APIs (for instance, Google Chrome, IE9, Firefox 4, etc...)
The embedded links will provide the missing parts.

Related

Getting access to the original HTML in HtmlUnit HtmlElement?

I am using HtmlUnit to read content from a web site.
Everything works perfectly to the point where I am reading the content with:
HtmlDivision div = page.getHtmlElementById("my-id");
Even div.asText() returns the expected String object, but I want to get the original HTML inside <div>...</div> as a String object. How can I do that?
I am not willing to change HtlmUnit to something else, as the web site expects the client to run JavaScript, and HtmlUnit seems to be capable of doing what is required.
If by original HTML you mean the HTML code that HTMLUnit has already formatted then you can use div.asXml(). Now, if you really are looking for the original HTML the server sent you then you won't find a way to do so (at least up to v2.14).
Now, as a workaround, you could get the whole text of the page that the server sent you with this answer: How to get the pure raw HTML of a page in HTMLUnit while ignoring JavaScript and CSS?
As a side note, you should probably think twice why you need the HTML code. HTMLUnit will let you get the data from the code, so there shouldn't be any need to store the source code but rather the information it is contained in it. Just my 2 cents.

pass variables to html page without using GET

I have a webpage on a raspberry pi. This page supports only HTML since I am using webIOpi. I can make use of python scripts and javascript.
When I link to this page hosted on the raspberry from outside I would need to pass some variables. but i do not want to put them in the URL as I would like to keep the URL clean.
Is there any other method i can use to pass values to this page using any of the above resources?
I don't know your markup, I got the same problem in a one-page-markup where content come and go (slide in and out) via javascript commands.
In my case I save some values in html attributes via javascript. This is a valid feature in HTML5, when you use a "data-" prefix for your value names (good explanation here) :
// Save it
element.setAttribute("data-foo", "bar");
// Get it
var foo = element.getAttribute("data-foo");
Note : reloading the page will unset the attributes ! ...but worked for me...

Opening a pre-existing entity without an ID

If a field called new_something on a form of entity Stuff is changed, I'm running a check to see if there's an instance of an entity of type Thing with corresponding value on its new_something_else field. This works perfectly.
Now, the customer'd like to to smack up the found, corresponding instance on the screen as well. Is there a smooth way to do that using the value of new_something or do I have to fetch the ID of the pre-existing entity and use it with redirection of the browser?
It seems to me like an ugly and unsupported approach but perhaps that's how it's supposed to be done in 4.0 - other suggestions are welcome.
I think you will need to retrieve the ID of the other record and use that to open the other entity.
However URL addressable forms is a supported option.

Passing the asp classic html as a string from client-side to server-side

I am having the next scenario (I can't change it). I have an classic asp page. In it, I have the asp code, the javascript code, and the VBscript code. When the user clicks the button confirm, the javascript function "confirm" is executed. In it, the page submits a form to itself.
What I want to accomplish is the next thing. Inside that javascript function confirm, I can easily get the web page html as a string. But what I want is to get that string in the VBScript part when the page processes the self-submit done. I have tried the next things:
Inserting in an asp input hidden control in the page, and load from JavaScript the needed string in that input. Afterwards I expected to get it in VBScript by Request("controlId/controlName"). But it fails me because the input hidden control can't have strings that large.
In the JavaScript confirm function, to load in a session variable in the string. But it looks like I can't write a client-side variable in a session variable.
To store through the JavaScript function a temporary file and passing it through a input file control. This I only have thought about it. Because i don't think that it is a good solution to store a temporary file in the client-side, and I still have the believe to find a better solution than this. Also I don't know exactly how to write files with JavaScript in the client-side.
I remember that I have tried all this, if I remember another thing that I tried, I will post it here.
I have slammed my face repeatedly against the desktop, but I can't find a solution to this. Any idea would be really helpful.
But it fails me because the input hidden control can't have strings
that large.
Use method="post" instead of method="get" in the form, and the data size is practically limitless. I.e. the limit changes from a few kilobyte to several megabyte.
But it looks like I can't write a client-side variable in a session
variable.
That is correct. The session variables only exist on the server side.
To store through the javascript function a temporary file and passing
it through a input file control.
That is a process in two steps, where each step in itself is generally impossible. You can't access the local file system using Javascript, and you can't set the file name of an input file control using Javascript.
So you want to get html page in your ASP using javascript?
Why do you want to do that. You can use your a form with a post method to send big string.

Is there a way to validate the HTML of a page after AJAX operations are performed on it?

I'm writing a web app that inserts and modifies HTML elements via AJAX using JQuery. It works very nicely, but I want to be sure everything is ok under the bonnet. When I inspect the source of the page in IE or Chrome it shows me the original document markup, not what has changed since my AJAX calls.
I love using the WC3 validator to check my markup as it occasionally reminds me that I've forgotten to close a tag etc. How can I use this to check the markup of my page after the original source served from the server has been changed via Javascript?
Thank you.
Use developer tool in chrome to explore the DOM : it will show you all the HTML you've added in javascript.
You can now copy it and paste it in any validator you want.
Or instead of inserting code in JQuery, give it to the console, the browser will then not be able to close tags for you.
console.log(myHTML)
Both previous answers make good points about the fact the browser will 'fix' some of the html you insert into the DOM.
Back to your question, you could add the following to a bookmark in your browser. It will write out the contents of the DOM to a new window, copy and paste it into a validator.
javascript:window.open("").document.open("text/plain", "").write(document.documentElement.outerHTML);
If you're just concerned about well-formedness (missing closing tags and such), you probably just want to check the structure of the chunks AJAX is inserting. (Once it's part of the DOM, it's going to be well-formed... just not necessarily the structure you intended.) The simplest way to do that would probably be to attempt to parse it using an XML library. (one with an HTML mode that can be made strict, if you're not using XHTML)
Actual validation (Testing the "You can't put tag X inside tag Y" rules which browsers generally don't care too much about) is a lot trickier and, depending on how much effort you're willing to put into it, may not be worth the trouble. (Because, if you validate them in isolation, you'll get a lot of "This is just a fragment" false positives)
Whichever you decide to use, you need to grab the AJAX responses before the browser parses them if you want a reliable test result. (While they're still just a string of text rather than a DOM tree)

Categories