title: Jquery show div if query returns data
body: <p>I am working with a script that needs to show a DIV which contains a small FORM. I need the FORM to be displayed only when a query to a database returns a result of 1 or more.</p>
  
  <p>I have the MySQL query that looks for data and it is working and populates a var named $alerts, I then echo the content of the var $alerts.</p>
  
  <p>My jQuery script looks like:</p>
  
  <pre><code>$(document).ready(function() { 
          function runrequests() { 
             $.ajax({ 
               url: 'check_request_events.php',
               type:"POST",
               data:"alerts", 
               success: function(data){ //4
               document.getElementById("alerts").innerHTML = data;
  
                 //render the dynamic data into html
               } 
             });  
          };  
  
                 // run it initially
          runrequests();
  
          // run it every 30 seconds
          setInterval(runrequests, 30 * 1000);
          });
  </code></pre>
  
  <p>The part of the scripts that displays the div is:</p>
  
  <pre><code>&lt;div id="alerts"&gt;
  &lt;form id="form1" name="form1" method="post" action="&lt;?php echo $editFormAction; ?&gt;"&gt;
  &lt;input type="image" src="../../../../conf_images/butler_request.png" name="button" id="button" value="Submit" /&gt;
  &lt;input name="RecordID" type="hidden" value="&lt;?php echo $ClientRecordId;?&gt;" /&gt;
  &lt;input type="hidden" name="MM_update" value="form1" /&gt;
  &lt;input type="hidden" name="RecordID" value="&lt;?php echo $row_ConfAlert['RecordID']; ?&gt;" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p></p>
  
  <p>What do I need to do to only show the DIV when the query returns data greater than 0.</p>
  
  <p>Many thanks in advance for your time and help.</p>
  
  <p>New code
  jQuery</p>
  
  <pre><code>$(document).ready(function() { 
          function runrequests() { 
             $.ajax({ 
               url: 'check_request_events.php',
               type:"POST",
               data:"alerts", 
               success: function(data){
  
                  if (data.length &gt; 0){
                      $('#alerts').show();
                  } else {
                      $('#alerts').hide();
                  }
                 //render the dynamic data into html
               } 
             });  
          };  
  
                 // run it initially
          runrequests();
  
          // run it every 30 seconds
          setInterval(runrequests, 30 * 1000);
          });
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#alerts {
  display:none;
  }
  </code></pre>
  
  <p>DIV</p>
  
  <pre><code>&lt;div id="alerts"&gt;
  &lt;form id="form1" name="form1" method="post" action="&lt;?php echo $editFormAction; ?&gt;"&gt;
  &lt;input type="image" src="butler_request.png" name="button" id="button" value="Submit" /&gt;
  &lt;input name="RecordID" type="hidden" value="&lt;?php echo $ClientRecordId;?&gt;" /&gt;
  &lt;input type="hidden" name="MM_update" value="form1" /&gt;
  &lt;input type="hidden" name="RecordID" value="&lt;?php echo $row_ConfAlert['RecordID']; ?&gt;" /&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Still not hiding the DIV.
  Regards</p>