How to call a function in an HTML doc from an external jQuery file

Question

I need help on the logic and method to run a function in a html doc after a function in an external js (jQuery) file has run.

I have two external jQuery files. Both create tables but timesheet_test.js does much more than just this. timesheet_my_table_test.js (creates table 1) and timesheet_test.js (creates table 2).

Table 1 has cells that run a function in the html document when clicked.

eg

.append('<td class="earlyshift" onclick="setShift(this.className)"></td>')

The function:

function setShift(className) {
  // Gets the workday shift from the localStorage.
  const targetStateValue = localStorage.getItem('shiftstatus');

  // The logic for updating the value.
  if (targetStateValue === null) {
    localStorage.setItem('shiftstatus', className);
  } else {
    localStorage.setItem('shiftstatus', className);
  }
}

timesheet_test.js then runs a function when clicking on the table header (in table 2), the actions of which depends on which cell was last clicked in table 1, above.

eg

Mousedown:

if (targetStateValue === "earlyshift") {
  var startCell = [0,curColHead.data("col")];
  isColSelecting = true;
  startSelecting(ev,startCell);
}

Mouseup:

if (targetStateValue === "earlyshift") {
  var endCell = [14,curColHead.data("col")];
  var correctedCells = cellCompare(operationArea.startCell,endCell);
  afterSelecting(ev,correctedCells);                        
}

The end result of this function is it changes the background color in table 2 (which is currently set in css), for cell 0 to cell 14 in the selected column.

I then want to run another function, that is in the html document (without adding any more buttons to click). I currently have to click a button to run it and want to do away with the button (it already takes between 2 and 3 table clicks to complete the process). I want it to execute after the Mouseup event, above:

The function is far from complete but is working as is. When complete it will change the icon/image (which is currently set in css), in the corresponding cell that started this process:

$("#J_timingSubmit2").click(function(ev){

  var sheetStates = sheet.getSheetStates();
  var rowsCount = 15;
  var colsCount = 7; //currently not used but want to use it in testData.match below.
  var timesheetrowsdata = "";
  var timesheetcoldata = "";

  for(var row= 0, rowStates=[]; row<rowsCount; ++row){
    rowStates = sheetStates[row];
    timesheetrowsdata += rowStates+(row==rowsCount-1?'':',');
  }

  timesheetcoldata = timesheetrowsdata.replace(/,/g, '');

  const testData = timesheetcoldata;
  const dataArr = testData.match(/.{1,7}/g)
  .map(s => Number(s[0]))

  let dataSum = dataArr.reduce((a, b) => a + b);

  let isSameAsRowsCount = dataSum == rowsCount;

});

This is the working button code (that successfully runs the function above):

<button class="J_sheetControl" id="J_timingSubmit2">Submit</button>

How do I translate that button code so I can run the function form the other js files?

Answer 1

I would refactor your code so that you have a "library" javascript file. then include that file on both pages.

EDIT: This simulates the sort of thing I was trying to explain. Each <script> tag would be seperate files though, but it works in the same way.

If the "library js file" contains only functions it should be fine to put it anywhere on the page as JavaScript will cache all of the function and class stuff and allow you to use it anywhere, however, if you declare variables in the library file then make sure to put it above the actual javascript.

If your code still doesn't work after that then there is probably something wrong with your code

<html>
    <head>
        <script type="text/javascript">
            //library file
            var test = "hello world!";
        </script>
        <script type="text/javascript">
            //code
            console.log(test);
        </script>
    </head>
    <body>

    </body>
</html>

How to call a function in an HTML doc from an external jQuery file

Question

1 answers

solution1
1 ACCPTED 2019-08-19 15:09:02

How to call a function in an HTML doc from an external jQuery file

Question

1 answers

solution1 1 ACCPTED 2019-08-19 15:09:02

solution1
1 ACCPTED 2019-08-19 15:09:02