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

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.