Thread

Ok, Im back dealing with the same stuff.  This time its IEs fault.  Pinky promise!  :cheese:

Im getting an XSLTProcessor is undefined error in ie7. Im am sure its something with activeX and IE, but I am not sure of a work around. Here is my code.

function showFeed(xmlUrl, xslUrl) {
        var feed = document.getElementById('pagecell');
        //clear feed div
        while(feed.hasChildNodes()){
            feed.removeChild(feed.childNodes[0]);
        }
        //append new htmlfragment
        feed.appendChild(getHtmlFragment(xmlUrl, xslUrl));     
    }

    function getHtmlFragment(xmlUrl, xslUrl) {
        var xslStylesheet;
        var xsltProcessor = new XSLTProcessor();   

        //load the xml file
        var xmlSource = getResponseXml(xmlUrl).responseXML;

        //load the xsl file into the xslt Processor
        xslStylesheet = getResponseXml(xslUrl).responseXML;     
        xsltProcessor.importStylesheet(xslStylesheet);
       
        return xsltProcessor.transformToFragment(xmlSource, document);
    }

    function getResponseXml(xmlUrl) {
        var xmlHttp = new XMLHttpRequest();
        xmlHttp.open("GET", xmlUrl, false);
        xmlHttp.send(null);
        return xmlHttp;   
    }

    function showFeed(xmlUrl, xslUrl) {
        var feed = document.getElementById('pagecell');
        //clear feed div
        while(feed.hasChildNodes()){
            feed.removeChild(feed.childNodes[0]);
        }
        //append new htmlfragment
        feed.appendChild(getHtmlFragment(xmlUrl, xslUrl));

        $('#art-info > ul').tabs();

    }

And I am pretty sure it has something to do with this part:

function getHtmlFragment(xmlUrl, xslUrl) {
        var xslStylesheet;
        var xsltProcessor = new XSLTProcessor();

Here is the actual page: http://sf.grantmx.com/sf_goes_gospel_artists_ajax.html.

Of course it works fine in Firefox and Safari, but in IE7 it bombs out. Can anybody help this nob of a person that I am?

Thanks!

Hi there,

sorry for not answering in the other thread, but I somehow only managed half a post where I started to ruminate about using XSL transforms and that I’m not sure if all browsers support it….

Now to help, jQuery has a crossbrowser XSLT plugin: http://www.jongma.org/webtools/jquery/xslt/
But it does seem a bit overboard (120kB).
This tutorial explains what you need to do for IE to work:
http://www.learn-ajax-tutorial.com/Xslt.php
(as you said, it needs to use ActiveX something or other 😊

Generally speaking, is there a specific reason for you putting the information into XML format?
It looks like you could just use normal HTML and inject that. On the other hand if you already have XML and/or will have many artists in the XML list, you can also go and use jQuery to parse the XML and output HTML.
Here is a starter tutorial:http://blog.reindel.com/2007/09/24/jquery-and-xml-revisited/

Thanks man.  I will try this out! 😊

Generally speaking, is there a specific reason for you putting the information into XML format?

Yeah, we plan to have tons of artists and a whole lot of stuff for each one.  I am on a time constraint to launch this.  Idealy we would use our CMS (not EE - but wish!), but our developer people are bogged.

I think that crossbrowser XSLT plugin is the ticket man. 😉

So, to activate the tabs, would I just add on the standard tabs script? 

$(function() {
        $('#art-info ul').tabs(1);
});

Do you think it will parse in the right order?

Glad to be of assistance.

Again, you have to call the tabs after the ajax call and xslt transform. The place to do so is in the callback function. Something like this should do the trick:

$('#pagecell').xslt({
   xmlUrl: 'xml_data/artists/artists.xml',
   xslUrl: 'xml_data/artist_gen.xsl',
   callback: function(data){
     $(data).find('#art-info ul').tabs(1);
   }   
});

Alright.

So I used the XSLT plugin and I was able to get the parser to work in IE, Win Safari and Firefox (Thank God! 😉), but I cant get the tabs to work although they do load.  Meaning that the divs and the links load.  It may be an order issue.

$(function() {
    $('#pagecell').xslt({
           xmlUrl: 'xml_data/artists/artists.xml',
           xslUrl: 'xml_data/artist_gen.xsl',
           callback: function(data){
             $(data).find('#art-info ul').tabs(1);
           }   
    }); 
});

Edit: removed some unnecessary & duplicate code.

I have to admit that I’m not 100% sure on how to write the callback function. You may be better off asking on the jQuery mail list:
http://groups.google.com/group/jquery-en

Now logically anything called from within the callback should happen AFTER the AJAX call has succeeded. So maybe you don’t need to use the (data) to search through since the data should be a part of the DOM now.

try using

callback: $('#art-info ul').tabs();

or

callback: applyTabs();

and make a function outside like so:

function applyTabs(){
   $('#art-info ul').tabs();
};

If all this fails, see if the jQuery group is of more assistance.

No luck. I hit them up.  Hopefully I can get this resolved. I am on a time crunch.  Thanks for all your help Asozzi!

Finally got it working. Apparently there was some stuff wrong with the XSLT Plugin’s script that didnt allow calbacks.  Klaus in the jQuery forums helped out and fixed the issue. 

Just for documentation, this was the final code I used:

$(function() {
        $('#pagecell').xslt({
            xmlUrl: 'xml_data/artists/artists.xml',
            xslUrl: 'xml_data/xstyles/artist_gen.xsl', 
            callback: function(data) {
                   $('#art-info > ul').tabs();}
        }); 
    });

Thanks again Asozzi for your help!  😊

Pleasure to be of some assistance. You sure hit right upon the highest echelons of jQuery-dom (short of J.Resig himself).

Glad it worked out (and also that I wasn’t all too far off). I also think that this is one of the examples of why jQuery finally made the cut for EE2.0. Both communities have a similar “good vibe” and helpful people all the way to the “top”.