How can I convert normal javascript code to jQuery

Question

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

You should begin by read some documentation about jQuery. Begin with the official website docs.jquery.com/How_jQuery_Works — Jeremy D
– Jeremy D, Commented Jan 17, 2012 at 17:09
If it works, there may not be any reason to switch. In fact, if you are not using (and loading) jQuery now, then converting to jQuery just adds to the size of the page. — Jason Gennaro
– Jason Gennaro, Commented Jan 17, 2012 at 17:10
@Kees: Does the OP really deserve +8 rep because he got downvoted? — Devin Burke
– Devin Burke, Commented Jan 17, 2012 at 17:28
@JustinSatyr well... if nobody explains the down vote, then that is the consequence. You can't spank someone without explaining why IMO. (Rep is +3) — Kees C. Bakker
– Kees C. Bakker, Commented Jan 18, 2012 at 18:56

Justin Niessner · Accepted Answer · 2012-01-17 17:17:57Z

2

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

edited Jan 17, 2012 at 17:17

answered Jan 17, 2012 at 17:11

Justin Niessner

246k40 gold badges416 silver badges546 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Justin Niessner Over a year ago

@Drazek - It should at least be enough to get you started in the right direction. It's impossible for me to write your code for you without knowing any requirements.

Kees C. Bakker · Accepted Answer · 2012-01-17 18:23:48Z

0

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 + ')'); } 
            }); 
    }
}

edited Jan 17, 2012 at 18:23

answered Jan 17, 2012 at 17:15

Kees C. Bakker

33.6k31 gold badges120 silver badges208 bronze badges

3 Comments

Kees C. Bakker Over a year ago

Using jQuery could make life a little bit easier, because you see what the code does instead of all the browser specifics.

Drazek Over a year ago

it doesn't work, and how it can be easy task, when I have no javascript knowledge

Kees C. Bakker Over a year ago

@Drazek well... you'll need some basic JavaScript knowledgde to program JavaScript. But there are many resources on that (like w3schools.com/jquery/default.asp and w3schools.com/js/default.asp). Just read up a bit.

Collectives™ on Stack Overflow

How can I convert normal javascript code to jQuery

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related