jQuery Templates data display problem

Question

I have been struggling to get jQuery.tmpl() to populate a JSP page using a JSON file I am creating through JSTL.

JSON (/misc/managed_solutions/results.htm):

    var dataTable = [

            {
                firmName: "name",
                portfolioName: "Fund Allocation Portfolio",
                firmAum: "3.2394E8",
                portfolioAum: "2.3659865E7",
                objTypeDesc: "Capital Preservation/Current Income",
                gipsFlg: "Yes",
                inceptionDt: "01/01/2000",
                stateProvCd: "CA",
                pdfFileNm: "TremendousGrowth.pdf",
                agencyNm1: "name",
                agencyNm2: "name",
                agencyNm3: "name",
                agencyNm4: "name"
            }
            ,
            {
                firmName: "name",
                portfolioName: "Capital Allocation Portfolio",
                firmAum: "4.2394E8",
                portfolioAum: "4.3659865E7",
                objTypeDesc: "Capital Appreciation - Aggressive",
                gipsFlg: "Yes",
                inceptionDt: "01/01/2005",
                stateProvCd: "CA",
                pdfFileNm: "CapitalAllocation.pdf",
                agencyNm1: "name",
                agencyNm2: "name",
                agencyNm3: "name",
                agencyNm4: "name"
            }
            ,
            {
                firmName: "name",
                portfolioName: "name",
                firmAum: "2.2394E8",
                portfolioAum: "1.3659865E7",
                objTypeDesc: "Capital Appreciation - Moderate",
                gipsFlg: "No",
                inceptionDt: "01/01/2008",
                stateProvCd: "TX",
                pdfFileNm: "Global Core Equity.pdf",
                agencyNm1: "name",
                agencyNm2: "name",
                agencyNm3: "name",
                agencyNm4: "name"
            }

];

jQuery JS

function getPortfolioData( start ) {

    var markup = "<tr>" +
                    "<td><p>${firmName}</p>" +
                        "<a href='/path/to/content/${pdfFileNm}'>${portfolioName}</a>" +
                    "</td>" +
                    "<td>" +
                        "<p>${firmAum}</p>" +
                        "<p>${portfolioAum}</p>" +
                    "</td>" +
                    "<td>" +
                        "<p>${objTypeDesc}</p>" +
                    "</td>" +
                    "<td>" +
                        "<p>${gipsFlg}</p>" +
                    "</td>" +
                    "<td>" +
                        "<p>${inceptionDt}</p>" +
                    "</td>" +
                    "<td>" +
                        "<p>${agencyNm1}</p>" +
                        "<p>${agencyNm2}</p>" +
                        "<p>${agencyNm3}</p>" +
                        "<p>${agencyNm4}</p>" +
                    "</td>" +
                    "<td>" +
                        "<p>${stateProvCd}</p>" +
                    "</td>" +
                 "</tr>";

    $.template( "portfoliosTemplate", markup );

    $.ajax({
        dataType: "jsonp",
        url: '/misc/managed_solutions/results.htm?startPosition=' + start + '&viewRows=3',
        jsonp: "$callback",
        success: showPortfolio()
    });

    function showPortfolio(dataTable) {

        // Remove current set of portfolio items
        $( ".data-table.tpm tbody" ).empty();

        // Render the template items for each portfolio
        $.tmpl( "portfoliosTemplate", dataTable ).appendTo( ".data-table.tpm tbody" );
    }
}

HTML

<table class="data-table tpm">
    <tbody>
    </tbody>
</table>

RESULT

<table class="data-table tpm">  
    <tbody>
        <tr>
            <td>
                <p></p>
                <a href="/path/to/content/"></a>
            </td>
            <td>
                <p></p>
                <p></p>
            </td>
            <td>
                <p></p>
            </td>
            <td>
                <p></p>
            </td>
            <td>
                <p></p>
            </td>
            <td>
                <p></p>
                <p></p>
                <p></p>
                <p></p>
            </td>
            <td>
                <p></p>
            </td>
        </tr>
    </tbody>
</table>

I've managed to get the html markup to display within tbody, but none of the values. Furthermore, the markup only displays once, telling me that no iteration is occurring.

Any ideas?

DKM

Andrew Whitaker · Accepted Answer · 2011-07-29 23:02:05Z

1

Given your markup, data, and JavaScript, your code works fine:

Example: http://jsfiddle.net/Xdw2v/

I have a hunch that the problem you're seeing is from your AJAX call:

$.ajax({
    dataType: "jsonp",
    url: '/misc/managed_solutions/results.htm?startPosition=' + start + '&viewRows=3',
    jsonp: "$callback",
    success: showPortfolio()
});

Specifically, the success property is set to the results of executing the showPortfolio() method. This is causing your template to get rendered immediately (with no data). I think you really want:

success: showPortfolio

That is, a reference to your showPortfolio method instead of the results of executing it.

answered Jul 29, 2011 at 23:02

Andrew Whitaker

126k32 gold badges296 silver badges308 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

dylanmac Over a year ago

I see that what you did does work on jsfiddle, but it uses the json as a local variable rather than as an external file which isn't what I need. I also noticed that when I removed the '()' from the showPortfolio method I actually get nothing in my tbody - no markup, even.

Andrew Whitaker Over a year ago

@dylanmac: Judging by your question I assumed you thought the problem was with the .tmpl() call. To eliminate this possibility, I moved the data into a local variable. Your templating code works fine, therefore there must be a problem with your AJAX call. Have you looked in FireBug to make sure the data you expect is coming back? Do any errors occur on the page? Does your success callback ever get called?

dylanmac Over a year ago

Yeah I think you're right. The data is retrieved but the success function is not being called. I added console.log to it and nothing outputs. What the hell (and yes I removed the '()')?

Andrew Whitaker Over a year ago

Are you sure the request needs JSONP? JSONP is usually used for cross-domain requests. If your request is to a local URL you should be okay without it. (Just change datatype to json and remove the jsonp parameter)

dylanmac Over a year ago

Still no change. The function just isn't being called.

|

Collectives™ on Stack Overflow

jQuery Templates data display problem

1 Answer 1

7 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Related