Showing a div using jquery and retrieve data from ape server

Question

My question is: How could i make a div which is visible in the bottom right corner of the screen for 10 secs? This div would trigger an ape-server inline push which is triggered by a php script. I would like to try post data with php to an ape server and then echo this data using jquery with a div that is displayed for x seconds. I have no doubts how would i begin or how could i make that to work!

Answer 1

You're talking about two different things here, I think...

Either you want a server-side function using php (and then use jQuery to show/hide the div), or an AJAX request using jQuery. As you don't seem to want to reload the page when doing all of this, I would go with the AJAX option.

An example way to do this with AJAX would be as follows:

You need to have a service running which you can post your data to which will provide a response to show in-page. This can be coded in php.

Then with jQuery you would do something like:

$(function(){
    // use jQuery's .post() shorthand method to post your data to your php script
    $.post('myService.php', function(data){
        // do something with whatever is returned by your php function... 
        // in this instance, show a div containing the response 
        // (assuming the response is html)
        $('#responseDiv').empty().append(data).fadeIn(500, function(){
            // in this callback (which runs once the fadeIn animation is complete), 
            // we will tell #responseDiv to disappear after 10 seconds
            setTimeout(function(){
                $('#responseDiv').fadeOut(500);
            }, 10000);
        });
    });
});

I hope that helps answer your question.

//EDIT: In response to your comment, it seems that the APE documentation shows you how to accomplish this -

var client = new APE.Client();

client.load();

client.core.join('testChannel');

client.request.send('foo', {ping: 'ho hey'});

client.onRaw('bar', function(raw, pipe) {
    console.log('echo : ' + raw.data.echo);
    console.log('Receiving : ' + raw.data.hello);
});

The client.request.send() method posts data to the server, and then the client.onRaw() method is how you deal with responses, by the looks of it. In this case, it is just logging out to the console, but the principle is sound. This onRaw is looking for a raw with a type of 'bar', by the looks of it.

I suggest some thorough reading of the APE documentation. I had a read around for 5 minutes and got this far, but not really being an APE expert, I can't go much further without spending a good deal more time researching.

//EDIT 2

If it is just the having the message appear in a div and then disappear that is your issue here, then a portion of my original answer holds true:

    $('#responseDiv').empty().append(data).fadeIn(500, function(){
        // in this callback (which runs once the fadeIn animation is complete), 
        // we will tell #responseDiv to disappear after 10 seconds
        setTimeout(function(){
            $('#responseDiv').fadeOut(500);
        }, 10000);
    });

That section of script will append the content of data to a div, fade it in, and then fade it out after 10 seconds. All you need to do then is sort using the response from APE instead of that data variable (replace data with raw.data, i think).

If you need to create the div on the fly, then you could do something like:

    // your css would need to set .response to be display: none
    $('body').append('<div class="response">'+raw.data+'</div>');
    $('.response').fadeIn(500, function(){
        // in this callback (which runs once the fadeIn animation is complete), 
        // we will tell .response to disappear after 10 seconds
        setTimeout(function(){
            $('.response').fadeOut(500);
        }, 10000);
    });

Does that help you with your issue?