Onclick AJAX

[ello]

Guys, just a quick question, is there any way to get this AJAX to be called on a button click? I know how to use buttons to call JS functions but I'm not sure where to add the open and closing parentheses with this AJAX...I've tried encasing different parts, but to no avail.

So guessing I have to do something different here? I'm not sure, really new to this.

And yes I've tried searching, again it's very specific and a bit vague.

$(document).ready(function(){
                                                                                                   
        $('#xavisys-logo').live('click', function(e) {
                                
                        var r1='';
                        var r2='';
 
                        e.preventDefault();
                         
                        $.get("char_con.php?", {act: 'char_con'}, function(data){
                                                                                                                           
                        r1=data;

                        });
                        
                        $.getJSON("generator.php?", {act: 'char_con', bc: '1'}, function(data){
         
                        r2=data;
                        
                        $(".quote").html( r1 + r2 );

                });
                        
        });
        
});

Anyone mind helping me out and showing how this would be done?

Any help appreciated.

[McLaren]

Everything looks almost ok there, but as I understand you get wrong value

$(".quote").html( r1 + r2 );

?

That is because when $.getJSON finishes request, $.get might still be not finisehd, so r1 not has a value assigned to it yet.

So to avoid this you can do this:

$.get("char_con.php?", {act: 'char_con'}, function(data){
                                                                                                                       
                    r1=data;
                    $.getJSON("generator.php?", {act: 'char_con', bc: '1'}, function(data){
     
                    r2=data;
                    
                    $(".quote").html( r1 + r2 );

          			 });

                    });

So now $.getJSON is execudet only after $.get is finished and r1 has a value.

In other words we put $.getJSON in callback function. Callback function is executed after request is finished.

[ello]

Everything looks almost ok there, but as I understand you get wrong value

$(".quote").html( r1 + r2 );

?

That is because when $.getJSON finishes request, $.get might still be not finisehd, so r1 not has a value assigned to it yet.

So to avoid this you can do this:

$.get("char_con.php?", {act: 'char_con'}, function(data){
                                                                                                                       
                    r1=data;
                    $.getJSON("generator.php?", {act: 'char_con', bc: '1'}, function(data){
     
                    r2=data;
                    
                    $(".quote").html( r1 + r2 );

          			 });

                    });

So now $.getJSON is execudet only after $.get is finished and r1 has a value.

In other words we put $.getJSON in callback function. Callback function is executed after request is finished.

Hey thanks for the info but maybe I explained myself wrong. All I was after was if anyone knew how to call this from something like:

<input type="button" value="Click Me!" onclick="myinfo();">

I have tried with things such as:

$(document).ready(function(){
						   
		doSomething = function() {
                                                                                                          
                        var r1='';
                        var r2='';
 
                        e.preventDefault();
                         
                        $.get("char_con.php?", {act: 'char_con'}, function(data){
                                                                                                                           
                        r1=data;

                        });
                        
                        $.getJSON("generator.php?", {act: 'char_con', bc: '1'}, function(data){
         
                        r2=data;
                        
                        $(".quote").html( r1 + r2 );

                        });
						
                }

});

But obviously this doesn't work, I'm having trouble getting it to execute on an onclick?

But thanks for the info on my origonal code, seems like a better way to go about doiing it :)

[McLaren]

Oh :) I understand now :) Its simple - the same way you call

$('#xavisys-logo').live('click', function(e) {

Just you need to have an id in that button. For example your button should look like this:

<input id = "xavisys-logo" type="button" value="Click Me!" >

there are other ways to do this, but this is ok for now.

[ello]

Oh :) I understand now :) Its simple - the same way you call

$('#xavisys-logo').live('click', function(e) {

Just you need to have an id in that button. For example your button should look like this:

<input id = "xavisys-logo" type="button" value="Click Me!" >

there are other ways to do this, but this is ok for now.

I have no idea why I didn't try that :icon_eek: works perfectly, thanks alot, really appreciate it SPeed_FANat1c :)

+1 for all your help

//Edit - Also just implemented the cleaned up version of my code you suggested at first and is working much more efficient then before. So thanks again :)

[McLaren]

I have no idea why I didn't try that

Happens for me also that sometimes I don't notice simple things :)