3
\$\begingroup\$

I've been working on a note tool for my company to help streamline verifying and noting accounts. I've added in extra features that help with different aspects of the job as well.

I'm wondering if there is anything I can do to streamline some of the functions I've created.

Such as the "Prefill options". They take the contents of hidden divs and append to the note text boxes. I'm sure there is a better way of doing this but I've been looking at it for too long now I think.

Any feedback is welcome!

I've stripped out any references to the company to avoid any issues of posting that information.

Full source too large to paste here: https://pastebin.com/pdYH2DMq

Below is how I'm currently filling in boxes with pre-made templates.

/* Fill issue and resolution boxes with templates */
$(document).ready(function() {
  $('.prefill').on("click", function(e) {
    var id = $(this).attr('id');
    id1 = id + "1";
    id2 = id + "2";
    id3 = id + "3";
    if (document.getElementById("issue").value != '') {
      document.getElementById("issue").value += '\n'
    }
    if (document.getElementById("reso").value != '') {
      document.getElementById("reso").value += '\n'
    }
    if (document.getElementById("scratch").value != '') {
      document.getElementById("scratch").value += '\n'
    }
    document.getElementById("issue").value += document.getElementById(id1).innerHTML;
    document.getElementById("reso").value += document.getElementById(id2).innerHTML;
    if (document.getElementById(id3).innerHTML != '') {
      document.getElementById("scratch").value += document.getElementById(id3).innerHTML;
    }
    $('textarea').autoHeight();
  });
});

/* Add End Result buttons */
$(document).ready(function() {
  $('.ending').on("click", function(e) {
    endid = $(this).attr('id');
    endid1 = endid + "1";
    if (document.getElementById("reso").value != '') {
      document.getElementById("reso").value += '\n'
    }
    document.getElementById("reso").value += document.getElementById(endid1).innerHTML;
    $('textarea').autoHeight();
  })
})
/* //Add End Result */
<!-- css and js files -->

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js" integrity="sha384-kW+oWsYx3YpxvjtZjFXqazFpA7UP/MbiY4jvs+RWZo2+N94PFZ36T6TFkc9O3qoB" crossorigin="anonymous"></script>



