Converting ajax script to jQuery

Question

Today I have a bit of a problem. I have an ajax script that I have been using for my site, but for efficiency reasons, I need to convert it to jQuery. I have been researching how to do this and have had no such luck whatsoever with this.

Here is my script:

<script type='text/javascript'>
//<![CDATA[
function ajaxFunction2(){
var ajaxRequest;  

try{
    // Opera 8.0+, Firefox, Safari
    ajaxRequest = new XMLHttpRequest();
} catch (e){
    // Internet Explorer Browsers
    try{
        ajaxRequest = new ActiveXObject('Msxml2.XMLHTTP');
    } catch (e) {
        try{
            ajaxRequest = new ActiveXObject('Microsoft.XMLHTTP');
        } catch (e){
            // Something went wrong
            alert('Your browser broke!');
            return false;
        }
    }
  }
  ajaxRequest.onreadystatechange = function(){
    if(ajaxRequest.readyState == 4){
        var ajaxDisplay = document.getElementById('editpagecolors');
        ajaxDisplay.innerHTML = ajaxRequest.responseText;

    }
   }
  var bandname = document.getElementById('bandname').value;
  var musicstyle = document.getElementById('musicstyle').value;
  var websiteurl = document.getElementById('websiteurl').value;
  var aboutme = document.getElementById('aboutme').value;
  var chooser = document.getElementById('chooser').value;
  var chooser2 = document.getElementById('chooser2').value;
  var chooser3 = document.getElementById('chooser3').value;
  var chooser5 = document.getElementById('chooser5').value;
    var chooser6 = document.getElementById('chooser6').value;
  var chooser7 = document.getElementById('chooser7').value;
  var params = 'bandname=' + bandname + '&musicstyle=' + musicstyle +   '&websiteurl=' + websiteurl + '&aboutme=' + aboutme + '&chooser=' + chooser + '&chooser2='   + chooser2 + '&chooser3=' + chooser3 + '&chooser5=' + chooser5 + '&chooser6=' + chooser6 + '&chooser7=' + chooser7;
  ajaxRequest.open("POST", 'ajaxeditprofile.php', true);  
  ajaxRequest.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  ajaxRequest.send(params);

}
//]]>
</script>

Is it even possible to convert this to jQuery and if so, how would I go about doing this. Thank you guys so much for the help!

You'd start by reading the jQuery documentation: api.jquery.com/jQuery.ajax — Felix Kling
– Felix Kling, Commented Feb 28, 2012 at 1:05

charlietfl · Accepted Answer · 2012-02-28 01:04:20Z

1

    function ajaxFunction2(){

      var bandname = $('#bandname').val();
      var musicstyle = $('#musicstyle').val();
      var websiteurl = $('#websiteurl').val();
      var aboutme = $('#aboutme').val();
      var chooser = $('#chooser').val();
      var chooser2 = $('#chooser2').val();
      var chooser3 = $('#chooser3').val();
      var chooser5 = $('#chooser5').val();
        var chooser6 = $('#chooser6').val();
      var chooser7 = $('#chooser7').val();
      var params = 'bandname=' + bandname + '&musicstyle=' + musicstyle +   '&websiteurl=' + websiteurl + '&aboutme=' + aboutme + '&chooser=' + chooser + '&chooser2='   + chooser2 + '&chooser3=' + chooser3 + '&chooser5=' + chooser5 + '&chooser6=' + chooser6 + '&chooser7=' + chooser7; 

        $.post('ajaxeditprofile.php', params, function( data){                                             
            $('#editpagecolors').html( data);              
        });

    }

answered Feb 28, 2012 at 1:04

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

1 Comment

charlietfl Over a year ago

if all of those value are a complete form you can minmize the data parsing to using serialize() method..var params= $('form').serialize()

Keith Rousseau · Accepted Answer · 2012-02-28 00:54:36Z

0

$.ajax({
   url: 'yourUrl',
   data: 'yourserializeddata',
   type: 'POST'
}).success(function(responseHtml) {
   $('#editpagecolors').html(responseHtml);
});

http://api.jquery.com/jQuery.ajax/

answered Feb 28, 2012 at 0:54

Keith Rousseau

4,4931 gold badge24 silver badges28 bronze badges

Comments

ncremins · Accepted Answer · 2012-02-28 00:55:38Z

0

have a look at the guides here at netplus

does the above not work? it's not terribly efficient but wrapping it in jquery and loading jquery library isn't at all that efficient either, also I doubt porting this to jquery will render much savings if any (as jquery will eventually call the above interally anyways).

answered Feb 28, 2012 at 0:55

ncremins

9,2202 gold badges28 silver badges26 bronze badges

Collectives™ on Stack Overflow

Converting ajax script to jQuery

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related