Replacing div content using jquery in a jsp

Question

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.

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

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