KingYak KingYak - 24 days ago 8
Javascript Question

Cant call Jquery function in if loop

my first ever question pretty sure I'm being a bit daft here, but am a beginner and would appreciate your help.

Im working on a webpage where there is a html table listing several columns of data.
When the page loads it runs a jquery script which counts the different types of "incidents" and plots them in another table which then another jquery script populates a graph.
I have a third script (javascript) which after a button is clicked, runs an if loop, which looks at the data in the first column and if it does not match the criteria then the row is deleted.

So far so good, the issue is that I want the script which populates the table for the graph to run again, but Im not sure how to call it from my if loop.

Ive put the two scripts below, basically I want to call the 1st script in the second script.

$(function () {
var NumFireAlarms = $("#incidents tr:contains('Fire Alarm')");
$("#result").html(NumFireAlarms.length + " Fire Alarm");
var firealarms = NumFireAlarms.length;
document.getElementById("no_of_incident_type").rows[1].cells[1].innerHTML = firealarms

var NumLockout = $("#incidents tr:contains('Lockout Out of Office Hours')");
$("#result").html(NumLockout.length + " Lockout Out of Office Hours");
var lockouts = NumLockout.length;
document.getElementById("no_of_incident_type").rows[2].cells[1].innerHTML = lockouts

var NumLockoutDayTime = $("#incidents tr:contains('Lockout Day Time')");
$("#result").html(NumLockout.length + " Lockout Day Time");
var lockoutsDayTime = NumLockoutDayTime.length;
document.getElementById("no_of_incident_type").rows[3].cells[1].innerHTML = lockoutsDayTime

var NumSensitiveIncident = $("#incidents tr:contains('Sensitive Incident')");
$("#result").html(NumSensitiveIncident.length + " Sensitive Incident");
var SensitiveIncident = NumSensitiveIncident.length;
document.getElementById("no_of_incident_type").rows[4].cells[1].innerHTML = SensitiveIncident
});



function filterForGraph() {

var incident_category = document.getElementById("Incident_Category").value;
var start_date = document.getElementById("start_date").value;
var end_date = document.getElementById("end_date").value;
var staff_type = document.getElementById("Job_Title").value;

var i;
var count = 0;
var table_length = document.getElementById("incidents").rows;
var TL = table_length.length;

for (i = TL - 1; i >= 1; i--)
{
var category_column = document.getElementById("incidents").rows[i].cells.item(0).innerHTML;
var date_column = document.getElementById("incidents").rows[i].cells.item(1).innerHTML;
var staff_colunm = document.getElementById("incidents").rows[i].cells.item(8).innerHTML;

if (category_column === incident_category)
{
alert("yay")
count++
}
else if (category_column !== incident_category)
{
alert("boo")
document.getElementById("incidents").deleteRow(i);
//CALL FIRST SCRIPT HERE??

}
}

}

Answer

Hi JonSG tried your code and it didnt work not sure why, but it gave me some ideas to work with and I think Ive cracked it

 function Populate_Incident_No_Table() {
    //previously function called updateTable
    $(function () {

        var NumFireAlarms = $("#incidents tr:contains('Fire Alarm')").length;
        document.getElementById("no_of_incident_type").rows[1].cells[1].innerHTML = NumFireAlarms

        var NumLockout = $("#incidents tr:contains('Lockout Out of Office Hours')").length;
        document.getElementById("no_of_incident_type").rows[2].cells[1].innerHTML = NumLockout

        var NumLockoutDayTime = $("#incidents tr:contains('Lockout Day Time')").length;
        document.getElementById("no_of_incident_type").rows[3].cells[1].innerHTML = NumLockoutDayTime

        var NumSensitiveIncident = $("#incidents tr:contains('Sensitive Incident')").length;
        document.getElementById("no_of_incident_type").rows[4].cells[1].innerHTML = NumSensitiveIncident
    });
}

function filterForGraph() {

    var incident_category = document.getElementById("Incident_Category").value;
    var i;
    var TL = document.getElementById("incidents").rows.length;

    for (i = TL - 1; i >= 1; i--)
    {
        var category_column = document.getElementById("incidents").rows[i].cells.item(0).innerHTML;

        if (category_column !== incident_category)
        {

            document.getElementById("incidents").deleteRow(i);

        }
    }
    Populate_Incident_No_Table();
    drawGraph();
}

I think the issue was how I was trying to call the functions. So what I've done to achieve what I wanted (please excuse any bad terminology / phrasing).

First I tried to name the function $(function updateTable(){ this did not work when I then tried to call the function like this updateTable();

Second thing I tried was putting the updateTable() function "inside" a function and call that function. This has worked for me I dont know why.

Thanks for your help without it I would not have thought to try what I did