Reputation: 125

jQuery insertBefore or before methods not working

I am doing a project for my degree. This project is a group project that is meant to be implemented in a school here in Cape Town, South Africa. You can check the entire git organisation on GitHub called Jewel Systems.

The project is basically a system to keep track of device rentals, such as reservations of devices by a teacher for a class, or a student want to loan a device. If the teacher choose too many devices to be rented out, then an error message will show up to tell the user.

I am busy on the front-end side of the project and I can't get the 2 jQuery methods to work. It worked before, didn't touch the project for a month and error messages just stopped showing up. I checked the console on Firebug, it showed the error message from the server.

So lets say I am at the login screen, the login screen looks like this:

the code for the login.js script is:

$(document).ready(function() {

  if (typeof sessionStorage.email != "undefined") {
    window.location = "/user";
  } else {
    // $('.content .loading').fadeIn(1000);
    // $('.content .loading').css('display', 'block');
    // $('.content .loading').delay(2000).fadeOut(1000);
    // $('.content p.greeting').delay(5000).fadeIn(1000);
    // $('.content p.greeting').delay(2000).fadeOut(1000);
    // $('.content .panel').delay(10000).fadeIn(1000);
    // $('.content .panel').fadeIn(1000);
  }

  $('.content .panel').fadeIn(1000);

  $('form.loginForm').submit(function(event) {
    var data = $(this).serializeArray();

    $.ajax({
      url: domain + 'testauth',
      type: 'POST',
      data: JSON.stringify({"username": data[0].value, "password" : data[1].value}),
      contentType: 'application/json',
      success: function(result, status, xhr) {
        var user_data = result.data;

        if (typeof(Storage) !== "undefined") {
          sessionStorage.user_id = user_data.id;
          sessionStorage.email = user_data.email;
          sessionStorage.fname = user_data.fname;
          sessionStorage.lname = user_data.lname;
          sessionStorage.user_type = user_data.type;
          sessionStorage.created_at = user_data.created_at;
          $.get(domain + "user/" + user_data.id, function(data) {
            data = data.data;
            if (data.loaned[0] !== undefined) {
              if (data.loaned.length > 1) {
                sessionStorage.device_loaned = data.loaned[0].type + ":" + data.loaned[0].id + "#" + data.loaned[1].type + ":" + data.loaned[1].id;
              } else if (data.loaned.length === 1) {
                sessionStorage.device_loaned = data.loaned[0].type + ":" + data.loaned[0].id;
              }
            } else {
              sessionStorage.device_loaned = null;
            }
            if (data.privileges.length > 1) {
              sessionStorage.perm = data.privileges[0].type + "#" + data.privileges[1].type;
            } else if (data.loaned.length === 1) {
              sessionStorage.perm = data.privileges[0].type;
            }
            window.location = "/user";
          });
        } else {
          $('.error-message').remove();
          var msg = $('<div class="alert alert-danger error-message"></div>').html("<strong>Oh snap!</strong> Your browser doesn't support local storage, please update your browser or download <a href='https://www.google.com/chrome/'>Google Chrome</a>/<a href='https://www.mozilla.org/en-US/firefox/new/'>Mozilla Firefox</a>.");
          $(msg).insertBefore('.panel');
          event.preventDefault();
        }
      },
      error: function(xhr, status, error) {
        try {
          var response = JSON.parse(xhr.responseText);
          $('.error-message').remove();
          var msg = $('<div class="alert alert-danger error-message"></div>').html("<strong>Oh snap!</strong> The email/ID or password entered is incorrect, please try again.");
          // $(msg).insertBefore('.panel');
          $('.panel').before(msg);
        } catch (e) {
          console.log(e);
        }
      },
    });
    event.preventDefault();
  });
});

I believe that it isn't only the error message that isn't working. I thought at first that the problem could be my laptop because it did come into some issues at first then I tested the system on another machine but it did the same thing so I am thinking that it maybe my code that went wrong.

My website is hosted off the link-server (The repo can be found on the Jewel Systems organisation, you will need gradle installed to run this server).

Upvotes: 0