jeudi 23 janvier 2020

jQuery: Why is this conditional not evaluating to either case provided for error handling?

My previous posts haven't fared well in the past so I will try to be precise and accurate!

I have a seemingly trivial error somewhere in my code and I can't figure out what exactly it is.

I have a table which is rendered in HTML with the aid of PHP. In this table passengers have the option to add their weight if their booking requires them to enter it (for a helicopter tour supplier). When entered, passengers submit and that's that! There is a second option if the booking has a Hotel Item, where the client will be presented with the option to enter the hotel in which they are staying (for transportation arrangements to the tour).

As appropriate I have added some simple error prevention/checking to ensure that clients using the portal cannot submit a request to the server unless the inputs are filled with values.

The error checks for the weight fields work as expected (when this is all that's required), however when I come across a booking with a hotel item, not only will the errors not display, but when information is entered into the text boxes it does not follow the logical path to submit the request as a post.

This is the error checking when it works and after entering text will submit to the server. This is the error checking when it *works* and after entering text *will* submit to the server.

This is the same form with two additional fields for Hotel. Something to note, what is displayed is the form's state after I have clicked the 'Update Passenger Details' button. Nothing is displayed and when text is entered nothing happens when the button is pressed.

This is the same form with two additional fields for Hotel. Something to note, what is displayed is the form's state *after* I have clicked the 'Update Passenger Details' button. Nothing is displayed and when text *is* entered nothing happens when the button is pressed.

Now some code:

HTML/PHP

<div class='col-sm-18 card my-3' id='passenger-table-$booking_id'>
    <div class='card-body px-0 px-sm-3'>
        <div class='col-sm-18 card-header mb-4'>
            <div class='row'>

                <div class='col-xs-18 col-sm-9 text-sm-left pb-3 pb-sm-0'>
                    <strong>
                        <span class='icon-user'></span> 
                                        Passengers
                    </strong>
                </div>

                $passenger_buttons_html
                <span class='col-xs-18 col-sm-9 text-sm-left pb-3 pb-sm-0'>
                    <small hidden class='text-danger' id='submit-error'>Please enter missing information before submitting</small>
                </span>
            </div>
        </div>

        <div id='passenger-table-overflow-div'>
            <table class='table table-bordered'>
                <thead>
                    <tr>
                        <th>Title&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Date of Birth</th>
                        " . ($supplierGenCheck ? "<th>Weight (lbs)</th>" : "" )
                         . ($hasHTLCheck ? "<th>Hotel Name</th>" : "") . "
                    </tr>
                </thead>
                <tbody>
                    " . $html . "
                </tbody>
            </table>
        </div>
        $update_btn
    </div>
</div>

jQuery/JS

let e_chk = 0;

// ERROR HANDLING
if (hasGen && hasHotel) {
  $(`#passenger-table-${booking_id} table tr > td > input`).each(function() {
    if (!$(this).val().trim()) {
      e_chk++;
    }
  });
} else if (hasGen && !(hasHotel)) {
  $(`.weight`).each(function() {
    if (!$(this).val().trim())
      e_chk++;
  })
} else if (hasHotel && !(hasGen)) {
  $(`.hotel`).each(function() {
    if (!$(this).val().trim())
      e_chk++;
  })
}

// Used simply for error checking as with most alerts etc...here (not final solutions for 
// confirmation/erroring 

alert("After checking, there are: (" + e_chk + ") errors");

// e_chk shows 2 errors if weight only and four if the hotel and weight inputs are present
// as expected? yes... but why won't the following if statement evaluate false and execute the
// else condition ?

// This whole area is skipped when there are two input columns (i.e. four text boxes)
if (e_chk < 1) {
  alert("got here...passed");
  // SAFETY AND ERROR HANDLING
  if (booking_id.length >= 5 && passenger_table.length > 10) {
    // POST DATA
    $.post("/customer-portal/assets/ajax/confirm-passenger-details.php", {
      booking_id,
      passenger_table
    }, function(data) {
      if (data.trim() !== "N") {
        alert(hasGen + "  " + hasHotel);
        alert("Thank you for submitting your correct details.  Our Operations Department will review these details and amend if necessary.");
        top.location.href = `/customer-portal/?id=${portalSessionID}`;
      } else {
        alert("Failed to save passenger information");
      }
    });
  } else {
    alert("Booking ID not found");
  }
} else {
  // this will evaluate for the first example (weight only) but will not execute
  // when the hotels fields are present?
  $(`#submit-error`).fadeIn();
  $(`.weight, .hotel`).removeAttr("disabled");
}
}

In regards to the alert which displays the number of errors: this is the result for Weight input only (there are two for two empty inputs):

This is the expected number of errors in the case of weight only inputs displayed This is the expected number of errors in the case of weight only inputs displayed

This is the result for Weight and Hotel inputs being left empty (there are 4 errors reported for four empty inputs):

This is the expected number of errors in the case of both hotel and weight inputs displayed in table

There are no errors to provide from the Developers Tools

There are no errors from compiler when JS is compiled and executed on the bash console




Aucun commentaire:

Enregistrer un commentaire