Using xui on an xhr response

[webmat]

Hey guys,

I'm trying out xui and poking at xhr.

From the xui home page, I'm trying to load the /license page and to insert it at the end of the page. This works flawlessly if I want to include the integral response in the page:

 x$('section').xhr('bottom', '/license')

However I'm having problems when using x$(this) to parse the response. Here's what I'm trying:

x$().xhr('/license', function () {
  console.log( x$(this).find('section h1').html() )
})

I would expect this code to output "mit license", the first heading in the main section of the license page. Instead, I'm getting "about", which is the first heading on the main page.

Any insights on what I'm doing wrong?

Is xui able to parse xhr responses (or arbitrary html strings, for that matter), or does it strictly operate on the DOM?

Thanks in advance!

[peterp]

In your case "this" is a XMLHttpRequest object.

If I understand you correctly you want to find a specific element within the responseText of your XHR request?

You can do it this way:

1. Create a hidden element on your page.
2. x$('#hidden_element').html(this.responseText);
3. x$('#hidden_element section h1').html();

[webmat]

You're right, that's what I'm trying to do.

I first tried x$(this.response) but that didn't work. So when I tried x$(this) I got back an xui object, just like when I'm operating on the DOM. Since some examples on xuijs.com use x$(window), it made sense to assume that the library was checking whether the argument was a complex object or a simple selector string.

So what you're suggesting sounds like solution that would work. Thank you!

But the purist in me is wondering if there isn't a way to do it without adding it to the DOM (and presumably having to clean up afterwards).

Plus, since it's growing the size of the DOM, I assume it could increase the chance of reflows?

[peterp]

I guess you could try and parse the HTML, but I don't think it's going to be faster than the native parser you already have.

An alternative might be to provide it in a different format other than HTML?

Maybe this will be helpful? http://ejohn.org/blog/pure-javascript-html-parser/

[webmat]

Ah, thanks again for your feedback!

That would indeed mean implementing a parser :-) I was asking because jQuery has that capability. But you just made me realize what a massive effort that would be :-)

I guess I'll either go with the hidden div approach or just use the json ajax code from xui-plugins :-)

[tekmonk]

I had this same issue and actually hacked my way to getting it to work.

For some reason, when I turn the responseText into an xui object there are random "text" nodes in it (although this is probably due to some phantom line breaks in my php server side that i've too lazy to hunt down)

x$body.xhr( pageSettings.controller , {
    method      : "POST",
    data        : data,
    callback    : function(){

        var divsOnly = x$(this.responseText).checkResponse();
        // make an obj from the remaining divs 
        var theObj = x$(divsOnly);
        theObj.format(); // personal function that does stuff to elements, like adding classes

        // what you do here will vary.  here i am gratting all my "pages", finding the last one, and popping the xui response in there...
        var lastpage = x$('[data-role=page]');  
        lastpage = x$(lastpage[lastpage.length-1]);
            lastpage.html('after', theObj );
    });

this will just return elements, no text nodes

    var checkResponse = function ( ){ // remove nodes from object except elements
        var that = [];
        var xx = 0;
        this.each( function ( x , i , xui){
            if( this.nodeType  === 1){ that[xx] = x; xx ++; };
        });
        return that;
    },