How do I use jQuery ajax request for footable v3 - from a webservice?

Question

I'm not sure why, but the footable docs only show a method of getting data from a file, but not from a webservice, so i tried all sorts of combinations for getting data returned, in json format, into the footable instance, but no luck. Their example shows the following:

$('.table').footable({
    "rows": $.get('rows.json')
});

(presuming the columns are already defined) and this works. However, in my ajax query, I tried

$('.table').footable({
    "rows": data.d
});

and no errors happen, the data is in the correct format (verified with an online JSON schema checker), but nothing happens (no errors in the console).

The ajax query i tested thoroughly (works, and I can even parse the data.d returned), so I'm lost as how to proceed.

$.ajax({
    type: "POST",
    url: "/Search.asmx/GetListingsByPageSort",
    data: '{"sp":' + JSON.stringify(sp) + '}',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
        $('.table').footable({
            "rows": data.d
        });
    },
    error: function (xhr, status) {
        alert("fail: " + status);
    }
});

The HTML is

    <table class="table" data-paging="true">
<thead>
        <tr>
            <th class="hdrcolVdr" data-class="expand" data-type="html" data-name="vendor">Vendor </th>
            <th class="hdrcolMan" data-breakpoints="xs sm" data-type="html" data-name="manufacturer">Manufacturer </th>
            <th class="hdrcolProd" data-breakpoints="xs sm md" data-type="html" data-name="product_name">Product </th>
            <th class="hdrcolPrice" data-breakpoints="xs" data-type="html" data-name="price">Price </th>
            <th class="hdrcolI" data-breakpoints="xs sm" data-type="html">Info </th>
        </tr>
    </thead>
    </table>

Stumped.

While I have no solution to this, I just realized that the convenient paging/sorting footable script can't handle complex html as written (dropdowns, hidden fields, etc) - I need to put some of the fields in as hidden inputs and some fields have to be combined together (stock status will color code the price, for example). To do this, I'd have to re-parse the table after loading the data defeating any speed gains using native footable methods. Maybe v4 will have this ability. — MC9000, Jan 16 '17 at 03:54
footable usually puts the rows in tbody, if there is a header. Your table hasn't got one - try adding that. Also, I assume "data.d" is actually a JSON array, and not a string that looks like one? If the latter, you'd have to run JSON.parse on it first. Maybe give us a sample of the contents of data.d? — ADyson, Feb 16 '17 at 15:29
Thanks. I'll get back to this problem (I went back to FT v2, for now - it doesn't flash/redraw when paging and runs much faster than V3) — MC9000, Feb 16 '17 at 19:26

score 0 · Answer 1 · answered Mar 29 '17 at 12:10

I've found (after hard work) that the problem comes from the asynch way of gatting the response from the GET/POST. In my code this works:

rows : $.get('js/rw1.json')

but this didn't work:

rows : $.get("rest.php")

Even if they both gave the same values (seen tracking the net traffic).

I've solved forcing jQuery in synchronous mode so it waits for the response of the GET. Probably not a nice solution but it works. This is my code :

rows : ajaxRows();

where ajaxRows is:

function ajaxRows(){
    var retu;
    jQuery.ajaxSetup({async:false});        
    retu = $.get("rest.php");
    jQuery.ajaxSetup({async:true});     
    return retu;            
}

In your code maybe you should add to the $.ajax params:

async:false

HTH

Marco

How do I use jQuery ajax request for footable v3 - from a webservice?

1 Answers1