Jquery sometimes doesn't work well

[ivan3510]

Hi!

So, as the name of this discussion says, I have some jquery code. And sometimes some parts of them don't work, sometimes they do work. The page is made for conjugating verbs, which is done with php, and this isn't a problem. Here is the code:

$(document).ready(function(){
  function conjugate()
  {
    $("#verb").attr("disabled","disabled");
    $(".conjugate").attr("disabled","disabled");

    var verb_form="";
    var verb=$("#verb").val();
    var if_add=$("#if_add").val();

    if(if_add=="true")
    {
      $("#verb_form").attr("disabled","disabled");
      verb_form=$("#verb_form").val();
    }

    if(verb.trim()=="")
    {
      $("#verb").removeAttr("disabled");
      $(".conjugate").removeAttr("disabled");
      $("#verb").val("");
      alert("Type the verb!");
      $("#verb").focus();
    }
    else if(verb.substr(verb.length-2)!="re" && verb!="esse")
    {
      $("#verb").removeAttr("disabled");
      $(".conjugate").removeAttr("disabled");
      $("#verb").val("");
      alert("This isn't a correct form of verb!");
      $("#verb").focus();
    }
    else if(if_add=="false" && verb.substr(verb.length-3)=="ere")
    {
      $("#add_info").html("First person sg, active indicative present: <input type='text' id='verb_form'><input type='button' value='Conjugate' class='conjugate' id='con2'><br>");
      $("#if_add").val("true");
      $("#verb_form").focus();
    }
    else if(if_add=="true" && verb_form.substr(verb_form.length-1)!="o")
    {
      $("#verb_form").removeAttr("disabled");
      $("#con2").removeAttr("disabled");
      $("#verb_form").val("");
      alert("This isn't a correct form of verb!");
      $("#verb_form").focus();
    }
    else
    {
      $("#verb").val("");
      $("#status").html("<br><font color='grey'>please, wait...</font><br>");
      $("#conjugation").html("");

      if(if_add=="true")
      {
        url_data=verb+"&&form="+verb_form;
        $("#verb_form").val("");
      }
      else
        url_data=verb;

      $.get("conjugate.php?verb="+url_data,function(data,status){
        $("#conjugation").html(data);
        $("#status").html("<br><font color='blue'><b>done</b></font><br>");
        $("#add_info").html("");
        $("#verb").removeAttr("disabled");
        $(".conjugate").removeAttr("disabled");
        $("#if_add").val("false");
        $("#verb").focus();
      });
    }
  }

  $("#verb").focus();

  $("#verb").keydown(function(){
    $("#status").html("");
  });

  $(".conjugate").click(function(){
    conjugate();
  });

  $("#verb").keypress(function(event){
    var keycode=(event.keyCode ? event.keyCode : event.which);
    if(keycode=="13")
      conjugate();
  });

  $(document).on("click",".conjugate",function(){
    conjugate();
  });

  $(document).on("keypress","#verb_form",function(event){
    var keycode=(event.keyCode ? event.keyCode : event.which);
    if(keycode=="13")
      conjugate();
  });

  $("#irregular").change(function(){
    if($("#irregular").is(":checked"))
    {
      $("#irregular_holder").html("<br>1st person sg of perfect (eg monui): <input type='text' id='irregular perfect'><br>Perfect participle, neutrum (eg monitum): <input type='text' name='irregular_participle' id='irregular_participle'><br>");
    }
    else
      $("#irregular_holder").html("");
  });
});

And html file

<div class="main">
    Verb infinitive (eg. amare, monere): <input type="text" id="verb" autocomplete="off">
    <input type="button" value="Conjugate" class="conjugate"><br>
    <input type="checkbox" id="irregular">Verb is irregular<br>
    <span id="add_info"></span>
    <span id="irregular_holder"></span>
    <span id="status"></span><br>
    <span id="conjugation"></span>
    <input type="hidden" id="if_add" value="false">
    Upgrades:<br>
</div>

So, basically, a user types a verb, if it is a latin verb (verb.substr(verb.length-2)=="re" or verb=="esse"), then it will be conjugated, except if (verb.substr(verb.length-2)=="ere") which is a special type of verbs and more information about this particular verb is needed to make conjugation correct.
So, a problem would be with some parts of function conjugate(), that is "$("#status").html("<br><font color='grey'>please, wait...</font><br>");", which sometimes does not appear, and sometimes those additional inputs (id=verb_form and id=con2) don't get dissabled. I started to think that this happens because of too much things in this function.
Thanks for your help.

[pritaeas]

Did you check to see if status actually returns a 200 OK every time?

Did you debug to see where you get, or don't get? You can write messages with console.log() to see what exactly happens without having to set breakpoints.

[Airshow]

Two things strike me immediately :

Click handlers

Take a look at the following :

$(".conjugate").click(function() {
    conjugate();
});

and

$(document).on("click", ".conjugate", function() {
    conjugate();
});

This means that any ".conjugate" element that is present in the document at page load will fire conjugate() twice when clicked!!!

jQuery selectors

$(selector) is an expensive operation, and the code abounds with them.

Consider finding all the static elements once and caching the resulting jQuery objects.

eg :

//cache of jQuery objects
var $$ = {
    verb: $("#verb"),
    if_add: $("#if_add"),
    verb_form: $("#verb_form"),
    add_info: $("#add_info"),
    status : $("#status"),
    conjugation : $("#conjugation"),
    irregular: $("#irregular")
};

Then use $$.verb, $$.if_add etc. inside conjugate().

[Airshow]

Two more things :

#if_add

This hidden field is not necessary. It does nothing that a javascript boolean could not do.

Reinserted identical content

The contents of "#irregular_holder" and "#add_info" elements is removed and re-added, and is always exactly the same. Use jQuery's .hide() and .show() instead.

Similarly, the two messages that can appear in the "#status" element can be managed with .show() and .hide()