<!-- Prefill dropdowns -->
<div class="row" id="prefillrow">
  <div class="col-lg-12">

    <div class="btn-group">
      <button type="button" class="btn btn-sm btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <i class="fas fa-dollar-sign fa-fw"></i>
                                </button>
      <div class="dropdown-menu">
        <h6 class="dropdown-header">Billing Issues</h6>
        <a class="dropdown-item prefill" href="#" id="paybill">Pay Bill</a>
        <a class="dropdown-item prefill" href="#" id="aru">ARU Issue</a>
        <a class="dropdown-item prefill" href="#" id="sd">Restore Soft Disconnect</a>
        <a class="dropdown-item prefill" href="#" id="npd">Non-Pay Disconnect</a>
        <a class="dropdown-item prefill" href="#" id="reload">Reload Prepaid Internet</a>
        <a class="dropdown-item prefill" href="#" id="myvyve">MyVyve Setup/Issue</a>
        <a class="dropdown-item prefill" href="#" id="increase">Unexpected Bill Increase</a>
        <a class="dropdown-item prefill" href="#" id="upgrade">Upgrade Options</a>
        <a class="dropdown-item prefill" href="#" id="raf">Refer A Friend</a>
      </div>
    </div>

    <div class="btn-group">
      <button type="button" class="btn btn-sm btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <i class="fas fa-globe-americas fa-fw"></i>
                                </button>
      <div class="dropdown-menu">
        <h6 class="dropdown-header">Internet Issues</h6>
        <a class="dropdown-item prefill" href="#" id="internetout">Internet Out</a>
        <a class="dropdown-item prefill" href="#" id="custmodem">Add Customer Owned Modem</a>
        <a class="dropdown-item prefill" href="#" id="wifi">Can't Connect to WiFi</a>
        <a class="dropdown-item prefill" href="#" id="custrouter">Customer Owned Router Issue</a>
      </div>
    </div>

    <div class="btn-group">
      <button type="button" class="btn btn-sm btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <i class="fas fa-tv fa-fw"></i>
                                </button>
      <div class="dropdown-menu">
        <h6 class="dropdown-header">Video Issues</h6>
        <a class="dropdown-item prefill" href="#" id="videoout">No Video</a>
        <a class="dropdown-item prefill" href="#" id="tvpair">Pair TV</a>
        <a class="dropdown-item prefill" href="#" id="dtapair">Pair DTA</a>
        <a class="dropdown-item prefill" href="#" id="audio">No Audio/Wrong Language</a>
        <a class="dropdown-item prefill" href="#" id="noequip">No Equip Issue</a>
        <a class="dropdown-item prefill" href="#" id="activate">"Activate Service"</a>
        <a class="dropdown-item prefill" href="#" id="notinsub">"Not In Subscription"</a>
        <a class="dropdown-item prefill" href="#" id="dvr">"DVR Service Unavailable"</a>
        <a class="dropdown-item prefill" href="#" id="glitch">Video Glitching</a>
        <a class="dropdown-item prefill" href="#" id="tivonet">Xstream Network Issue</a>
      </div>
    </div>

    <div class="btn-group">
      <button type="button" class="btn btn-sm btn-light dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <i class="fas fa-phone fa-fw"></i>
                                </button>
      <div class="dropdown-menu">
        <h6 class="dropdown-header">Phone Issues</h6>
        <a class="dropdown-item prefill" href="#" id="phoneout">Phone Out</a>
        <a class="dropdown-item prefill" href="#" id="phnport">Port Phone Number</a>
        <a class="dropdown-item prefill" href="#" id="phnchange">Request Phone Number Change</a>
      </div>
    </div>

    <div class="btn-group">
      <button type="button" class="btn btn-sm btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    Other
                                </button>
      <div class="dropdown-menu">
        <a class="dropdown-item prefill" href="#" id="outage">Outage</a>
        <a class="dropdown-item prefill" href="#" id="wheretech">Where's The Tech?</a>
      </div>
    </div>

  </div>
</div>
<!-- //Prefill dropdowns -->


<br>


<!-- Issue Box -->
<div class="row">
  <div class="col-lg-12">
    <div class="input-group">
      <textarea type="textarea" placeholder="REASON FOR CALL" class="form-control form-control-sm" rows="3" name="issue" id="issue" title="REASON FOR CALL" tabindex="11" required></textarea>
      <div class="input-group-append">
        <button type="button" class="btn btn-info btn-osx btn-sm" name="hipchat" style="info" id="hipchat" onclick="return genHipChatNote()">Ask<br> <i class="far fa-comment"></i>HipChat<br> Note <i class="far fa-copy"></i></button>
      </div>
    </div>
  </div>
</div>
<!-- Issue Box -->


<br>


<!-- Resolution Box -->
<div class="row">
  <div class="col-lg-12">
    <textarea type="textarea" placeholder="STEPS TAKEN AND OUTCOME OF CALL" class="form-control form-control-sm" rows="3" name="reso" id="reso" title="STEPS TAKEN AND OUTCOME OF CALL" style="width: 100%;" tabindex="12" required></textarea>
  </div>
</div>
<!-- Resolution Box -->


<br>




<!-- End Results Hidden Container -->
<div class="row" id="endbuttonsrow">
  <div class="col-lg-12">

    <button type="button" id="fixed" class="btn btn-success btn-sm ending"><i class="far fa-thumbs-up"></i> Fixed</button>
    <button type="button" id="notfixed" class="btn btn-danger btn-sm ending"><i class="far fa-thumbs-down"></i> Not Fixed</button>
    <button type="button" id="wo" class="btn btn-info btn-sm ending"><i class="fas fa-truck"></i> WO
                                </button>
    <button type="button" id="coswo" class="btn btn-info btn-sm ending"><i class="fas fa-truck"></i> COS WO
                                </button>

    <div class="d-none">
      <!-- Resolution addons- Not displayed - these are the details that get added to the Resolution Text box -->
      <div id="fixed1">RESOLVED</div>
      <div id="notfixed1">NOT RESOLVED</div>
      <div id="wo1">CREATED WORK ORDER TO FURTHER TROUBLESHOOT THE ISSUE</div>
      <div id="coswo1">CREATED WORK ORDER FOR TECH TO FINISH UPGRADE</div>
    </div>
  </div>
