Question

I am currently using jTemplate and jQuery to get airport data from a web service and display it. On one page, it works as expected and it works very well:

function getData(pageSize, pageNumber, filter) {
        if ($('#airportfilter').val() != 'Filter...') {
            defaultParameters = "{pageSize:" + pageSize + ",pageNumber:" + pageNumber + ",filter:'" + filter + "'}";
        }
        else {
            defaultParameters = "{pageSize:" + pageSize + ",pageNumber:" + pageNumber + ",filter:''}";
        }
        loader(true);
        var cachekiller = Math.floor(Math.random() * 1000);
        $.ajax({
            type: "POST",
            url: "http://<%=Atomic.UI.Helpers.CurrentServer()%>/AtomicService/Cog.asmx/GetAirports",
            data: defaultParameters,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: (function Success(data, status) {
                $('#placeholder').setTemplateURL('/templates/html/airports.htm?ck=' + cachekiller, null, { filter_data: false });
                $('#placeholder').processTemplate(data.d[0]);
                loader(false);
                setPageNumber(pageSize);
            }),
            error: (function Error(request, status, error) {
                $("#placeholder").html(request.statusText).fadeIn(1000);
                loader(false);
            })
        });
    }

This is the template:

<li style="overflow:auto;">
    <ol class="pager">
    {#for index = 1 to Math.ceil($T.TotalRecords/$T.PageSize)}
        <a href="#" id="{$T.index}" class="pagethis"><li {#if $T.index == $T.PageNumber+1 } class="selected"{#/if}>{$T.index}</li></a>
    {#/for}
    </ol>
</li>
{#foreach $T.AirportList as Airport}
<li class="airport-row">
    <div class="gowalla-avatar">
        <a href="/airport/airport.aspx?airport={toLower($T.Airport.Icao)}">
            <img src="{$T.Airport.GowallaImgSmall}" alt="{$T.Airport.AirportName}" title="{$T.Airport.AirportName}" width="100" height="100" border="0"></img>
        </a>
    </div>
    <div class="gowalla-spot">
        <a class="gowalla-name" href="/airport/airport.aspx?airport={toLower($T.Airport.Icao)}">{$T.Airport.AirportName}&nbsp;({$T.Airport.Iata})</a>
        <small>
            <img src="/images/iconography/marker-tiny.png" alt="" class="padtop tinyicon"></img><a href="/city/city.aspx?city={$T.Airport.CityId}">{$T.Airport.City}</a>, <a href="/country/country.aspx?country={$T.Airport.CountryId}">{$T.Airport.Country}</a><br />
            <a href="#" id="flyfromhere">Fly from here &raquo;</a>&nbsp;|&nbsp;<a href="#" id="flytohere">Fly to here &raquo;</a>
        </small>

    </div>
</li>
{#/for}
<li style="overflow:auto;">
    <ol class="pager">
    {#for index = 1 to Math.ceil($T.TotalRecords/$T.PageSize)}
        <a href="#" id="{$T.index}" class="pagethis"><li {#if $T.index == $T.PageNumber+1 } class="selected"{#/if}>{$T.index}</li></a>
    {#/for}
    </ol>
</li>

So on another page where I’d like to get the same data, but where I may use more than one AJAX calls to templates etc, I get this:

The code is almost identical:

function getAirportData(pageSize, pageNumber, filter) {
        defaultParameters = "{pageSize:" + pageSize + ",pageNumber:" + pageNumber + ",filter:''}";
        airportLoader(true);
        var cachekiller = Math.floor(Math.random() * 1000);
        $.ajax({
            type: "POST",
            url: "http://<%=Atomic.UI.Helpers.CurrentServer()%>/AtomicService/Cog.asmx/GetAirports",
            data: defaultParameters,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: (function Success(data, status) {
                $('#airports-placeholder').setTemplateURL('/templates/html/airports.htm?ck=' + cachekiller, null, { filter_data: false });
                $('#airports-placeholder').processTemplate(data.d[0]);
                airportLoader(false);
                //setPageNumber(pageSize);
            }),
            error: (function Error(request, status, error) {
                $("#airports-placeholder").html(request.statusText).fadeIn(1000);
                airportLoader(false);
            })
        });
    }

It uses the same jTemplate and I have checked the web service is returning data etc. It is:

I’ve never seen the Uncaught 5 error before. It occurs in all browsers. I have tried making calls to the service with the filter parameter set as filter: 'xxx' and filter:'' with no change in behaviour. It’s very strange and I’m not sure – without more information from the error – how to solve it!? Any clues?

Help appreciated.

Answer 1

The answer to this was ridiculously simple and I wasted far too long it. sigh Isn’t it always the way?

Within the template, I had a call to {toLower($T.Airport.Icao)}. The toLower wasn’t a function within the new page. Once I added the function, all was well. slaps head

Thanks to 65Fbef05 for the help 🙂