onsdag 26 juni 2013

How to use selectSingleNode/selectNodes/xpath with ajax-returned xml document in jQuery and ie9/ie10

Think I spent a day reading of how to be able to use the returned xml when doing a $.get/$.ajax with jQuery. The solution was first of all to use a new version of jQuery, if I understood it correctly they do not return the browser-parsed xml-document anymore (http://bugs.jquery.com/ticket/13276). They always convert the xml internally using the parseXML method. (jQuery v. 1.9.1)

Problem now was that the parseXML method doesn't take ie9/ie10 into consideration. This is the new parseXML that I concocted. The problem that now arose was that the converter method was still pointing to the old parseXML method so I had to add a few more lines updating the converters object.

If you know of a better solution please comment below.


$.parseXML = function ( data ) {
    var xml, tmp;
    if ( !data || typeof data !== "string" ) {
        return null;
    }
    try {
        if ( window.DOMParser && navigator.userAgent.indexOf("MSIE 9") == -1 && navigator.userAgent.indexOf("MSIE 10") == -1) { // Standard
            tmp = new DOMParser();
            xml = tmp.parseFromString( data , "text/xml" );
        } else { // IE
            xml = new ActiveXObject( "Microsoft.XMLDOM" );
            xml.async = "false";
            xml.loadXML( data );
        }
    } catch( e ) {
        xml = undefined;
    }
    if ( !xml || !xml.documentElement || xml.getElementsByTagName( "parsererror" ).length ) {
        jQuery.error( "Invalid XML: " + data );
    }
    return xml;
}
$.ajaxSetup({
 converters:{"* text": window.String, "text html": true, "text json": jQuery.parseJSON, "text xml": $.parseXML}
})

torsdag 13 juni 2013

jQuery context menu asynchronous/ajax submenu

Been looking all over the internet for a jQuery plugin that supports async/ajax sub menus. When I couldn't find one I started to look at the jQuery UI menu widget to see what that one could do.

Two important events are available:
refresh
focus

and those are the ones that are needed to achieve the asynchronous sub menu.

HTML:
<ul id="menu" style="width:300px">
<li class="ui-state-disabled"><a href="#">Aberdeen</a></li>
<li>
<a href="#">Delphi</a>
<ul>
                 <li><a href="#"><img src="http://cdn-3.nikon-cdn.com/static/images/icons/icon_loading.gif"/></a></li>
</ul>
</li>
<li><a href="#">Saarland</a></li>
<li class="ui-state-disabled"><a href="#">Amesville</a></li>
</ul>

JS:
$(function(){
    $("#menu").menu({
        focus: function( event, ui ) {
            if(ui.item.children("ul").children("li").children("a").children("img").length > 0){
                $.get("http://fiddle.jshell.net", function(data){
                    ui.item.children("ul").html("<li><a href='#'>Viktor</a></li><li><a href='#'>Sweden</a></li><li><a href='#'>Luleå</a></li>")
                    $("#menu").menu("refresh")
                })
            }
        }
    });

});

JSFIDDLE:
http://jsfiddle.net/3r5FX/

This should give you a fairly good idea of how to make an async context menu.