running an XPath expression SVG inside an HTML with javascript - javascript

I'm trying to run an xpath-expression over an svg which is embedded in html. I just cannot figure out how to set up the parameters. I want find elements that have an arbitary attribute from a given namespace. I use the following xpath expression:
var xpathexp = "//*[#*[namespace-uri()='"+this.typo7namespace+"']]";
I tested this expression and it worked as expected.
this is the code to find the result set:
var result = this.svgdocument.contentDocument.evaluate( xpathexp, this.svgdocument.documentElement, null, XPathResult.ANY_TYPE, null );
Could anybody tell me, or post a link to a tutorial, how to deal with the namspaces, the namespace resolvers??
Greetings...

Here's the Mozilla tutorial on using XPath:
https://developer.mozilla.org/en/Introduction_to_using_XPath_in_JavaScript
Here's one on writing custom namespace resolvers:
https://developer.mozilla.org/en/Introduction_to_using_XPath_in_JavaScript#Implementing_a_User_Defined_Namespace_Resolver
I found these interfaces to be rather clunky, though, so I wrote an abstraction layer that would take the xpath string and a context node, and would return a regular js array. It works inside the browser and embedded in Java under Mozilla Rhino:
https://svn.apache.org/repos/asf/commons/sandbox/gsoc/2010/scxml-js/trunk/src/javascript/scxml/cgf/util/xpath.js
All of the above should work in all browsers except for IE6-9.
IE6-8 does not support SVG natively, so this should be less important to your question. For completeness, though, here's a good article describing XPath support in earlier IE8, including support for resolving namespaces:
http://www.nczonline.net/blog/2009/04/04/xpath-in-javascript-part-3/
Apparently, IE9 also does not include support for XPath in the browser, which is more problematic, as it does support SVG natively. Probably the best approach here is to use ActiveX to work with MSXML APIs:
IE9 selectSingleNode missing from beta, how to overcome this in JavaScript?

Related

Using regexp namespace from EXSLT in browser console causes a SyntaxError

I want to use regexp namespace in my XPath expressions when searching elements in browser console, but get SyntaxError: The expression is not a legal expression. trying to do so.
I followed http://help.dottoro.com/ljspsvcs.php as a tutorial for creating a namespace resolver.
Here's my code:
function nsResolver (nsPrefix) {
if (nsPrefix == "regexp") {
return "http://exslt.org/regular-expressions";
}
return null;
}
document.evaluate('//a[regexp:test(#href, "qwerty-[\d]+$")]', document.documentElement, nsResolver, XPathResult.ANY_TYPE, null);
What am I doing wrong here?
The fact that someone has defined a set of extension functions in a particular namespace does not mean that every XSLT processor supports those functions. What is wrong here is that you are using an ancient XSLT processor that has not been upgraded in years (because the browser vendors lost interest in the XML user community).
Consider installing Saxon-JS, which provides XSLT 3.0 running in the browser, with built-in regular expression support according to W3C specifications. (Disclaimer: it's my company's product).

Standard way of parsing HTML