</div>
<!-- End Results Hidden Container -->


<!-- Scratch Pad Box -->
<div class="row">
  <div class="col-lg-12">
    <textarea type="textarea" placeholder="SCRATCH PAD NOTES. NOT PART OF CUST NOTES" class="form-control form-control-sm" name="scratch" rows="3" id="scratch" title="SCRATCH PAD NOTES. NOT PART OF CUST NOTES" tabindex="13"></textarea>
  </div>
</div>
<!-- Scratch Pad Box -->


<!-- Prefill Content Hidden DO NO INDENT! Indents appear in prefill contents -->

<div class="d-none">


<!-- Other Issues Templates -->
<div id="outage1">Service Out</div>
<div id="outage2">Informed CST of current outage in the area</div>
<div id="outage3">Suggested steps
step1
step2</div>
<div id="wheretech1">Where's the tech</div>
<div id="wheretech2"></div>
<div id="wheretech3">Suggested steps
step1
step2</div>


<!-- Billing Templates -->
<div id="paybill1">Billing - CST Calling to pay bill</div>
<div id="paybill2"></div>
<dir id="paybill3">Suggested steps
step1
step2</dir>
<div id="sd1">Billing - Account in Soft Disconnect</div>
<div id="sd2"></div>
<div id="sd3">Suggested steps
step1
step2</div>
<div id="reload1">Billing - Need to reload prepaid internet</div>
<div id="reload2"></div>
<div id="reload3">Suggested steps
step1
step2</div>
<div id="npd1">Billing - Non Pay Disconnect</div>
<div id="npd2"></div>
<div id="npd3">Suggested steps
step1
step2</div>
<div id="aru1">Billing - ARU not working</div>
<div id="aru2"></div>
<div id="aru3">Suggested steps
step1
step2</div>
<div id="myacct2"></div>
<div id="myacct3">Suggested steps
step1
step2</div>
<div id="increase1">Billing - Unexpected Bill Increase</div>
<div id="increase2"></div>
<div id="increase3">Suggested steps
step1
step2</div>
<div id="upgrade1">Billing - Customer would like to discus upgrade options</div>
<div id="upgrade2"></div>
<div id="upgrade3">Suggested steps
step1
step2</div>
<div id="raf1">Billing - Refer a Friend</div>
<div id="raf2"></div>
<div id="raf3">Suggested steps
step1
step2</div>
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>


<!-- Internet Templates -->
<div id="internetout1">Internet - Out</div>
<div id="internetout2"></div>
<div id="internetout3">Suggested steps
step1
step2</div>
<div id="custmodem1">Internet - CST wants to add customer owned modem
MAC address of new modem: ##########</div>
<div id="custmodem2"></div>
<div id="custmodem3">Suggested steps
step1
step2</div>
<div id="wifi1">Internet - Cant connect to WiFi</div>
<div id="wifi2"></div>
<div id="wifi3">Suggested steps
step1
step2</div>
<div id="custrouter1">Internet - Customer owned router issue</div>
<div id="custrouter2"></div>
<div id="custrouter3">Suggested steps
step1
step2</div>
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>


