jQuery .ajax() Method

Question

I am new to the jQuery AJAX ajax() Method. I have successfully created the function AddATeacher() which gets called because all the alert messages do popup. However the ajax() Method inside the function does not work. I know this because the addATeacherInsert.php does not load.

I got it to work under firefox, but not on chrome. However it only works in firefox when I have the alert message at the end of the code: alert ("Exiting myJQFunctions...");, otherwise it stops working all together. I would like it to work when I comment out the alert message at the end of the file. How can I solve this?

function AddATeachers()
{
    var tFirstName     = $('#teachers_first_name').attr('value');  
    var tLastName     = $('#teachers_surname').attr('value');  

    alert ("Entering myJQFunctions...");
    alert ("Teachers first name is: " + tFirstName);

    $.ajax({  
       type: "GET",  
       url: "../pgs/addATeacherInsert.php", 
       data: "tFirstName="+ tFirstName +"&tLastName="+ tLastName,  
       success: function(html){$("#Ajax_response").html(html);}  
    });  

    // works well under firefox but shows alert
    // doesnt work at all if commented out.
    alert ("Exiting myJQFunctions...");    
}

Are you sure the url is correct? Take a look with Firebug to see if the url that's requested is what you would expect. Also try console.log('test'); within the success function, maybe you've mistyped the divs id — Kokos
– Kokos, Commented Jun 16, 2011 at 10:48
Thanks guys, I did remove the space from between the & and the tLastName so now its &tLastName. Also Checked that the DOM elements on the page are correctly spellt. However not I notice that the function works only if: — SirBT
– SirBT, Commented Jun 16, 2011 at 11:39

Jagadeesan · Accepted Answer · 2011-06-16 13:45:37Z

3

Ajax functions ends only after it gets response from server.

function AddATeachers()
{

    var tFirstName     = $('#teachers_first_name').attr('value');  
    var tLastName     = $('#teachers_surname').attr('value');  

    alert ("Entering myJQFunctions...");
    alert ("Teachers first name is: " + tFirstName);

    $.ajax({  
       type: "GET",  
       url: "../pgs/addATeacherInsert.php?tFirstName="+ tFirstName +"&tLastName="+ tLastName,  
       success: function(html){
          alert(html);                       // alerts the html code returned.
          $("#Ajax_response").html(html);
          alert("Exiting myJQFunctions..."); // Ajax function ends here only.
       }  
   });
}

edited Jun 16, 2011 at 13:45

answered Jun 16, 2011 at 11:02

Jagadeesan

1,0973 gold badges9 silver badges24 bronze badges

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

Comments

John · Accepted Answer · 2011-06-16 11:01:40Z

1

You could use the jQuery GET method

function AddATeachers() { 
.get('url/phpPage.php', {tFirstName: $('#teachers_first_name').attr('value'), tLastName: $('#teachers_surname').attr('value')}, function(returnData){
$("#Ajax_response").html(returnData);
});
}

answered Jun 16, 2011 at 11:01

John

1,3192 gold badges12 silver badges24 bronze badges

Comments

K6t · Accepted Answer · 2011-06-16 11:18:58Z

1

Answer for ur Question Only

 $.ajax({  
            type: "GET",  
            url: "Enter Full file path", 
            data: "tFirstName="+ tFirstName +"& tLastName="+ tLastName,  
            success: function(html){
                $("#Ajax_response").html(html);}  
        });

tyr this dude...

answered Jun 16, 2011 at 11:18

K6t

1,8452 gold badges13 silver badges21 bronze badges

1 Comment

K6t Over a year ago

Url: Enter Full site Path dude.

Collectives™ on Stack Overflow

jQuery .ajax() Method

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related