Develop Reference

Inputs inside Div class be grouped as JSON array [duplicate]

I haven't found a concrete answer as to whether this is possible, but it seems like it should be...
I would like to serialize all the input elements contained in a div. I can't use a form, because it would be nested within another form. I would then get the values and post them via ajax.
Here is the jsFiddle example I am playing with:
http://jsfiddle.net/9uyz5/
If I change the root to a it works as expected.
Thanks for your help.
I've modified the jsfiddle from this other question:
https://stackoverflow.com/a/1186309/25020

you need to serialize all the inputs inside your container, not the actual container itself. so:
$('div :input').serialize()

Try this, to get all.
$('#divID *').serialize()

this also works with
$('div :input').serializeArray()
:)

For serializing the contents of the div with a button, this will be the more efficient way as it doesn't traverse through the entire dom.
$(this).closest('div').find("input,select,textarea").serialize();
make sure to attach this with the button event and make sure to include event.preventdefault with the button so that it does not submit the primary form if the div is inside it.

Javascript/jQuery - how do I get a parent element from within multiple iframes?

I'm working within a setup that I have no control over:
Parent->Iframe->Iframe->My document
How do I access an element that is on the parent from within my document?
These are all on the same domain, so no cross-domain issues. I can do this with either straight up JS or jQuery.
I've been searching around, but haven't found any examples of someone trying to access an element on the top from the bottom through multiple iframes!
The solution, in case anyone else comes across this:
var p = $("#Viewport",window.top.document);
alert(p.attr('name'));

Just use window.top, like:
console.log(top.document.getElementById('someInputId').value);
Notice that window in implicit, so you can leave it off. Of course, you will have to change 'someInputId' to an input id on your top page to see if this works. Use .innerHTML instead of .value if you are testing against an Element that is not an input.

I believe you will be able to access this via window.parent, as thus:
window.parent.document.getElementById('target-element');

Passing Multiple Inner Child Node to Function

I need to pass the contents of an inside div to a function, for example myfun(string). I have tried using
myfun((this).children[0].innerHTML)
myfun((this).children[1].innerHTML)
myfun((this).children[0].children[0].innerHTML)
but none of those seem to work. I can't just pass the getElementById value because the function should be generic since it would be called by php on various <a> elements (ideally I think it should include the this. keyword).
Thanks for any help.

If you don't need it to work cross-browser, there's:
this.getElementsByClassName('label')[0]
This will fail in IE 8 and below.
If you're absolutely certain the HTML/DOM structure won't change, you could perhaps use:
this.nextSibling.children[0];
But this might have issues in browsers that consider textNodes as childNodes

in your function, "this" refers to the link, and can't be used.
a much cleaner solution would be to have myfunc know that it is going to receive an object which contains the text
javascript:
myfunc(obj){
alert(obj.childNodes[0].nodeValue);
}
html
click
<div id="target">target contents</div>

The object this will apply to the <a> tag that it calls. You need to call the parent div first and then select the children accordingly.
Try using this.parent.children[1].children[0].innerHTML

Try
this.parent.children[1].children[0].innerHTML
But you should really use dynamic IDs instead of this mess.

JQuery remove images

I'm curious if anyone knows why this piece of jQuery code doesn't remove the images?
var a = $('#tblMain').clone().remove('img');
The table is being selected. This is trying to take the table on the webpage and export to excel but I do not want the images to export.
Thank you,

Do it like this:
$("#tblMain").clone().find("img").remove();
EDIT: Okay, here's the problem:
selector: A selector expression that
filters the set of matched elements to
be removed.
http://api.jquery.com/remove/
The img in .remove('img') is to filter the set of items in the jquery object, NOT to find elements within the items themselves. In this case, the jquery object contains only one item, the cloned table. Therefore, .remove('img') removes nothing, since the jquery object does not contain any images (only images within items it contains).

I don't know what's happening behind the scenes, but you're referring to some variable called img whilst you most probably just want to select all img elements. In that case, you ought to use a selector as a string:
var a = $('#tblMain').clone().remove('img');
EDIT: .clone.remove does not seem to work indeed. I used this workaround which actually works:
.find('img').each(function() {$(this).remove()});

Changing an ID using JQuery

I'm trying to change the ID of an element here:
http://moemonty.com/chirp/CHIRP-JSON-test.html
By using this line:
$('.databaseID').attr('id', 'test');
I would like to change the id of this line to test, so I can proceed to put in a pre-fix via a string and a variable from JSON data. But for now, I just wanted to see if I could replace it with test at this line:
<li class="databaseID" id="np-44701">
Thanks in advance.

Yes, you can change the ID of an element with $().attr(). The code you give will work, but you should ensure that you only change one element:
$('li.databaseID:first').attr('id','test');
On the other hand, I'd urge you to think this through so you're sure that you really need to change the id of an element. I can't quite imagine the circumstance where it would be necessary.