AJAX function $(div).html not replacing content
<h2>problem</h2>

<p>My div <code>#project_log_ajax</code> should tell me the number of ajax request taken at current time.</p>

<p>For debugging reasons I change that <code>projekt_ajax_counter</code> in the html each time.
I use <code>'start'</code> at the beginning of the request and <code>'end'</code> at the end.</p>

<p>The only thing it writes in my div is <code>'start'</code>. It won't show me the content that I replace it with the first time.</p>

<p>If I copy it into my debug console, the div gets the correct content. As you can see in my console output it only shows me the logs no warnings/errors.</p>

<h2>counter.js</h2>

<pre><code>var project_ajax_counter = 0;
function  project_ajax()
{
    ...code...
    console.log(project_ajax_counter);
    project_ajax_counter++;
    console.log($('#project_log_ajax'));
    console.log('wait');

    $('#project_log_ajax').html('start');

    //ajax
    var data = $.ajax({  
        type: "POST",  
        url: url,  
        data:DataString  ,
        async: false    
    });

    //counter -1
    console.log(project_ajax_counter);
    project_ajax_counter--;
    $('#project_log_ajax').html('end');
    console.log($('#project_log_ajax'));
    ...code...
}
</code></pre>

<h2>Javascript function same code twice - console output ##0</h2>

<pre><code>0 counter.js:22
[&lt;div&gt;, context: #document, selector: "#project_log_ajax"]
 counter.js:24
wait counter.js:25
1 counter.js:38
[&lt;div&gt;, context: #document, selector: "#project_log_ajax"]
 counter.js:41
0 counter.js:22
[&lt;div&gt;, context: #document, selector: "#project_log_ajax"]
 counter.js:24
wait
and so on
</code></pre>
