Load div content on scroll using coldfusion

Scroll.cfm

<cfsetting showdebugoutput="no">
<style>
.loading{
        display: block;
        margin: 0px auto;
        text-align: center;
    }
</style>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    var loading = false;
    //initial track_load
    var track_load = 1;
    //a place for my crap
    var loadContentDiv = $("#content");
    //populate the initial content
    loadContent(track_load);
   
    $(window).scroll(function() { //detect page scroll
          
            if($(window).scrollTop() + $(window).height() == $(document).height())  //user scrolled to bottom of the page?
            {
               loadContent(track_load);
            }
        });   
   
    function loadContent(s)
    {
            if(loading) return;
            loading = true;
            loadContentDiv.append("<span class='loading' align='center'><img src='images/loading.gif'></span>");
           
            $.get("select.cfc?method=getCountries", {start:track_load}, function(res, code)
            {
                //console.log(res.length);
                var s = "";
                for(var i=0, len=res.length; i<len; i++)
                {
                    s += '<div style="float:left;width:100%;" align="left"><div style="width:90%;border-bottom:1px dashed #999">';
                    s+=res[i].COUNTRYID +'&nbsp;' + res[i].COUNTRYCODE + '&nbsp;' + res[i].COUNTRYNAME + '</div>';
                }
               
                if(res[0].COUNT != 0)
                {
                    loadContentDiv.find(".loading").remove();
                    loadContentDiv.append(s);
                    track_load += res.length;
                    loading = false;
                }
                else
                {
                    loadContentDiv.find(".loading").remove();
                    loading = false;
                    return false;
                }
            },"json");
    }
   
})
</script>

<div>
    <div>Countries</div>   
    <div style="height:50px;"></div>
    <div id="content"></div>
    <div style="clear:both;height:20px;"></div>    
</div>


select.cfc
<cfcomponent>
    <cffunction name="getCountries" access="remote" returnFormat="json"  output="false">
       
        <cfquery name="getCountries" datasource="TestDB">
            SELECT ctr_id,ctr_code,ctr_name FROM shema_countries order by ctr_name
            limit #val(arguments.start)-1#,45
        </cfquery>
       
        <Cfset i = 1>
        <cfset countries[i] = StructNew()>
         <cfset countries[i].Count = "#getCountries.recordcount#">
        <cfloop query="getCountries">
                <cfset countries[i] = StructNew()>
                <cfset countries[i].COUNTRYID = "#getCountries.ctr_id#">
                <cfset countries[i].COUNTRYCODE = "#getCountries.ctr_code#">
                <cfset countries[i].COUNTRYNAME = "#getCountries.ctr_name#">
                <cfset i = i + 1>
        </cfloop>
       
        <cfreturn  SerializeJSON(countries)>
    </cffunction>   

</cfcomponent>