Re: [ALUG] How to debug a bit of javascript?

On Tue, Mar 22, 2016 at 11:26:51PM +0000, Chris Green wrote:

I am using a thing called editablegrid which is mostly javascript.

I've got it working pretty well displaying my data in an editable grid but there's a couple of niggles that are driving me mad.

One is that the setting for the number of lines to be displayed in the grid doesn't work. I can set the number of lines in the code but I can't select it with the displayed selector.

The HTML has:-

<label for="pagecontrol">Rows per page: </label>
<select id="pagesize" name="pagesize">
    <option value="5">5</option>
    <option value="10">10</option>
    <option value="15">15</option>
    <option value="20">20</option>
    <option value="25">25</option>
    <option value="30">30</option>
    <option value="40">40</option>
    <option value="50">50</option>
</select>

Which displays the numbers one can select OK.

Then, in the javascript is the following:-

$("#pagesize").val(pageSize).change(function() { editableGrid.setPageSize($("#pagesize").val()); });

In the demo it works perfectly, in my copy it doesn't work at all. One can select a value but nothing changes.

How can I debug this? There are no errors in the Browser Console (firefox) nor in the apache log. It's as if the hooks are not being set but other hook functions in the initialisation are working OK.

Can I set a break point or something on the select and see what gets called?

There's also an 'onkeyup' not working just above .....

Aaaaaaaaaa!!!!!!!!! :-)

Here's the sequence of code in the grid initialisation function:-

// render the grid (parameters will be ignored if we have attached to an existing HTML table) renderGrid("tablecontent", "testgrid", "tableid");

// set active (stored) filter if any _$('filter').value = currentFilter ? currentFilter : '';

// filter when something is typed into filter _$('filter').onkeyup = function() { editableGrid.filter(_$('filter').value); };

// bind page size selector $("#pagesize").val(pageSize).change(function() { editableGrid.setPageSize($("#pagesize").val()); }); $("#barcount").val(maxBars).change(function() { editableGrid.maxBars = $("#barcount").val(); editableGrid.renderCharts(); });

If I change it as follows:-

// set active (stored) filter if any _$('filter').value = currentFilter ? currentFilter : '';

// filter when something is typed into filter _$('filter').onkeyup = function() { editableGrid.filter(_$('filter').value); };

// bind page size selector $("#pagesize").val(pageSize).change(function() { editableGrid.setPageSize($("#pagesize").val()); }); $("#barcount").val(maxBars).change(function() { editableGrid.maxBars = $("#barcount").val(); editableGrid.renderCharts(); });

// render the grid (parameters will be ignored if we have attached to an existing HTML table) renderGrid("tablecontent", "testgrid", "tableid");

Then my selectors and filter values work. Obviously the renderGrid() is never returning for some reason.

Why is it that explaining a problem so often shows how to fix it? :-)