Question

here is my original function. it works perfectly, I just want to compress it a bit:

 <script type='text/javascript'>
function searchmusic(){
var ajaxRequest;  

try{
    ajaxRequest = new XMLHttpRequest();
} catch (e){
    try{
        ajaxRequest = new ActiveXObject('Msxml2.XMLHTTP');
    } catch (e) {
        try{
            ajaxRequest = new ActiveXObject('Microsoft.XMLHTTP');
        } catch (e){
            alert('Your browser broke!');
            return false;
        }
    }
}
ajaxRequest.onreadystatechange = function(){
    if(ajaxRequest.readyState == 4){
        var ajaxDisplay = document.getElementById('searchresults');
        ajaxDisplay.innerHTML = ajaxRequest.responseText;

    }
}
var search = document.getElementById('search').value;
var params = 'search=' + search;
ajaxRequest.open('POST', 'getsearch.php', true);  
ajaxRequest.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
ajaxRequest.send(params);

}
</script>

I am trying to compress this function a bit, so i have tried to duplicate it using jQuery:

 <script>
 function searchmusic(){
 var search = document.getElementById('search').value;
 $.ajax({
type: 'POST',
url: getsearch.php,
async: true,
data: 'search=' + search,
success: function(data) {
$('#searchresults').load(data);
 }
 });
 }
</script>

However, I can not get this function to work properly. Could someone please tell me where I have made the mistake, and why this function is not working, or it could be that this new function can not function as my original one did. I don’t know, but any help would be greatly appreciated, thanks!

Answer 1

url: getsearch.php,

should be

url: 'getsearch.php',

and

success: function(data) {
    $('#searchresults').load(data);
}

should be

success: function(data) {
    $('#searchresults').html(data);
}

And also var search = document.getElementById('search').value; is ok but as because you are using jQuery so you can use var search = $('#search').val() instead and by default async is true so you could ommit it and also $.ajax could be $.post so you can remove type: 'POST' too.