CODEWITHSUNDEEP
jquery
Drazek
Drazek

Reputation: 341

How can I convert normal javascript code to jQuery

People are recommending me that I should convert this code to jquery, but how and where, are there any tools or how do you do that and why XMLHttpRequest is not good with jQuery??

I have this code:

function showVal(str) {
  if (str == "") {
    document.getElementById("txtHint").innerHTML = "* Please type in School Name.";
    return;
  }

  if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
  } else {// code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }

  xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4) {
      if (xmlhttp.status == 200) { // break this into 2 statements so you can handle HTTP errors
        document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
      } else {
        document.getElementById("txtHint").innerHTML = "AJAX Error (HTTP "+xmlhttp.status+")";
      }
    }
  }; // functions declared in this way should be followed by a semi colon, since the function declaration is actually a statement.

  // encodeURIComponent() does all the escaping work for you - it is roughly analogous to PHP's urlencode()

  // xmlhttp.open("GET","ajaxFuncs2.php?q="+encodeURIComponent(str),true);
  xmlhttp.open("GET","ajaxFuncs2.php?q="+encodeURIComponent(str),true);

  xmlhttp.send();
}

Upvotes: 0

Views: 2070

Answers (2)

Kees C. Bakker
Kees C. Bakker

Reputation: 33381

You could rewrite it using jQuery's AJAX engine. It should be an easy task.

But you have to ask yourself the age old question: should I fix what ain't broken?

Using $.ajax it would look like this:

function showVal(str){ 
    if(str == null || str == ''){ 
        $('#txtHint').html('* Please type in School Name.');
    }
    else {
        $.ajax({ 
                url: 'ajaxFuncs2.php?q='+encodeURIComponent(str), 
                success: function(data, textStatus, jqXHR){ $('#txtHint').html(data); },
                error: function(request, status, error){ $('#txtHint').html('AJAX Error (HTTP ' + status + ')'); } 
            }); 
    }
}

Upvotes: 0

Justin Niessner
Justin Niessner

Reputation: 245399

If you really wanted to, conversion would make your code much more compact...but with the added penalty of having a dependency on jQuery. Personally, if you're comfortable handling the cross browser issues for this relatively simple piece of functionality I see no reason to convert it.

That being said, it'd be relatively easy to convert:

function showVal(str){
    if(str == ''){
        $('#txtHint').html("* Please type in School Name.");
        return;
    }

    $.get({
        url: 'ajaxFuncs2.php?q='+encodeURIComponent(str),
        success: function(data){ $('#txtHint').html(data); },
        error: function(){ $('#txtHint').html('AJAX Error'); }
    });
}

...or thereabouts

Upvotes: 2

Related Questions