Ajax update css of HTML elements

Question

I want display and hide HTML div with ajax,

Situation:

progressbar('on');

very_long_function(); 

progressbar('off');

I want display div when working very_long_function(); , bUt when finish working I want hide div

Progress bar function:

function progressbar($status){

    if($status == "on"){


        echo "
                <script> 
                        $(document).ready(function() {   function() { 
                        $('#load').css('display','inline');

                        }); 
                </script>
            ";
    } 
    else{

        echo "
                <script> 
                        $$(document).ready(function() {   function() { 
                        $('#load').css('display','none');

                        }); 
                </script>
            ";
    }
}

Problem is that div not showing when very_long_function(); working, maybe is possible to solve this priblem with AJAX or jQuery

HTML

<div id="load" style="display: none;"><img src="loading_baras.gif" style="width: 550px; height: 10px; margin-top: -10px"></div>

Answer 1

Are sure that you included jquery lib for using it . Also there is no double $$ in jquery. Please give the html and after we will correct it.

Answer 2

I think, that you architecture is wrong. You have to user JS for it.

Like next:

    $(function(){
       $('#load').css('display','inline');

       $.post('/very_long_function.php', {url: 'http://www.google.com'}, function(result){
           alert(result);
           $('#load').css('display','none');
       }); 
    });

PHP: very_long_function.php

$url = $_POST['url'];
$result = very_long_function($url);
echo $result;
die;