Function not defined Even though it;s on the same file

Question

I am writing a web page which reads data from an html data table and updates its data on a separate PHP file via an AJAX query on JavaScript. The file worked for a while until recently (when I didn't change any important code). Whenever I click a button that calls a function called getTableData I get an error saying it's not defined even though it's in the same file.

Can you please help me? Thanks!

HTML:

<button onclick="getTableData()">Aceptar</button>
<button value = "Cancelar" action="#">Cancelar</button>

JS:

function getTableData(){
        var array = [];
        var headers = [];
        $('#tablaListado th').each(function(index, item) {
            headers[index] = $(item).html();
        });
        $('#tablaListado tr').has('td').each(function() {
            var arrayItem = {};
            $('td', $(this)).each(function(index, item) {
                if($(this).find("textarea").length){
                    var costo = $(this).find('textarea').val();
                    arrayItem[headers[index]] = costo;
                }else{
                    arrayItem[headers[index]] = $(item).html();
                }
            });
            array.push(arrayItem);
        });

        actualizarCostos(array);
    }

    function actualizarCostos(array){
        if(array.constructor === Array){
            for(var i = 0; i < array.length ; i++){
                console.log(array[i]);
                console.log(JSON.stringify(array[i]));
                $.ajax({
                    url: "http://www.page.com/Update.php",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    //jsonp: false,
                    //jsonpCallback: jsonCallback,
                    cache: true,
                    data:{ "table_data": JSON.stringify(array[i])},
                    success: function (data) {
                        callback();
                    },
                    error: function(xhr,status,err){
                         //alert("DEBUG: status"+status+" \nError:"+err);
                         alert(xhr.responseText);
                     }, 
                    traditional: true
                });
            }
        }else{
            alert("Input must be array");
        }
    }

    function callback(){
        alert("se paso!!!!");
    }

Also, I have also tried using document.getElementById("buttonAccept").click(getTableData); and the function never fires up :(

Answer 1

You're missing a method parameter to your jquery ajax function. This is causing your file to short-circuit because the interpreter is calling this a syntax error. This means, your functions are not being defined.

This was the error from the function

{"error": "Please use POST request"}

So, you may need to fix your ajax function as well as the endpoint for your request.