jQuery function isn't always working
<p>I have this code that has to send data to a processing page once the button is clicked</p>

<pre><code>&lt;button id="whatever" onclick="sendData(); echoContent();"&gt;Send&lt;/button&gt;
</code></pre>

<p>And here is the code itself:</p>

<pre><code>function echoContent() {
   $('#main_content').load('parts/echo.php');
}

function clearField() {
   document.getElementById("content_input").value='';
   document.getElementById("header_input").value='';
}
function sendData() {
   var header = jQuery('#header_input').val();
   var content = jQuery('#content_input').val();

   jQuery.ajax({
      type: 'POST',
      url: 'parts/addData.php',
      data: {
          header: header,
          content: content
      }
    });

    clearField();

}
</code></pre>

<p>And the  that is to be updated once the page is loaded, and, once the button is clicked:</p>

<pre><code>&lt;div id="main_content"&gt;&lt;script type="text/javascript"&gt; echoContent(); &lt;/script&gt;&lt;/div&gt;
</code></pre>

<p>There is no problem with the <code>echoContent()</code> function once the button is clicked once, but the second time, the content doesn't refresh</p>

<p>Maybe there is an error in the placement of the functions?</p>
