Wednesday, 28 November 2018

jQuery removeClass triggering, but not removing class

I am utilizing a datepicker script for some text inputs in a form. The form lives within a modal that is triggered by a button in a table. I am having a problem when I use my export to csv script, the datepicker is showing up in my csv and breaking stuff.

So I figured, easiest solution is to remove datepicker class on export, but this isn't working.

I have added an alert into the jQuery code to ensure its even triggering. Sure enough it is. For some reason it just will not remove that class. Any suggestions on how to fix removeClass, or better yet, how to ensure the datepicker isnt showing up in my csv.

Here is the modal in which the form lives:

<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel">
  <div class="modal-dialog controls" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" type="button" data-dismiss="modal" aria-label="Close"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
        <h4 class="modal-title bold" id="controlsModalLabel">Edit Entry</h4>
      </div>
      <div class="modal-body">
        <h3 class="center">You are about to edit entry for</h3><br/>
        <h3 class="alert login"></h3>
        <form class="smallForm" method="POST" action="/staffmanager/loa_accom_update">
          <input id="_csrf" type="text" name="_csrf" hidden="hidden"/>
          <input class="la_id form-control" type="hidden" name="la_id"/>
          <label class="bold">Start date:</label>
          <input class="start_date date datepicker form-control" type="text" name="start_date" autocomplete="off" required="required"/><br/>
          <label class="bold">End date:</label>
          <input class="end_date date datepicker form-control" type="text" autocomplete="off" name="end_date"/><br/>
          <label class="bold">SIM link:</label>
          <input class="sim form-control" type="text" name="sim" autocomplete="off" required="required"/><br/>
          <label class="bold">Notes:</label>
          <textarea class="note form-control" type="textarea" name="note" autocomplete="off"></textarea>
          <div class="modal-footer">
            <button class="btn btn-default" type="button" data-dismiss="modal">Cancel</button>
            <button class="btn btn-success" type="submit">Submit</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

jquery code:

$('#export').on('click', function(){
  $('.date').removeClass('datepicker');
});

table export to csv script:

function downloadCSV(csv, filename) {
    var csvFile;
    var downloadLink;

    // CSV file
    csvFile = new Blob([csv], {type: "text/csv"});

    // Download link
    downloadLink = document.createElement("a");

    // File name
    downloadLink.download = filename;

    // Create a link to the file
    downloadLink.href = window.URL.createObjectURL(csvFile);

    // Hide download link
    downloadLink.style.display = "none";

    // Add the link to DOM
    document.body.appendChild(downloadLink);

    // Click download link
    downloadLink.click();
}

function exportTableToCSV(filename) {
    var csv = [];
    var rows = document.querySelectorAll("table tbody tr,table thead tr");

    for (var i = 0; i < rows.length; i++) {
        var row = [], cols = rows[i].querySelectorAll("td,th");

        for (var j = 2; j < cols.length; j++) 
            row.push(cols[j].innerText.trim());

        csv.push(row.join(","));        
    }

    // Download CSV file
    downloadCSV(csv.join("\n"), filename+(new Date().getTime())+".csv");
}



from jQuery removeClass triggering, but not removing class

No comments:

Post a Comment