AJAX ResponseText as DOM?

Consider the following function using jQuery:

function getVal() {
    jQuery.get('/relative/url/', function (data) {
        return data.getElementById('myInput').value;
    }
}

This is basically what I want to do, but I have no idea how it should be done. The only methods I know would work involve frames or innerHTML which I can't use because I have to wait for the element to be ready. The only way to do that is to use a callback, and this functio开发者_如何学编程n must return the value of the element rather than something else. My logic is likely faulty here, so please feel free to correct me.

First of all, with your current structure you should use a callback to return the value. To parse the HTML string retrieved via AJAX, you can hand it to jQuery and then query it just as usual.

function getVal(callback) {
    jQuery.get('/relative/url/', function (data) {
        callback($(data).find('#myInput').val());
    }, 'html');
}

Then, when you are calling the function getVal, you'll need to provide a callback:

getVal(function(input_val) {
    /**
     * This code will be run once the GET request finishes.
     * It will be passed one parameter - the value of #myInput in the HTML
     * response to the request (see getVal function).
     */

    alert(input_val);
});

No, you could not do that.. since it is ansync call. What you need is to provide a callback to you code, to return the value

function getVal(callback) {
    jQuery.get('/relative/url/', function (data) {
        callback(data.getElementById('myInput').value);
    }
}

getVal(function (value) {
  alert(value);
});

if the it's valid html markup, you can use browse its xml with the selector:

*[id=myInput]

or you can just render the markup on some dummy element in your page and then do you lookup:

function getVal() {
    jQuery.get('/relative/url/', function (data) {
        dummyNode.innerHTML = data; //not sure data points to responseTxt
        return getElementById('myInput').innerHTML;
    }
}

You cannot do that unless the elements are added to dom tree.

function getVal() {
    jQuery.get('/relative/url/', function (data) {
        return $(document.body).append(data).find('#myInput').val();
    }
}

Several problems there. First, you cannot return from a callback like that. You would just return to the anonymous function itself, not from the getVal() method.

To solve that, you can return the jXHR object and apply some magic:

function getVal() {
    return jQuery.get('/relative/url/');
}

getVal().done(function (data) {
    var val = $( data ).find('#myInput').val();
    // do something with val
}

I don't know how the structure from data looks like, but it should work that way. If not, its probably because of myInput is on the top level. In that case, replace .find() with .filter().

Oh, alright. I've got it. I don't think I provided enough information. I assumed context was irrelevant. Alright, here's an example depicting my solution.

function getVal() {
    $.get('/relative/url/', function (data) {
        $.get('relative/url/2', function (data2) {
            var data_obj = [];
            data_obj.push({
                "data_1":data[i].name
            }, {
                "data_2":$(data).find('#myInput').val()
            });
        });
    }
}