This is kinda hard to word so i'm hoping you understand it:
I have an entire page in a variable. I need to be able to do getElementsByClassName on it. But how?
I've tried:
$.get( base_url, function( data ) {
var something = data.getElementsByClassName('.user_name');
});
If your URL returns HTML, data is a string. Since you're using jQuery, you can have jQuery parse it for you:
var dom = $(data);
Then you can use all the usual jQuery methods on that disconnected set of elements, so:
var userNames = dom.find(".user_name");
If you weren't using jQuery, you could have the browser parse that into elements for you:
var div = document.createElement('div');
div.innerHTML = data;
...and then use use DOM methods on that disconnected div. I wouldn't use getElementsByClassName, though; querySelectorAll has better support; basically, it's in all modern browsers and also in IE8, but IE8 doesn't have getElementsByClassName.
var userNames = div.querySelectorAll(".user_name");
You are mixing pure javascript with JQuery
Try this
data.getElementsByClassName('user_name');
instead of
data.getElementsByClassName('.user_name');
Related
I want to know if there is a way to getElementByClassName("classname").innerHTML function or something to the equivalent of getElementById("ClassName").innerHTML.
You are missing an s in your function name. getElementsByTagName returns a collection of elements, of elements, which you need to iterate over:
var elements = document.getElementsByClassName("classname");
for (var i = 0; i < elements.length; i++) {
elements[i].innerHTML = 'foo';
}
IE8 and below don't support getElementsByClassName, so you'll have to find a polyfill or use querySelectorAll (IE8).
I suggest you to use JQuery, where you can use directly CSS selectors (like .yourclass) to find all elements of a given class:
$('.yourclass').doWhatYouWant();
If you prefer not to use JQuery, you can use plain Javascript:
document.getElementsByClassName('my-fancy-class')
But be careful with IE8 incompatibility issue.
As an alternative (slower but you can build more complex CSS selectors) you can use:
document.querySelector('.cssSelector')
Which will return one element responding to your CSS selector, or
document.querySelectorAll('.cssSelector')
Which will return multiple elements instead.
You can do this using jquery
$('.className').html();
http://api.jquery.com/html/
If tou use jQuery you can get it as you would in a CSS selector so:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
then...
$('.classname').each(function() {
// get html
$(this).html();
// set html
$(this).html('something');
});
Notice you have also convenient way to manage innerHTML.
I have several dynamically created elements on a page that I would like to POST the contents using jQuery to another page. The problem is, the elements created cannot be accessed via jQuery (only elements that existed on the page can be accessed using the $(#myElementID).
I've seen hundreds of posts using the live() and on() functions for accessing EVENTS, but no way to access any properties, values, innerHTML, etc, of the dynamically created ELEMENTS.
Is this simply not possible to do with jQuery?
$('#btnParseTable').click(function () {
var tblCustomPattern = $("#tblCustomPattern").innerHTML;
//This test alert yields "" because tblCustomPattern is undefined - yet FireBug clearly shows the table exists!
alert(tblCustomPattern);
var postData = { "method": "ParseTable", "tbl": tblCustomPattern };
$.post("tiler.aspx", postData, function (data) {
$("#test").html(data); //for testing
});
});
If not supported by jQuery, can this be done in JavaScript or is it not possible to post back information that is NOT an "INPUT" element?
This test alert yields "" because tblCustomPattern is undefined -
yet FireBug clearly shows the table exists!
You can assess dynamically created element after they being added to DOM. tblCustomPattern is undefined because jQuery object does not have attribute innerHTML You need DOM element to use innerHTML but the selector will return you jQuery object. You can use indexer [] or [get()][1] to get html element from jQuery object. It is zero-based index and you will get first element at zero index.
var tblCustomPattern = $("#tblCustomPattern")[0].innerHTML;
OR, using .get()
var tblCustomPattern = $("#tblCustomPattern").get(0).innerHTML;
OR using html()
var tblCustomPattern = $("#tblCustomPattern").html();
In this part of your code, you have a problem:
$("#tblCustomPattern").innerHTML;
The issue is that $("#tblCustomPattern") is a jQuery object. It is not a DOM object. The jQuery object does not have a property .innerHTML.
So, to fix your issue, you have several choices:
You can get the DOM element out of the jQuery object and then use the .innerHTML property on the DOM object directly.
You can use the jQuery method for this same functionality by called the jQuery .html() method.
You don't even really need jQuery for this at all, so you can just use plain JS.
So, any of these will work:
// get the first DOM object from the jQuery object
// two different methods for doing that
var tblCustomPattern = $("#tblCustomPattern")[0].innerHTML;
var tblCustomPattern = $("#tblCustomPattern").get(0).innerHTML;
// use the jQuery method to get the HTML
var tblCustomPattern = $("#tblCustomPattern").html();
// use plain JS - fastest option
var tblCustomPattern = document.getElementById("tblCustomPattern").innerHTML;
In my javascript, I have a function which will return an element present in the HTML page .i have this stored in a variable and now want to do some kind of traversal in that using jquery methods like parent/fadeIn/fadeOut etc.
How can i do that.? My current code which returns the object is
var currentObject= GetThatObject();
Now i really want to play with this object like what we do with a typical jQuery object which we get like
var curObj=$("#tatElement")
You just do this:
var curObj = $(currentObject);
jQuery can take not only selector strings but HTML elements as arguments as well. It will just take that element, wrap it in its jQuery object and you can then use it the same way as if you had used a selector string. (It is actually a little more efficient because jQuery doesn't have to parse the selector and find the element).
My Ajax functions gives me HTML-Elements as String back, and this String I want to append in my Document as DOM Element.
Something like
parentNode.appendChild(responseText);
What will be the best way to do this.
parentNode.innerHTML += responseText;
you can use innerText to do it
There can be more possible cases. You should clarify a bit.
If you get a string that should be an object and it's not existing yet, then you should use this: var tempObj = document.createElement("yourString"); then you can just use tempObj to handle it.
If you get a string that is the name or ID of an existing object, then use: var tempObj = document.getElementByName("yourString");
or
var tempObj = document.getElementById("yourString");
You can use the DOM methods this library provides, for example the insert() or update() method:
$('parentId').insert(yourString);
or
$('parentId').update(yourString);
http://api.prototypejs.org/dom/element/insert/
http://api.prototypejs.org/dom/element/update/
Note that innerHTML is not standarized yet, so using prototype, you can be sure those methods are cross browser compatible.
Good luck!
The simple way for converting String to DOM and vice versa is presented on this link:
http://famulatus.com/ks/programming/java/item/335-convert-xml-dom-to-string-and-string-to-xml-dom.html
I'm trying to retrofit a page to read from XML rather than the DOM, and I'd rather not use $(xml).find('blah') for every single call, and I was wondering if there was a way to point jQuery at xml, rather than the DOM.
For instance, I'd like to be able to navigate my xhtml with the jQuery method as such:
$('blah').whatever
Is this possible?
No, you cannot redirect the global document object to point to an arbitrary DOM document you've created.
jQuery has given you the context argument to the $() function for exactly this purpose, so you should just use that:
$('blah', xmlDoc).whatever()
Or you can store it in a var to reduce repetition if you like, and traverse downwards from there:
var $xml = $(xmlDoc);
$xml.find('blah').foo();
$xml.find('bloh').bar();
It's a bit dodgy but you could override the $ function:
var old$ = $;
var xml = ...;
$ = function(arg)
{
return old$(arg, xml);
}
I think that should work... maybe...
If you're using a method like jQuery.ajax() or jQuery.get() to retrieve the DOM from another page, just change/set the return type from "json" to "xml".
http://docs.jquery.com/Ajax/jQuery.ajax#options (scroll down to "dataType")