0

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.

2
Contributors
5
Replies
6
Views
6 Years
Discussion Span
Last Post by McLaren
0

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.

Edited by McLaren: n/a

0

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 :)

1

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.

0

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 :)

Edited by ello: n/a

0

I have no idea why I didn't try that

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

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.