Develop Reference

jQuery Regex Selector Plugin not Working

Question. I've tried to add this old jQuery Regex Selector plugin but it doesn't seem to give me back the right tag. At least, it says undefined when I try to return any info on it. I hope to use this someday for a game so I can select dynamic tags and things like all the foreground elements.
$('#button').click(function() {
var elm = $('img:regex(data:extension, png)');
elm.each(function() { alert($(this).attr('alt')); });
});
But all I get back is undefined when I alert the elm I get back [object Object]
JSFiddle

From the documentation you linked to: (emphasis mine)
Additionally it allows you to query data strings added to elements via jQuery’s ‘data’ method:
// Add data property to all images (just an example);
$('img').each(function(){
$(this).data('extension', $(this)[0].src.match(/\.(.{1,4})$/)[1]);
});
// Select all images with PNG or JPG extensions:
$('img:regex(data:extension, png|jpg)');
You would need to run both parts of that code, not just the second part. Your image in your example does not have a data attribute.
--EDIT--
Also, you don't need regex to get this functionality, just do this:
var elm = $('img[src$=png]');
Here's a fiddle

In IE 7, how can you get the literal value of a link’s href attribute, if the link was created using jQuery?

If you have a regular link in HTML, you can get the value of its href attribute using jQuery’s attr function:
<a id="testLink" href="test/link.html">Test Link</a>`
>>> $('#testLink').attr('href');
testLink.html
Example:
http://jsfiddle.net/63RsQ/1/
However, if the link was created using jQuery, then in IE 7, this function returns the absolute URL that the browser would access if you clicked on the link (e.g. https://stackoverflow.com/questions/ask/testLink.html), instead of the literal value of the href attribute.
Example:
http://jsfiddle.net/xtrEB/10/
I’ve also tried this, this.href, and this.getAttribute('href'), and they all return an absolute URL.
Is there any way to get the literal value of the href attribute of a link created by jQuery in IE 7?

If you are creating the link in a way that jQuery is forced to use .innerHTML, it will work not properly and is documented in: http://api.jquery.com/html/ (also http://api.jquery.com/jQuery/#creating-new-elements) :
This method uses the browser's innerHTML property. Some browsers may
not generate a DOM that exactly replicates the HTML source provided.
For example, Internet Explorer prior to version 8 will convert all
href properties on links to absolute URLs, and Internet Explorer prior
to version 9 will not correctly handle HTML5 elements without the
addition of a separate compatibility layer.
To fix it, create the link in a way that doesn't force jQuery to use .innerHTML:
$('#test').append( $("<a>", {href: "test/link.html", text: "Test Link"}));
http://jsfiddle.net/xtrEB/12/

I think it's not possible, at least not in IE7. JQuery uses innerHTML, and IE seems to rewrite the href attribute to a Fully Qualified Domain Name (FQDN) on rendering (earlier versions of IE are known to do so). So the literal value is lost on rendering. If you know the path, you could try to find it using some string eqation, stripping the domain from the url or something. Or forget about IE<8 alltogether if possible.
May be this article sheds some light
If you use plain javascript and DOM-methods to add elements, you can retrieve the literal value even in IE7. See this jsfiddle

try this:
$('a').click(function () {
var hrf = this.href;
alert('this.href: \n' + hrf.slice(hrf.lastIndexOf('/')+1, hrf.length) );
return false;
});
http://jsfiddle.net/xtrEB/5/

Is there a JQuery tooltip plugin that supports HTML content and automatically positions tooltips?

I am searching for a Tooltip plugin/library for JQuery. It should be able to automaticlly position tooltips, like TipTip, and also support HTML content for the tips.
TipTip does fullfill both conditions, but:
Added HTML support with Tip Tip. You can now add HTML into the Title attribute (though this is not recommended if you want strictly valid code).

I believe this one does. For instance, this demo shows an image. You could easily have a bodyHandler that retrieves the HTML from an attribute on the element. For instance
foo
That's perfectly valid HTML, and the bodyHandler would look something like
return this.attr("data-tooltip"));

I didn't want to leave jquery native plugin and mess with additional libs, so I figured out quite simple solution:
$('.tooltips').tooltip({
content: function(){
return $(this).attr('title');
}
})
This way - your title attribute with HTML may be used successfully.

I like TipTip a lot. The "title" field usage is awkward, but you don't have to do that:
content: string (false by default) - HTML or String to use as the content for TipTip. Will overwrite content from any HTML attribute.
(via http://code.drewwilson.com/entry/tiptip-jquery-plugin)

This tooltip widget included in the jQuery UI library supports different automatic positions and HTML in the title attribute: http://api.jqueryui.com/tooltip/

What exactly can cause an "HIERARCHY_REQUEST_ERR: DOM Exception 3"-Error?

How exactly does it relate to jQuery? I know the library uses native javascript functions internally, but what exactly is it trying to do whenever such a problem appears?

It means you've tried to insert a DOM node into a place in the DOM tree where it cannot go. The most common place I see this is on Safari which doesn't allow the following:
document.appendChild(document.createElement('div'));
Generally, this is just a mistake where this was actually intended:
document.body.appendChild(document.createElement('div'));
Other causes seen in the wild (summarized from comments):
You are attempting to append a node to itself
You are attempting to append null to a node
You are attempting to append a node to a text node.
Your HTML is invalid (e.g. failing to close your target node)
The browser thinks the HTML you are attempting to append is XML (fix by adding <!doctype html> to your injected HTML, or specifying the content type when fetching via XHR)

If you are getting this error due to a jquery ajax call $.ajax
Then you may need to specify what the dataType is coming back from the server. I have fixed the response a lot using this simple property.
$.ajax({
url: "URL_HERE",
dataType: "html",
success: function(response) {
$('#ELEMENT').html(response);
}
});

Specifically with jQuery you can run into this issue if forget the carets around the html tag when creating elements:
$("#target").append($("div").text("Test"));
Will raise this error because what you meant was
$("#target").append($("<div>").text("Test"));

This error can occur when you try to insert a node into the DOM which is invalid HTML, which can be something as subtle as an incorrect attribute, for example:
// <input> can have a 'type' attribute
var $input = $('<input/>').attr('type', 'text');
$holder.append($input); // OK
// <div> CANNOT have a 'type' attribute
var $div = $('<div></div>').attr('type', 'text');
$holder.append($div); // Error: HIERARCHY_REQUEST_ERR: DOM Exception 3

#Kelly Norton is right in his answer that The browser thinks the HTML you are attempting to append is XML and suggests specifying the content type when fetching via XHR.
It's true however you sometimes use third party libraries that you are not going to modify. It's JQuery UI in my case. Then you should provide the right Content-Type in the response instead of overriding the response type on JavaScript side. Set your Content-Type to text/html and you are fine.
In my case, it was as easy as renaming the file.xhtml to file.html - application server had some extension to MIME types mappings out of the box. When content is dynamic, you can set the content type of response somehow (e.g. res.setContentType("text/html") in Servlet API).

You can see these questions
Getting HIERARCHY_REQUEST_ERR when using Javascript to recursively generate a nested list
or
jQuery UI Dialog with ASP.NET button postback
The conclusion is
when you try to use function append, you should use new variable, like this example
jQuery(function() {
var dlg = jQuery("#dialog").dialog({
draggable: true,
resizable: true,
show: 'Transfer',
hide: 'Transfer',
width: 320,
autoOpen: false,
minHeight: 10,
minwidth: 10
});
dlg.parent().appendTo(jQuery("form:first"));
});
In the example above, uses the var "dlg" to run the function appendTo.
Then error “HIERARCHY_REQUEST_ERR" will not come out again.

I encountered this error when using the Google Chrome extension Sidewiki. Disabling it resolved the issue for me.

I'm going to add one more specific answer here because it was a 2 hour search for the answer...
I was trying to inject a tag into a document. The html was like this:
<map id='imageMap' name='imageMap'>
<area shape='circle' coords='55,28,5' href='#' title='1687.01 - 0 percentile' />
</map>
If you notice, the tag is closed in the preceding example (<area/>). This was not accepted in Chrome browsers. w3schools seems to think it should be closed, and I could not find the official spec on this tag, but it sure doesn't work in Chrome. Firefox will not accept it with <area/> or <area></area> or <area>. Chrome must have <area>. IE accepts anything.
Anyway, this error can be because your HTML is not correct.

I know this thread is old, but I've encountered another cause of the problem which others might find helpful. I was getting the error with Google Analytics trying to append itself to an HTML comment. The offending code:
document.documentElement.firstChild.appendChild(ga);
This was causing the error because my first element was an HTML comment (namely a Dreamweaver template code).
<!-- #BeginTemplate "/Templates/default.dwt.php" -->
I modified the offending code to something admittedly not bulletproof, but better:
document.documentElement.firstChild.nodeType===1 ? document.documentElement.firstChild.appendChild(ga) : document.documentElement.lastChild.appendChild(ga);

If you run into this problem while trying to append a node into another window in Internet Explorer, try using the HTML inside the node instead of the node itself.
myElement.appendChild(myNode.html());
IE doesn't support appending nodes to another window.

This ERROR happened to me in IE9 when I tried to appendChild an dynamically to a which already existed in a window A. Window A would create a child window B. In window B after some user action a function would run and do an appendChild on the form element in window A using window.opener.document.getElementById('formElement').appendChild(input);
This would throw an error. Same with creating the input element using document.createElement('input'); in the child window, passing it as a parameter to the window.opener window A, and there do the append. Only if I created the input element in the same window where I was going to append it, it would succeed without errors.
Thus my conclusion (please verify): no element can be dynamically created (using document.createElement) in one window, and then appended (using .appendChild) to an element in another window (without taking maybe a particular extra step I missed to ensure it is not considered XML or something). This fails in IE9 and throws the error, in FF this works fine though.
PS. I don't use jQuery.

Another reason this can come up is that you are appending before the element is ready e.g.
<body>
<script>
document.body.appendChild(foo);
</script>
</body>
</html>
In this case, you'll need to move the script after the . Not entirely sure if that's kosher, but moving the script after the body doesn't seem to help :/
Instead of moving the script, you can also do the appending in an event handler.

I got that error because I forgot to clone my element.
// creates an error
clone = $("#thing");
clone.appendTo("#somediv");
// does not
clone = $("#thing").clone();
clone.appendTo("#somediv");

Just for reference.
IE will block appending any element created in a different window context from the window context that the element is being appending to.
e.g
var childWindow = window.open('somepage.html');
//will throw the exception in IE
childWindow.document.body.appendChild(document.createElement('div'));
//will not throw exception in IE
childWindow.document.body.appendChild(childWindow.document.createElement('div'));
I haven't figured out how to create a dom element with jQuery using a different window context yet.

I get this error in IE9 if I had disabled script debugging (Internet Explorer) option. If I enable script debugging I don't see the error and the page works fine. This seems odd what is the DOM exception got to do with debugging either enabled or disabled.

In firefox, how can I change an existing CSS rule

In firefox, I have the following fragment in my .css file
tree (negative){ font-size: 120%; color: green;}
Using javascript, how do I change the rule, to set the color to red?
NOTE:
I do not want to change the element.
I want to change the rule.
Please do not answer with something like
...
element.style.color = 'red';

What you're looking for is the document.styleSheets property, through which you can access your css rules and manipulate them. Most browsers have this property, however the interface is slightly different for IE.
For example, try pasting the following in FF for this page and pressing enter:
javascript:alert(document.styleSheets[0].cssRules[1].cssText)
For me that yields the string "body { line-height: 1; }". There are methods/properties that allow you to manipulate the rules.
Here's a library that abstracts this interface for you (cross-browser): http://code.google.com/p/sheetup/

function changeCSSRule (stylesheetID, selectorName, replacementRules) {
var i, theStylesheet = document.getElementById(stylesheetID).sheet,
thecss = (theStylesheet.cssRules) ? theStylesheet.cssRules : theStylesheet.rules;
for(i=0; i < thecss.length; i++){
if(thecss[i].selectorText == selectorName) {
thecss[i].style.cssText = replacementRules;
}
}
};

You can change CSS rules in style sheets through the CSS Object Model (currently known as DOM Level 2 Style). However, if you literally have "tree (negative)" in your style sheet that rule will be dropped and not appear in the Object Model at all.

As there is no HTML element tree I am going to assume that tree is the id or class of another element.
You would first retrieve the DOM element by id:
var tree = document.getElementById("tree");
Now tree represents your DOM element and you can manipulate it any way you like:
tree.style.color = "red";
Here is a great reference for mapping css properties to their javascript equivalent.

I'm not sure you can do actual class/selector overrides. You would need to target each element that used the .tree class and set the CSS. The quickest and easiest way would be through jQuery (or another similar framework):
$('.tree').each(function() { this.style.color = "red"; });
You could even use the built-in CSS functions:
$('.tree').css('color', 'red');
(I did it the first way to show you how standard JS would do it. The $(...) part is jQuery for selecting all elements with the .tree class. If you're not using jQuery, you'd need alternative code.)
If tree is an ID, not a class (there should only be one on the page) so using getElementById should be fine. Your code should look like the other answer.

for( var i in document.getElementsByTagName("tree") ){
document.getElementsByTagName("tree")[i].style.color = "red";
}

As I said in another answer's comment, I've never seen this done how you want. I've only ever targeted elements the same way as the CSS renderer would and changed each element style.
I did see this though: jQuery.Rule
It sounds like it does what you want but the demo causes my browser to flip out a bit. I'd invite you to look at the source to see it really does do what you want, and if you want to use it without jQ, use it as a starting point.
Edit: yes this should work. It works by appending another <style> tag to the page and writing out your overrides within. It's fairly simple to follow if you wanted to port it to plain JS.

For debugging, you can use Firebug to change the CSS rules on-the-fly.

If you want to change the rendered css rules from one page request to the next then some sort of server-side scripting will be required. Otherwise the original style sheet would simply reload at the next page request.
If you want to use an event on the first page to force the server-side action then you can use AJAX to actually change the CSS rule for the user.

"I want to change the rule so that
when I navigate to the next page, I
don't have to make all the changes
again."
It sounds like what you might want then is a remote request ("ajax") back to the server with the request you want to make, and generate a dynamic stylesheet which is sent back to the client?
How/why is this Firefox specific?

I want to change the rule so that when I navigate to the next page, I don't have to make all the changes again.
There are two approaches I can think of here. Namely client side and/or server side.
Client side:
Store the theme setting into cookies and load them up next time by javascript.
Server side:
If your site have an login system, you may also store the user preference into the database and generate the webpages with this inforamtion in mind next time on.
Utimately, you are still writing things like element.style.color =. But, they should get what you want.