CODEWITHSUNDEEP
javascriptjqueryajaxdom
Newton Smartt
Newton Smartt

Reputation: 62

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 function must return the value of the element rather than something else. My logic is likely faulty here, so please feel free to correct me.

Upvotes: 1

Views: 1196

Answers (6)

Newton Smartt
Newton Smartt

Reputation: 62

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()
            });
        });
    }
}

Upvotes: 0

Jon Gauthier
Jon Gauthier

Reputation: 25572

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);
});

Upvotes: 2

jAndy
jAndy

Reputation: 235982

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().

Upvotes: 0

ShankarSangoli
ShankarSangoli

Reputation: 69905

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();
    }
}

Upvotes: 0

BiAiB
BiAiB

Reputation: 14122

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;
    }
}

Upvotes: 0

Alexander Beletsky
Alexander Beletsky

Reputation: 19821

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);
});

Upvotes: 0

Related Questions