Menu
How would you convert following code to use only jquery library?
<html>
<head>
<script>
function do_it(value)
{
function newXMLHttpRequest()
{
try{ return new XMLHttpRequest(); }catch(e){}
try{ return new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){}
try{ return new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){}
return null;
}
var ajax_request = false;
ajax_request = newXMLHttpRequest();
var url = "test.pl?b64="+value;
ajax_request.open("GET",url,1);
ajax_request.onreadystatechange = function()
{
if(ajax_request.readyState == 4)
{
var response = ajax_request.responseText;
document.getElementById("in").innerHTML = response;
}
}
ajax_request.send(null);
}
</script>
</head>
<body>
<form>
<input type="text" name="string" onkeyup="do_it(this.value)"/>
<input type="submit" name="submit">
</form>
<div style="position:absolute;width:200px;height:200px; background-color:yellow; margin-top:100px;" id="in"></div>
</body>
</html>
Sorry, I probably should have mentioned that I don't actually have any practical experience with jquery, and I am in process in familiarizing myself with it now...
815
take a look at jquerys load() - i think thats what you're looking for:
function do_it(value){
$('#in').load('test.pl', { b64: value });
}
EDIT: if you want to have different error- and success-handlers, using ajax() like others posted would be the way to go - but for qa simple get-this-and-put-it-into-that-div-request, load() is more short and easy.
EDIT2: to your comment: the best would be to to identify your input field in any way (give an id to it, or give the same class to every field that should get this event) and then simply do:
$('#mytextfield').keyup(function(){ // with id-selector
do_it($(this).val());
});
$('.textfield').keyup(function(){ // with class-selector
// whatever
});
(not: i havn't tested that, just writing out of my mind... if there's a problem, just take a look at the documentation)
53
$.ajax({
url: 'test.pl?b64=' + value,
success: function(data) {
// document.getElementById("in").innerHTML = data;
$("#in").html(data); // jQuery way instead of above line
}
});
Note: not tested, but it shouldn't be too hard to figure out what this code is doing.
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
