Develop Reference

"javascript:" uri protocol replaces whole page with text

So, I was trying to make a javascript: link with some code like a="foo". I tried using javascript:a="foo" but it didn't work. Instead of changing the var a to "foo" it replaces the whole page with foo like document.write for some reason.
I also tried encoding the URI, but neither javascript:a%3D%22foo%22 nor javascript:%61%3D%22%66%6F%6F%22 work.
Since calling functions like javascript:alert("Hello World!") work, I ran javascript:a=String("foo"), without any luck either. Using javascript:var%20a="foo" does work, though, as well as javascript:a=123, but it won't work for me because my final goal is to change a property in an object.
Is there any way to avoid this?

Setting variables inline inside DOM attributes is not good practice, but if you have to:
Link
or
Link

How to run on the page typed js

I'm currently working on a project which requires me to run by the user typed javascript in the form of a string.
I've tried adding an empty <script> tag to the html and appending the string (containing the users freshly typed (after the page was loaded) javascript) to this script tag but this doesn't work. (since the code inside the script tag will be run immediately after the page is loaded).
So I tried a different approach. I wrapped the js string inside of a function like so:
function runCode() { userString }
This is what the string I now append to the empty script tag looks like:
var code = "function runCode() { "+ userString +" }"
However this still doesn't work. The code (userString) shows up in the script tag according to the chrome dev tools, but trying to run the function causes the following error:
Uncaught ReferenceError: runCode is not defined
Does somebody know how this works? What is the proper way for me to do this?
Some background:
The project I'm working on is an online tool to draw using js. The goal here is to use the two.js library and link it to a modified textarea. (codemirror) Clicking the button will take your typed in code and use it to modify the two.js canvas on the other half of the screen.
This will make it easier to draw using the library, since you don't have to set up all the html, css and js files yourself, but instead you can focus on the code.
Note: The js you type into the textarea can by any valid js, so simple things as alerts, or even jQuery lines will work just fine.

Use eval() function.
However be aware that this is by design a HUGE hole of security.

You have to use eval(). Extract the user input from an onclick event and pass it into eval like so:
eval(userString)

IE limits to 2083 chars when using get method to call a javascript function

I'm trying to pass a long string of xml to a javascript function. Currently the call works something like this, I have an xsl file that generates the html code and in the code it generates a link that does this.
My Link
I know that using the post method would get around the limit by IE of 2083 characters but am not sure on the best way to go about it.

It's possibly due to IE's URL length limit, which is affecting you because the script is in the href attribute. You could try changing it to:
My Link
You may need to return false from your function and/or do some other stuff in order to prevent the default click event.
Alternatively you can move your Javascript out into a separate area and bind a function to the onclick property of the link from there.

This post my help you
http://bytes.com/topic/javascript/answers/790925-overcomming-ies-2083-byte-url-restriction

Parsing HTML Response in jQuery

My page needs to grab a specific div from another page to display within a div on the current page. It's a perfect job for $.load, except that the HTML source I'm pulling from is not necessarily well-formed, and seems to have occasional tag errors, and IE just plain won't use it in that case. So I've changed it to a $.get to grab the HTML source of the page as a string. Passing it to $ to parse it as a DOM has the same problem in IE as $.load, so I can't do that. I need a way to parse the HTML string to find the contents of my div#information, but not the rest of the page after its </div>. (PS My div#information contains various other div's and elements.)
EDIT: Also if anyone has a fix for jQuery's $.load not being able to parse response HTML in IE, I'd love to hear that too.

If the resource you are trying to load is under your control, your implementation spec is poorly optimized. You don't want to ask your server for an entire page of content when you only really need a small piece of that content.
What you'll want to do is isolate the content you want, and have the server return only what you need.
As a side note, since you are aware that you have malformed HTML, you should probably bite the bullet and validate your markup. That will save you some trouble (like this) in the future.
Finally, if you truly cannot optimize this process, my guess is that you are creating an inconsistency because some element in the parsed HTML has the same ID as an element on your current page. Identical ID's are invalid and lead to many cross-browser JavaScript problems.

Strictly with strings you could use a regular expression to find the id="information" tag contents. Never parse it as html.
I'd try the $.load parameter that accepts a html selector as well
$('#results').load('/MySite/Url #Information');

Can you insert a form onto a page using jQuery's $.load() function?

I have a page where there's a drag and drop table where the order of the rows determines the value of a subtotal. However, it's more complicated than just addition and I would rather not duplicate the logic in JavaScript to update the values.
A simple solution would be to reload the whole page using Ajax and then replace the table from the page fetched via Ajax. Perhaps it's not the most elegant solution but I thought it'd be a quick way to get the job done that would be acceptable for now.
You can do that with jQuery like this:
$('#element-around-table').load(document.location.href + ' #table-id');
However, my "simple" solution turned out to not be so simple because the table also contains a <form> tag which is not being displayed in Firefox (Safari works).
When I inspect the page using Firebug, I see the form, but it and its elements grayed out.
Searching on the web, I found a rather confused post by a guy who says FF3 and IE strip <form> tags from innerHTML calls.
I'm probably going to move on to do this some other way, but for my future reference, I'd like to know: is this the case?

That post is rather confused, I just tested your code and it worked fine. The form tag was shown in firefox 3.0.8 just fine.
Looking at you code example, though I wonder if you just gave an incomplete example... make sure that the page you call returns only the html that goes inside that wrapper element.

I've run into this type of thing before. FORM tags need to be added to the DOM. If they're added using a method that writes to innerHTML, the tag will appear, but it won't be there as far as JavaScript is concerned.