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.

Recommended Answers

All 3 Replies

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.

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().

commented: First time i've seen the cache methood - big hand Airshow - thanks for the tip! +15

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()

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.