How do I get these two functions to work with Ajax, and how to I rewrite it in Jquery?

Question

function ajaxFunction(phpFunction){ var ajaxRequest; // The variable that makes Ajax possible!

    try{
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer Browsers
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                // Something went wrong
                alert("Your browser broke!");
                return false;
            }
        }
    }
    // Create a function that will receive data sent from the server
    ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){
    $('.subCat').html(ajaxRequest.responseText);
    $('.subCat').ready(function(){
    $('.subCat').fadeIn();
    });





        }
    }


    var url = "products.php?func=" + phpFunction;

    ajaxRequest.open("GET", url, true);
    ajaxRequest.send(null); 

}

This function works great, and has no problems. But if I add:

function refreshProduct(idNum, phpFunction){
    var ajaxRequest;  // The variable that makes Ajax possible!

    try{
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer Browsers
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                // Something went wrong
                alert("Your browser broke!");
                return false;
            }
        }
    }
    // Create a function that will receive data sent from the server
    ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){
        $('.' + idNum).empty();
    $('.' + idNum).html(ajaxRequest.responseText);

    });





        }
    }


    var url = "products.php?func=" + phpFunction + "&idNum=" + idNum;

    ajaxRequest.open("GET", url, true);
    ajaxRequest.send(null); 

}

When I try to execute ajaxFunction('returnAllProducts') I get:

    syntax error
 });\n

from

   $('.' + idNum).html(ajaxRequest.responseText);

    }); <<<----

and

ajaxFunction is not defined
javascript:ajaxFunction('returnAllProducts')()

So my questions are:

a) how do I convert this over to jquery? I've read over some jquery ajax tutorials, but I wasn't able to make the connection how to do what I am doing here. b) How do I get both functions to work? I know the PHP behind them works fine, but I can't even test if refreshProduct() works properly right now.

Answer 1

You seem to be missing a }

this is your code, properly indented...

// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
    if(ajaxRequest.readyState == 4){
        $('.'idNum).empty();
        $('.'idNum).html(ajaxRequest.responseText);
    });

When it should be

// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
    if(ajaxRequest.readyState == 4){
        $('.'idNum).empty();
        $('.'idNum).html(ajaxRequest.responseText);
    }
});

Also, the two } after this should be deleted, rendering your code like this:

function refreshProduct(idNum, phpFunction){
    var ajaxRequest;  // The variable that makes Ajax possible!

    try{
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer Browsers
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                // Something went wrong
                alert("Your browser broke!");
                return false;
            }
        }
    }
    // Create a function that will receive data sent from the server
    ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){
            $('.' + idNum).empty();
            $('.' + idNum).html(ajaxRequest.responseText);
        }
    });

    var url = "products.php?func=" + phpFunction + "&idNum=" + idNum;

    ajaxRequest.open("GET", url, true);
    ajaxRequest.send(null); 
}

As for rewriting this using jQuery, it's really easy:

function ajaxFunction(phpFunction){
    var url = "products.php?func=" + phpFunction;
    $.get(url, function(data) {
        $('.subCat').html(data).ready(function(){
            $('.subCat').fadeIn();
        });
    });
}

function refreshProduct(idNum, phpFunction){
    var url = "products.php?func=" + phpFunction + "&idNum=" + idNum;
    $.get(url, function(data) {
        $('.' + idNum).empty().html(data);
    });
}