<!-- Video Templates -->
<div id="videoout1">Video - Out</div>
<div id="videoout2"></div>
<div id="videoout3">Suggested steps
step1
step2</div>
<div id="glitch1">Video - Glitching</div>
<div id="glitch2"></div>
<div id="glitch3">Suggested steps
step1
step2</div>
<div id="tvpair1">Video - Cant change volume or turn TV power on/off
TV Brand: </div>
<div id="tvpair2"></div>
<div id="tvpair3">Suggested steps
step1
step2</div>
<div id="audio1">Video - Audio/Language Issue</div>
<div id="audio2"></div>
<div id="audio3">Suggested steps
step1
step2</div>
<div id="dtapair1">Video - Cant change channels/open guide/menus</div>
<div id="dtapair2"></div>
<div id="dtapair3">Suggested steps
step1
step2</div>
<div id="noequip1">Video - No equipment to troubleshoot</div>
<div id="noequip2"></div>
<div id="noequip3">Suggested steps
step1
step2</div>
<div id="activate1">Video - "Your service needs to be activated before continuing" message on screen</div>
<div id="activate2"></div>
<div id="activate3">Suggested steps
step1
step2</div>
<div id="notinsub1">Video - "Not included in your current subscription" message on screen</div>
<div id="notinsub2"></div>
<div id="notinsub3">Suggested steps
step1
step2</div>
<div id="dvr1">Video - "DVR service unavailable" Message on screen</div>
<div id="dvr2"></div>
<div id="dvr3">Suggested steps
step1
step2</div>
<div id="tivonet1">VIDEO - XSTREAM BOX NOT CONNECTING TO INTERNET</div>
<div id="tivonet2"></div>
<div id="tivonet3">Suggested steps
step1
step2</div>
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>



<!-- Phone Templates -->
<div id="phoneout1">Phone Out</div>
<div id="phoneout2"></div>
<div id="phoneout3">Suggested steps
step1
step2</div>
<div id="phnport1">Phone - Port Number from previous carrier</div>
<div id="phnport2"></div>
<div id="phnport3">Suggested steps
step1
step2
</div>
<div id="phnchange1">Phone - CST requesting to change phone number</div>
<div id="phnchange2"></div>
<div id="phnchange3">Suggested steps
step1
step2
</div>
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>



</div>
<!-- Prefill Content Hidden DO NO INDENT! Indents appear in prefill contents -->

\$\endgroup\$
1
\$\begingroup\$

This code has a lot of DOM Lookups. Those are expensive so it is wise to store those in a variable and utilize the variable instead of repeatedly querying the DOM each time. It also mixes jQuery selectors with vanilla JS DOM methods like document.getElementById(). If you are going to use jQuery for somethings, why not be consistent and use it for all DOM lookups? For example, the .val() method can be used to get or set the value of the first element in a jQuery collection.

$(function() {  //newer format for $(document).ready()
  var prefillEls = $('.prefill');
  var endingEls = $('.ending');
  var issueEl = $('#issue');
  var resoEl = $('#reso');
  var scratchEl = $('#scratch');

  prefillEls.on("click", function(e) {
    //...
    if (issueEl.val() != '') {
      issueEl.val(issueEl.val()  + '\n');
    }
    if (resoEl.val() != '') {
      resoEl.val(resoEl.val() + '\n');
    }
    if (scratchEl.val() != '') {
      scratchEl.val(scratchEl.val() + '\n');
    }

Additionally, the code can lookup associated values for Issue, resolution and scratch in JS memory instead of repeatedly querying the DOM. One could create mappings for those associations:

var issues = {
    "outage": "Service Out",
    "wheretech": "Where's the tech",
    "paybill": "Billing - CST Calling to pay bill",
    /* ... more ... */
};
var resolutions = {
    "outage": "Informed CST of current outage in the area",
    /* ... more ... */
};

Then use those mapping to determine if a value should be used:

var id = $(this).attr('id');
if (id in issues) {
    issueEl.val(issueEl.val()  + issues[id]);
}
if (id in resolutions) {
    resoEl.val(resoEl.val() + '\n');
}

One could also use Map object could also be used instead of plain objects. Removing the values from the HTML will greatly simplify the markup and reduce DOM queries.

Similarly, those three repeated checks to see if a textarea has a value and append a new line character, followed by the new text to insert could be abstracted into a function.


There are two DOM ready callback blocks (i.e. $(document).ready(function() {). While it isn't wrong to have two, the code can be combined into one callback. If you wanted to keep them separate, you could abstract them into two separate functions and have them called from a single callback function.


The line endings are inconsistent- some lines have semi-colons and some don't. While Automatic Semicolon Insertion will typically handle such inconsistencies, it is advisable not to depend on it.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.