Question

I’m trying to convert our current javascript framework to jQuery cause we’ll need the additional functionality of jQuery for further projects. There is one particular function that is all over the place (and it was setup how it was setup……) that I’d like to just override with a jQuery equivalent. Here’s the original Javascript function that makes an ajax call to a php page.

function ajax(n,f,v){
    var ajaxRequest;
    if(window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
        ajaxRequest=new XMLHttpRequest();
    }
    else{// code for IE6, IE5
        ajaxRequest=new ActiveXObject("Microsoft.XMLHTTP");
    }
    ajaxRequest.onreadystatechange=function(){
        if(ajaxRequest.readyState==4 && ajaxRequest.status==200){

            //This is where the result is stored
            result = ajaxRequest.responseText;
            //parseScript pulls out the content and the div and populates the div with the retrieved content.
            parsed_result = parseScript(result);
            document.getElementById(parsed_result.div).innerHTML = parsed_result.source;
        }
    }
    ajaxRequest.open("GET","view.php?n="+n+"&f="+f+"&v="+v+"&time="+(new Date).getTime(),true);
    ajaxRequest.send();
}

function parseScript(_source) {
    var source = _source;
    var scripts = new Array();

    while(source.indexOf("<script") > -1 || source.indexOf("</script") > -1) {
        var s = source.indexOf("<script");
        var s_e = source.indexOf(">", s);
        var e = source.indexOf("</script", s);
        var e_e = source.indexOf(">", e);

        scripts.push(source.substring(s_e+1, e));
        source = source.substring(0, s) + source.substring(e_e+1);
    }

    for(var i=0; i<scripts.length; i++) {
        try {
            eval(scripts[i]);
            var div = div;
        }
        catch(ex) {
        }
    }

    return {source: source, div: div};
}

This is at the top of page that was just retrieve (hence the parseScript function). This div variable tells where to put the retrieved content.

<script>
    var div = 'content_1';
</script>
<!-- some retrieved html -->

The jQuery function I’d like to just “set on top” of the javascript function would require that I don’t edit the retrieve ajax file at all. See below for my attempt at the jQuery call.

function jAjax(n,f,v) {
$.get('view.php', 'n='+n+'&f='+f+'&v='+v, function(result) {
        if(result) {
            if($('#'+result.div).length) {
                $('#'+result.div).html(result);
            } else {
                console.log("Couldn't find the div= "+result.div);
            }
        } else {
            console.log("Couldn't find the names for n="+n+' f='+f+' v='+v);
        }
    });
}

So the question I have is how to I use jQuery to capture a variable from an ajax call so that I can populate that capture div with the retrieved html?

One other thing, yes I can can think of a bunch of ways to do it besides doing this, but this way would be easiest with the current framework that was already set in place when I got here. So, please only suggest ways of retrieving the variable from the ajax script. Thanks muchly!

Answer 1

There is no built in way to get the value of variables in a javascript file that you retrieved through jquery ajax methods. You could, however, just call the parseScript function inside the $.get callback:

$.get('view.php', 'n='+n+'&f='+f+'&v='+v, function(result) {
        if(result) {
            parsed_result = parseScript(result);

            if($('#' + parsed_result.div).length) {
                $('#' + parsed_result.div).html(parsed_result.source);
            } else {
                console.log("Couldn't find the div= " + parsed_result.div);
            }
        } else {
            console.log("Couldn't find the names for n="+n+' f='+f+' v='+v);
        }
    });

EDIT:

You may have to make this call with the longer $.ajax(…) method, setting the content type to text, because you have a script tag in the page.

EDIT (ALTERNATIVE):

You could simply reference the variable ‘div’ in the $.get callback because at that point the script would have been executed:

$.get('view.php', 'n='+n+'&f='+f+'&v='+v, function(result) {
        if(result) {               

            if($('#' + div).length) {
                $('#' + div).html(result);
            } else {
                console.log("Couldn't find the div= " + div);
            }
        } else {
            console.log("Couldn't find the names for n="+n+' f='+f+' v='+v);
        }
    });