Develop Reference

Accessing fields of an iframe with javascript

I read that the following should work in order to access the contents of an iframe with javascript:
document.getElementById("iframe_name").contentDocument
or
document.getElementyById("iframe_name").contentWindow.document
However, neither of those methods work for me. The iframe I am trying to access is a Google form that I created. It is a registration form that I created for my website. I want to do some calculation on some of the fields that the user types in then display it after the iframe. Accessing those fields using javascript is the best way I could think of. Why can't I access it? Is there maybe a better way to achieve my goal? Thank you.

You can't acces external page like google.com from your server.

What you have is correct. Here is a more complete sequence that should work cross-browser:
var ifr=document.getElementById("iframe_name");
var doc=ifr.contentWindow||ifr.contentDocument;
if (doc.document) doc=doc.document;
Update: as said in another answer, this won't work across domains (for example if you try to access google.com from mydomain.com).

I don't know what you wishing to do but maybe this will help you..
I used this to reload the frame
document.getElementById('graphFrame').contentDocument.location.reload(true);
you can see that the location attribute is related to the iframe.
Next, I am changing a div inside an Iframe like this.
top.frames["graphFrame"].document.getElementById('right_example');
So the top.frames is array of the page frames. then i am searching for a dom element which his ID is "right_example" then you can do what ever you want with that.

Blocking the UI using HTML and CSS

I'm writing a userscript. What I'm trying to do is really simple. I need to block the UI while the script does some background tasks. I saw this method in another SO question and I changed it a bit to suit me.
Check this fiddle. When you click on the button, it covers up the UI.
Now since this is gonna be used on a webpage, I need to inject the following HTML part to the webpage through the script.
<div id="blocker">
<div>Loading...<img src="http://www.socialups.com/static/images/fbinventory/ajax_loader.gif"></div>
</div>
I did it like this.
var blockUI = document.createElement("div");
blockUI.setAttribute("id", "blocker");
blockUI.innerHTML = '<div>Loading...<img src="http://www.socialups.com/static/images/fbinventory/ajax_loader.gif"></div>'
document.head.appendChild(blockUI);
Check this fiddle for a clear idea.
But it does not work. I tried several ways to tackle the problem but to no avail .Can anyone please point out what I'm doing wrong here?
Thank you.
P.S - I need to do this without using jQuery or the library blockUI.

You are trying to append stuff to head; append it to body instead.
http://jsfiddle.net/dAKQX/

Don't put the block div in the head section of your document. Use document.body.appendChild(blockUI); instead.

you need to append your div to the body of the document. See: http://jsfiddle.net/zkzQy/1/
or like this in your code:
document.body.appendChild(blockUI);

JSP, Javascript, getting ElementId within another Id

my question today revolves arround the world of javascript in a Websphere JSP environment...
I have a code that is somewhat like this:
<div id="randomDynamicId">
<input id="whatIwantToGetTo">
</div>
I know that I could just look for that id directly, but this is in a Websphere portal, I "should" be able to link to it directly by document.getElementById(), but I always need to acquire the id of the prior div.
(it ends up being the portlet id with the namespace and since sometimes these portlets might be replicated I want to target just one specifically)
Any way that I might be able to do this?
Thanks in advance.

As per your request I post my earlier comment as an answer, a little more elaborated: If the issue is that whatIwantToGetTo is not namespace-prefixed so that you end up with multiple elements with the same id on your page, you should rewrite your JSP to namespace all id attributes as well. This should probably be done anyway (if you can modify the HTML, that is), at the very least if there is a possibility of the portlet occurring more than once on any page!
However, seeing as you're on a WebSphere Portal 7, you most likely have Dojo around and you could leverage its CSS-style selector mechanism like so:
var inputElement = dojo.query('#randomId > input');

What you want is
document.getElementById ('whatIwantToGetTo').parentNode

If you can use jQuery, you can accomplish this like so:
var parent = $('#whatIwantToGetTo').parent();
See Here
The pure javascript alternative is something like this:
alert(document.getElementById('objectIWant').parentNode.id);
See here

jQuery FancyBox/Lightbox problem

i write some html with JS into a div.
like this
$("#picdiv").html("<a rel='lightbox' href='pic.jpg'><img src='htumb.jpg'></a>");
it is just an example.
So, i have in $(document).ready Funcktion this code.
$('a[rel=lightbox]').fancybox();
but if i click on the link, a get to the page with picture... i know the Problem must be, i write the html with js, but i have no other option. So haw can I make fancybox works?

This is due to how jQuery works. The fancybox function will only work for current elements on the page and not ones dynamically added by javascript.
A quick fix might be to be modify the code as follows:
$("#picdiv").append($("<a rel='lightbox' href='pic.jpg'><img src='htumb.jpg'></a>").fancybox());
Not sure if the above will work, but the general idea is to ensure that any new elements created have the plugin applied.

solution
$('.picture_display').find('a[rel=lightbox]').fancybox();

write html content from javascript

There's one thing I want to do with javascript, but don't know how. In a perfect world it would look like this:
<p>My very cool page!</p>
<script type="text/javascript">
document.write('<div>some content</div>');
</script>
And this script would insert <div>some content</div> right before (or after, or instead of) script tag. But in the real world, document.write starts writing html anew, removing any static content in the page (<p> tag, in this case).
This is simplified example, but should give you the idea. I know that I can statically put <div id="some_id"></div> before script tag and insert html in it from js, but I wanna be able to use multiple instances of this snippet without changing it (generating random id manually) each time.
I'm ok to use jquery or any other existing library as well. Is there any way to achieve this? Thanks!

We are actually in that perfect world...
and your example would work as it is ..
http://www.jsfiddle.net/BtKGV/

Yes, but you always add or write it in relation to something else.
If you wanted to write something AFTER the first p tag, in jQuery, you could do something liek this
$('p:first').after( '<div>some content</div>' );
If you look at jQuery's API you will see they have many functions for this, such as before, after, append, etc.

You also might want to read about adding and removing elements to/from the DOM, such as in this article:
http://www.dustindiaz.com/add-remove-elements-reprise/

look up appendChild()

To close the question, here's how it has worked out in the end.
The trick was to store each widget's data in html tag, not in javascript. User inserts content like this
<div class="my_widget" feed_id="123"></div>
...
<div class="my_widget" feed_id="456"></div>
User also links script from our server. When page's loaded, script does $('div.my_widget').each and populates contents of each widget depending on its feed_id and other attributes.
Thanks to everyone (and +1 to Gaby and Kerry for attempts to help with such vague problem)