Replacing div content using jquery in a jsp

So far I've been开发者_如何学编程 making an AJAX call to replace the content of a div with another page, using the following code:

<script>
    function fetchContainerContent(url, containerid) {
        var req = false

        if (window.ActiveXObject) {
            try {
                req = new ActiveXObject("Msxml2.XMLHTTP")
            } catch (e) {
                try {
                    req = new ActiveXObject("Microsoft.XMLHTTP")
                } catch (e) {}
            }
        } else if (window.XMLHttpRequest) {
            req = new XMLHttpRequest()
        } else {
            return false
        }

        req.onreadystatechange = function() {
            requestContainerContent(req, containerid)
        }
        req.open('GET', url, true)
        req.send(null)
    }

    function requestContainerContent(req, containerid) {
        if (req.readyState == 4 && (req.status==200 || window.location.href.indexOf("http")==-1))
            document.getElementById(containerid).innerHTML = req.responseText
    }
</script>

I have tried transforming the above code to work with jQuery as below but it doesn't work. In other words, I am trying to mimic the end result of the above behaviour but it is nowhere near the same. In fact, nothing happens on screen, nothing changes. I should mention that I don't really need the Loading... but since the examples I've seen use it and since I'm not sure how to correctly syntax jQuery, I've left it in.

<script>
    function fetchContainerContent(url, containerid) {
        jQuery.ajaxSetup ({
            cache: false
        });
        var ajax_load = "loading...' />";

        jQuery("#load_basic").click(function() {
            jQuery("#"+containerid).html(ajax_load).load(url);
        });
    }
</script>

Thanks in advance. I'm really new to jQuery so I may have done something really stupid.

After all the comments received (thanks guys!) I have left only the following:

function fetchContainerContent(url, containerid){                   
var ajax_load = "loading...";               
$("#load_basic").click(function(){$("#"+containerid).html(ajax_load).load(url);});

}

but I'm still having problems as it does not update the page. No js error, nothing happens.

Try this:

jQuery("#load_basic").click(function() {
    jQuery("#result").html(ajax_load).load(url);
    return false;
});

Note the return false statement at the end of the click handler. This will prevent from propagating the click event in case load_basic is a button or an anchor element.

The only fundamental differences I see are:

1. You're using a hacky-looking loading string "loading...' />". This doesn't smell good.
2. You're hardcoding the containerid with "#result" instead of using "#" + containerid.
3. You're defining the click event in JS code rather than (apparently) inline in the element. How did it originally look like?

For the remnant the code looks fine.

Is the issue that it isn't calling your callback method? You have to had the callback to the .load method.

<script>
    function fetchContainerContent(url, containerid) {
        jQuery.ajaxSetup ({
            cache: false
        });
        var ajax_load = "loading...' />";

        jQuery("#load_basic").click(function() {
            jQuery("#result").html(ajax_load).load(url, null, requestContainerContent);
            return false;
        });
    }

    function requestContainerContent(responseText, textStatus, XMLHttpRequest) {
        // do replacement in here
    }

</script>

You'll have to adjust the code a bit in your requestContainerContent to do what you need it to do with the arguments provided.

OK, I seem to have gotten it working, even if I'm not too sure about the quality of the code.

var ajax_load = "loading...";
$("#"+containerid).html(ajax_load).load(url);