Question

<input id='lightson' class="buttonl" type="button" value="On" />
<input id='lightsoff'  class="buttonl" type="button" value="Off" />
<p class="status2"></p>

<script type="text/javascript">
$('#lightson').click( function(){
    $.get('http://<?php echo $_SESSION['ip']?>/?2', {}, callbacka());
    function callbacka(){
        $('.status2').load('status2.php').delay(3000).queue(function() {
            $(this).empty();
        });
    }
});

$( '#lightsoff' ).click( function () {
    $.get('http://<?php echo $_SESSION['ip']?>/?3', {}, callbackb());
    function callbackb(){
        $('.status2').load('status3.php').delay(3000).queue(function() {
            $(this).empty();
        });
    } 
});
</script>

When I click lightson, I want to load something in to my div and after three seconds to empty it. Also when I click lightsoff I want to load something else and after three seconds to empty it because both buttons use the same div.

This code works only once. When my page loads and I click one of two buttons (it doesn’t matter which button) it works, but if I click the other button, it loads the info in the div but doesn’t empty it.

My new code that works for the time is:

<input id='lightson' class="buttonl" type="button" value="On" />
<input id='lightsoff'  class="buttonl" type="button" value="Off" />
<p class="status2"></p>

<script type="text/javascript">
$('#lightson').click(function(){
    $.get('http://<?php echo $_SESSION['ip']?>/?2', {}, callbacka());
    function callbacka() {
        $('.status2').load('status2.php').delay(3000).queue(function(){
            $('.status2').empty().dequeue();
        });
    }
});

$('#lightsoff').click( function () {
    $.get('http://<?php echo $_SESSION['ip']?>/?3', {}, callbackb());
    function callbackb(){
       $('.status2').load('status3.php').delay(3000).queue(function() {
           $('.status2').empty().dequeue();
       });
    } 
});
</script>

Description for what I want with the above code: I have two button. When I click one of them I want to send the value “2” to a url and in the class status2 to load the content of status2.php and after 3secs to empty the class status2. And so on if I click the other button. I think the above code do the job.
If I remove the “()” from the callback when I click the button only send the value “2” and nothing else happens.

Answer 1

<script type="text/javascript">
    $( '#lightson' ).click( function () {
            $.get( "http://<?php echo $_SESSION['ip']?>/?2" );
            callbacka();
    } );

     function callbacka() {           

                $( '.status2' ).load( 'status2.php' ).delay( 3000 ).queue( function() {
                    $('.status2').empty().dequeue();
                });

    }

    $( '#lightsoff' ).click( function () {
            $.get( 'http://<?php echo $_SESSION['ip']?>/?3' );
            callbackb();
    } );

    function callbackb() {

                $( '.status2' ).load( 'status3.php' ).delay( 3000 ).queue( function() {
                    $( '.status2' ).empty().dequeue();
                });

    }
</script>