CODEWITHSUNDEEP
javascriptjqueryajaxgoogle-visualization
gmaestro
gmaestro

Reputation: 339

Call ajax function on google visualisation datatable click

Let's start from beginning... I want to create table with google visualisation datatable so I do that with this code:

function drawTroskovnik() {

var JSONObject = $.ajax({
            url: 'getTroskovnik.php', 
            dataType: 'json',
            data:{id_akt:ajdi},
                async: false,
            type: 'POST',
            }).responseText;

var data = new google.visualization.DataTable(JSONObject, 0.5);

and now all is fine.

After that I every value except date from row[0] put into input field, and that input field have an ID (costRedovi), so the code is:

for (var y = 0, maxrows = data.getNumberOfRows(); y < maxrows; y++) {
    for (var x = 1, maxcols = data.getNumberOfColumns(); x < maxcols; x++) {

      data.setValue(y, x, '<input id="costRedovi" class="form-control" value="'+data.getValue(y,x)+'">');
    }
}

Now all values from table row is in input field, and each input field have ID (costRedovi).

enter image description here

Now I want, when I change value in input field to start ajax function:

$.ajax({
            url: "insertCost.php",
            type: "POST",
            async: true, 
            data: { datum:$("#pocetak").val(),id_akt:ajdi}, //your form data to post goes here as a json object
            dataType: "html",

            success: function(data) {
                $('#output').html(data);
                $('#myModal').modal('hide');
                //drawVisualization();   
            },  
        });

but to start this function I need to get columnLabel of clicked cell... How I can get columnLable of clicked cell on focusout (jQuery function) ?

all code: http://jsfiddle.net/DMGxw/

Upvotes: 1

Views: 79

Answers (1)

asgallant
asgallant

Reputation: 26340

There is nothing in the Visualization API that will get you the column of a cell in the Table, so you have to add that metadata to your inputs:

data.setValue(y, x, '<input id="costRedovi" class="form-control" value="' + data.getValue(y, x) + '" data-column-label="' + data.getColumnLabel(x) + '">');

You can then read the data-column-label attribute to get the column label.

Upvotes: 1

Related Questions