jQuery running properly in one place, but not in another

Question

Alright, so I have the following code. The first alert runs properly upon load, but the second alert never does. To add on, clicking on the button with id=sign never works, but that's a separate problem. I feel the "alert" might be a clue as to where the id is going wrong, so any help will be useful. Thanks.

<script>
  alert("Here #1");
  $(document).ready(function() {
    $("#buttonClick").click(function() {
      var div = $("#mainBackground");
      div.slideUp(400, function() {
        redirect();

      });
    });
  });

  alert("Here #2");

  $(document).ready(function() {
    $("#sign").click(function() {
      jQuery.ajax({
        url: "check_availability.php",
        data: 'username=' + $("#username").val(),
        'password=' + $("#password").val();
        type: "POST",
        success: function(data) {
          alert("hereagain");
          if ($("#username").val() === "") {
            //Do nothing
          } else if ($('#username').val().length < 5) {
            $("#usernameConsole").html("Username must be 5-15 characters");
            $("#username").css('backgroundColor', '#ff6666');
            $("#usernameAvailable").css('color', '#ff6666');
          } else if (data === "accept") {
            $("#usernameConsole").html("Signed In");
            $("#username").css('backgroundColor', '#66cc66');
            $("#usernameAvailable").css('color', '#66cc66');
          } else {
            $("#usernameConsole").html("Not accepted");
            $("#username").css('backgroundColor', '#ff6666');
            $("#usernameAvailable").css('color', '#ff6666');
          }
        },
        error: function() {}
      });

    });
  });
</script>

<script>

Answer 1

Fixed code:

alert("Here #1");
$(document).ready(function() {
  $("#buttonClick").click(function() {
    var div = $("#mainBackground");
    div.slideUp(400, function() {
      redirect();

    });
  });
});

alert("Here #2");

$(document).ready(function() {
  $("#sign").click(function() {
    jQuery.ajax({
      url: "check_availability.php",
      data: ['username=' + $("#username").val(), 'password=' + $("#password").val()],
      type: "POST",
      success: function(data) {
        alert("hereagain");
        if ($("#username").val() === "") {
          //Do nothing
        } else if ($('#username').val().length < 5) {
          $("#usernameConsole").html("Username must be 5-15 characters");
          $("#username").css('backgroundColor', '#ff6666');
          $("#usernameAvailable").css('color', '#ff6666');
        } else if (data === "accept") {
          $("#usernameConsole").html("Signed In");
          $("#username").css('backgroundColor', '#66cc66');
          $("#usernameAvailable").css('color', '#66cc66');
        } else {
          $("#usernameConsole").html("Not accepted");
          $("#username").css('backgroundColor', '#ff6666');
          $("#usernameAvailable").css('color', '#ff6666');
        }
      },
      error: function() {}
    });

  });
});

You were passing the data in the ajaxfunction wrong.

Edit 1: Preferably though, pass data as an object:

data: {fieldName1: value1, fieldName2: value2}

Answer 2

In jQuery, you have to know when the DOM is ready to execute any code, because, jQuery is about the DOM manipulation and you can't manipulate html tags when doesn't exist in the DOM.

You can use:

$(document).ready(function()
{
    // Code...
});

Or

$(function()
{
    // Code...
});

$(document).ready(function() { // This code makes sure to execute Javascript code when the DOM is loaded completely, only once.
  alert("Here #1");

  $("#buttonClick").click(function() {
    var div = $("#mainBackground");
    div.slideUp(400, function() {
      redirect();

    });
  });

  alert("Here #2");

  $("#sign").click(function() {
    jQuery.ajax({
      url: "check_availability.php",
      data: { // Correct
        username: $("#username").val(),
        password: $("#password").val()
      },
      type: "POST",
      success: function(data) {
        alert("hereagain");
        if ($("#username").val() === "") {
          //Do nothing
        } else if ($('#username').val().length < 5) {
          $("#usernameConsole").html("Username must be 5-15 characters");
          $("#username").css('backgroundColor', '#ff6666');
          $("#usernameAvailable").css('color', '#ff6666');
        } else if (data === "accept") {
          $("#usernameConsole").html("Signed In");
          $("#username").css('backgroundColor', '#66cc66');
          $("#usernameAvailable").css('color', '#66cc66');
        } else {
          $("#usernameConsole").html("Not accepted");
          $("#username").css('backgroundColor', '#ff6666');
          $("#usernameAvailable").css('color', '#ff6666');
        }
      },
      error: function() {}
    });
  });
});