jQuery showing div and then Disappearing

Question

I apologize ahead of time if this is a simple question, I have this javascript code:

$(document).ready(function() {
    $(\"#results\").hide();

    var html         


        

Answer 1

Have your results initially set to be hidden via CSS

/* CSS */
#results {
  display: none;
}

Not sure why you are jumping around the way you should use $.ajax. Use $.get if it's a GET request... Bind with .live because its better :). Let it be async because you don't want your server hanging in case of an error...

$(document).ready(function() {
  $('#submit').live('click', function(){
    $.get('ajax.php?db_list=get', function(data){
      $('#results').html(data);
      $('#results').show();
      return false;
    });
  });
});

Answer 2

...is this because of the hide() function at the top of my document ready?

Probably. I'm guessing the page is refreshing. If you don't want that, use return false; in the handler.

$("#submit").click(function () { 
    $("#results").show();
    return false; 
});

or event.preventDefault().

$("#submit").click(function ( event ) { 
    $("#results").show();
    event.preventDefault();
});

Answer 3

Instead of submit, use this code

<input id='submitMe' type = 'button' value = 'Submit Me' />

Now you don't have to return false; or event.preventDefault(); in your javascript