error adding a row of data on click event

dinotom

I load a table on page load IF there is data retrieved, if not it is not initialized. When I add new data via the form, the input button click event handles adding that data to the table if it exists already, otherwise it gets the data and builds it.

When I'm adding a row, I keep getting the datatables warning,
Cannot re initialize datatables". I am NOT re initializing it, I am not changing any init parameters just simply adding a row of data.

here is the event handler:

 ideaButton.on('click', function (e) {<br />
        e.preventDefault();<br />
        var d = new Date();<br />
        var requestDate = (d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate());<br />
        var newIdea = new Object({});<br />
        newIdea.Date = requestDate;<br />
        newIdea.symbolId = symbolId;<br />
        newIdea.TradeDirection = $('option:selected', ddl).text();<br />
        newIdea.Notes = ideaNotes.val();<br />
        ideaDisplay.show();<br />
        $.when($.ajax({<br />
            type: "POST",<br />
            contentType: "application/json; charset=utf-8",<br />
            url: "../api/Ideas",<br />
            data: JSON.stringify(newIdea),<br />
            dataType: "json"<br />
        }))<br />
            .then(function (postedData) {<br />
                toastr.info('New idea data has been posted.');<br />
                // check if datatable has any data, if so add a row<br />
                var ideaId = postedData.aoData[0].id;<br />
                $.when(ideasService.GetIdeaById(ideaId))<br />
                    .done(function (idea) {<br />
                        var rowToAdd = new Object({});<br />
                        rowToAdd.Date = idea.Date;<br />
                        rowToAdd.CompanyInfo = idea.CompanyInfo;<br />
                        rowToAdd.TradeDirection = idea.TradeDirection;<br />
                        rowToAdd.Notes = idea.Notes;<br />
                        addRowToTable(ideaTable, JSON.stringify(rowToAdd), false);<br />
                    })<br />
                    .fail(function (jqXhr, textStatus, errorThrown, idea) {<br />
                        toastr.warning('Error adding new idea to table: ' + idea.CompanyInfo + '..' + textStatus + ' Error: ' + errorThrown);<br />
                    });<br />               
                resetControls();<br />
            })<br />
            .fail(function (jqXhr, textStatus, errorThrown) {<br />
                toastr.warning('Error posting new idea for: ' + symbEntry.val() + '..' + textStatus + ' Error: ' + errorThrown);<br />
            });<br />
    });<br />

here is the add row function;

 function addRowToTable(tableSelector, dataToAdd, highlight) {<br />      
        if (tableSelector.data().length > 0) {<br />
            var rowNode = tableSelector<br />
                .row.add(dataToAdd)<br />
                .draw().node();<br />         
            //use this if you want to highlight the added row by passing true in the call
            if (highlight) {<br />
                $(rowNode)<br />
               .css('color', 'yellow')<br />
               .animate({ color: 'black' });<br />
            }<br />          
        } else {<br />
            // if it doesn't, bind this as its first data<br />
            // intitalize datatable with data called via ajax<br />
            populateTodaysIdeaTable(tableSelector);<br />        
        }
    }

allan

Hi,

Thanks for the details! I don't actually see where the DataTable is being constructed at all in the above code, so I'm presuming that it is somewhere else, and possibly being called twice, resulting in the error. Are you able to link me to the page so I can take a look and see what might be going wrong? If not, could you send me the code for the page - allan@ this domain.net.

Many thanks,
Allan

dinotom

I actually subscribed for an hour of service as I have a number of other questions and I would prefer the one on one approach. I'll figure out when to get that going tomorrow.