jQuery load to variable

Question

I need insert result from jQuery load to variable.

Content of elemtent with id test on page ajax.html.

$('#result').load('ajax.html #test');

Answer 1

Try $.ajax. $.load is just a shortcut.

Answer 2

If you want exactly load func, try this one:

var temp;
$(new Object()).load('YourUrl', { param: "smth" }, function(data){
  $('#element').prepend(data); //if you want prepend/append result to some html
  temp = data; //if you want put to variable
});

Answer 3

$('#result').load('ajax.html #test', function(result) {
    var variable = $('#result').html();
});

Answer 4

Use setTimeout

<script> 
    my_var=$('#hidden').load('new.html');
    setTimeout(function(){
        my_var=my_var.html();
        alert(my_var);
    }, 500);
</script>

Answer 5

$(document).ready(function(){
    $('#result').load('/ p#name', function(result) {
        var obj = $(this).find('p#name'), html = obj.html();
        obj.css({'font-size':40});
        $(this).append($('<div>').text(html));
    });
});

Example on JSFiddle http://jsfiddle.net/kuroir/stD94/

Answer 6

I'm posting this message on all the stackoverflow threads that ask for help in cramming data from a jQuery ajax method into a variable, rather than into an HTML element, because I had a tough time finding a solution that would work. I finally found a solution, and I just want to share with anyone who is having a hard time with this.

My problem was that I was really struggling with getting the results of jQuery ajax into my variables at the "document.ready" stage of events.

My tests showed me that jQuery's ajax would load into my variables when a user triggered an "onchange" event of a select box after the page had already loaded, but the data would not feed the variables when the page first loaded. But I didn't want to trigger any ajax on my "onchange" event; I wanted the variables, fed with ajax data on page load, to handle the work. The variables are used to change data on the fly when the user triggers an "onchange" event. This way there is no lag/ajax while the user is interacting with the form; the data is available once the page loads.

I tried many, many, many different methods, but in the end, the code I needed was on this stackoverflow thread : JQuery - Storing ajax response into global variable

I used Charles Guilbert's response. Using his answer, I am able to get data into my variables, even when my page first loads.

Here's an example of the working script - hope it helps someone!

jQuery.extend
(
    {
        getValues: function(url) 
        {
            var result = null;
            $.ajax(
                {
                    url: url,
                    type: 'get',
                    dataType: 'html',
                    async: false,
                    cache: false,
                    success: function(data) 
                    {
                        result = data;
                    }
                }
            );
           return result;
        }
    }
);

// Option List 1, when "Cats" is selected elsewhere
optList1_Cats += $.getValues("/MyData.aspx?iListNum=1&sVal=cats");

// Option List 1, when "Dogs" is selected elsewhere
optList1_Dogs += $.getValues("/MyData.aspx?iListNum=1&sVal=dogs");

// Option List 2, when "Cats" is selected elsewhere
optList2_Cats += $.getValues("/MyData.aspx?iListNum=2&sVal=cats");

// Option List 2, when "Dogs" is selected elsewhere
optList2_Dogs += $.getValues("/MyData.aspx?iListNum=2&sVal=dogs");