I'm working on a project for my university in which i need to parse an html string into a document and add the children elements in the existing page. I have to use Javascript 1.6 with DOM Level
3 and the project must work with Firefox 32.0 and Chrome 37.0.2062.120, pretty old browsers. The problem is i have to use only standard methods and properties so i can't use innerHTML. These are my attempts so far:
I managed to parse html using the DOMParser object but i'm not sure if i'm allowed to use that (i found this document but it's not clear to me if DOMParser is standard or not), if this was the case it looks like the best option to me.
I also tried to parse html using:
var doc = document.implementation.createHTMLDocument(title);
doc.open();
doc.writeln(html);
doc.close();
The problem with this method is that it doesn't work with the version of mozilla i need to use. I also tried to use the document inside a dummy iframe pointing to about:blank but chrome then prevents me (for security reasons i believe) to add event handlers to any of the elements coming from that document, and i need to do that.

Browser support for getElementsByTagNameNS

Which browsers/versions support getElementsByTagNameNS(), and to which extent? I can't seem to find a good reference.
[Edit] I am interested in a complete reference, but my immediate need is for namespaced xml returned from an AJAX call (which jQuery doesn't seem to handle btw).
Sitepoint says Firefox as of version 1.5, Safari as of version 3 and Opera as of version 9.
Firefox versions lower than 3.6 did a case insensitive search which as corrected in version 3.6.
Microsoft claims to support it as of IE9. However, according to Dottoro, this is only true for HTML documents. I'm not sure if you can't really trust Dottoro because selecting by namespace does not make sense for HTML documents anyway.
You should be able to use XPath if getElementsByTagNameNS is not supported. Wrappers are required, though, since IE does not support the standard API – see Yaldex and NCZOnline for hints how to get IE to cooperate. Or ask Microsoft's support.
I would recommend to ensure XHTML documents have actually been served with a XML content type when you plan to use the function on the DOM of a web page.
Chromium 14 does also support the method (and honors namespaces in contrast to old Safari versions). Support might have been in long before, I just don't know the earliest Chrome/Chromium version with support.
It seems all browsers but not IE are supporting DOM Level 3 XPath. Use XPath to replace calls to getElementsByTagNameNS if there are issues with it. See NCZOnline for an introduction and notes on browser support.
I know this is old, but this might be useful to someone. You can just use plain old getElementsByTagName in IE. Instead of calling node.getElementsByTagNameNS('someNamespace', 'someNodeName'), call node.getElementsByTagName('someNamespace:someNodeName').
Or use the following shim:
var getElementsByTagNameNS = function(node, ns, tagName) {
if (node.getElementsByTagNameNS) {
return node.getElementsByTagNameNS(ns, tagName);
}
return node.getElementsByTagName(ns + ':' + tagName);
};
And call it like this:
getElementsByTagNameNS(someNode, 'someNamespace', 'someNodeName');
Have you taken a look at this reference?
Specifically, here.

JavaScript DOM on IE

I want to make a JS function that switch visible/hidden.
var foo = function(n){
var hidden_elements = document.getElementsByName('hidden');
for(var i=0;i<hidden_elements.length;i++){
hidden_elements[i].style.visibility = 'hidden';
}
hidden_elements[n].style.visibility = 'visible';
};
It works on Firefox and Chrome, but it doesn't on IE. Why?
Thanks in advance.
I would recommend saving yourself the horror and going with:
http://jquery.com/
http://mootools.net/docs/core
http://dojotoolkit.org/
etc....
The libraries do a lot to smooth over the surprises of different browsers. If you are being super minimalist you can always check the source for how they are handling the differences. Also have a look at quirksmode's compatibility listing.
I know I didn't give a solid answer but you are going to run into these troubles all the time and these are some good tools for hammering them out.
IE up to IE8 does not follow W3C specs. Microsoft has their own standards. Many scripting methods that work on Firefox or Chrome (which are W3C standards) may not work properly in various builds on IE.
Why don't you try something from scratch? Either that, or do some ease of access. You can do this by making a pattern for ids and dynamically building those ids (may be incremental). Then, access those tags from their id.
Access by name is not preferred. Id is most appropriate.
Your html is invalid. the "name" property needs to be unique. Use "class" instead.
Internet Explorer might give some issues, so DOM polyfills like flowjs could be used.

JSON.stringify and JSON.parse not working in IE9?

I'm using JSON.Stringify and JSON.parse everywhere and it works fine with Firefox. It's working no more with IE9 nor does it work in IE8. What can I do?
JSON.stringify starts with a lower-case s. Both stringify and parse are available in IE8+, but only in standards mode.
Prepend your document with <!DOCTYPE html> if you're currently using quirks mode. Also, watch the capitalization of the JavaScript methods you call - all built-in ones start with a lower-case character.
why do you want to depend on the browser having the object instead just include the script file by Douglas Crockford.. You can find the minifed file here: http://www.json.org/js.html
Once imported you dont have to worry abt the method existing in a browser.
For an alternative, in a scenario where you might need to run in strict mode for whatever reason (I have another library that includes "use strict"), you can look here: https://github.com/douglascrockford/JSON-js. I modified this to check first if JSON is undefined, and only generate the function JSON.parse if it is:
if (typeof JSON === "undefined") {
var JSON = {
parse: <insert value of json_parse from library here>
};
}
My issue was application code not working in IE9 (strict mode being used by a participating library, I believe). That solved the problem for me.
the mere issue is, that sending UTF-8 headers will invalidate the JSON (IE doesn't/didn't like that). as the issue is described, that might still apply for IE9... once wrote a how to, a few years ago. adding JSON support to a browser which can parse native JSON is probably not the optimal solution, since it produces useless overhead - only because failing to deliver the JSON in the expected format.

Categories