Ajax is not submitting parameters

Discussion in 'HTML & Website Design' started by bonecone, Jun 20, 2011.

  1. #1
    I've set up a cross browser ajax submission function that receives two parameters, a task name and a "this" reference to the html object that called the function.

    submitbutton_ajax('taskName', this);

    I've created two tasks. One of them is for a drop-down listbox that populates with links retrieved from the database. It then loops through the links and assigns a function to the onclick event of each one as below.

    
    for(i=0; i < elem_links_ref.length; i++) {
       elem_links_ref[i].onclick = function(event) {
          submitbutton_ajax('selectOption', this);
       }
    }
    
    Code (markup):
    The drop-down listbox works, but I'm having trouble with the retrieved links. When I click on a link it manages to call the submitbutton_ajax function, but it fails to send a post request to the server. It sort of works when I insert the green segment of code at the bottom, but obviously not what I want.

    Why is the xml http request failing to send unless I do this?


    
    submitbutton_ajax('task_name', element_reference) {
    
    [COLOR="Red"][B]// CODE GOES HERE FOR CREATING THE CROSS BROWSER XML HTTP REQUEST OBJECT CALLED "myRequest"
    // AS WELL AS SETTING OTHER PARAMETERS BASED ON THE TASK BEING CALLED
    
    
    // SET THE ONREADYSTATECHANGE EVENT[/B][/COLOR]
    
    myRequest.onreadystatechange = function() {
       if(myRequest.readyState == 4) {
          if(myRequest.status == 200)
          {
    
    [COLOR="Red"][B]         // POPULATE DROPDOWN LIST WITH LINKS //[/B][/COLOR]
    
             if(task == 'togglePopups') {
                elem_child_ref = elem_ref.getElementsByTagName('div');
                elem_child_ref[0].innerHTML = myRequest.responseText;
                elem_links_ref = elem_child_ref[0].getElementsByTagName('a');
    
                for(i=0; i < elem_links_ref.length; i++) {
                   elem_links_ref[i].onclick = function(event) {
                      submitbutton_ajax('selectOption', this);
                   }
                }
    
                elem_ref.className = 's_pullup';
                elem_child_ref[0].style.display = 'block';					
             }
    
    [COLOR="Red"][B]         // CODE TO EXECUTE WHEN ONE OF THE LINKS ARE CLICKED
             // THIS CODE FAILS TO EXECUTE[/B][/COLOR]
    
             if(task == 'selectOption')
             {
                alert('toggled');
             }
          }
          else
          {
             alert('There was a problem with the request');
          }
       }
    
    [B]   [COLOR="Red"]// HOWEVER IT DOES WORK (SORT OF) WHEN I INSERT THIS CODE[/COLOR]
    [COLOR="Green"]
       else {
          alert('AJAX IS MESSING UP AGAIN!');
       }
    [/COLOR]
    [COLOR="Red"]   // IT DISPLAYS THE "AJAX MESSING UP" MESSAGE SEVERAL TIMES
       // BUT EVENTUALLY ALSO DISPLAYS THE "TOGGLED" ALERT MESSAGE[/COLOR][/B]
    }
    
    [B][COLOR="Red"]   // SEND REQUEST[/COLOR][/B]
    
       myRequest.open('POST', url, true);
       myRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
       myRequest.setRequestHeader("Content-length", params.length);
       myRequest.setRequestHeader("Connection", "close");
       myRequest.send(params);
    }
    
    Code (markup):
     
    bonecone, Jun 20, 2011 IP