1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

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