Question

I have some data that I want to show using JQuery but don’t know how to show it. I have a search box where the user types a search term, then when it’s submitted, if found, a div would be shown with the data. If the search term was not found, the div should not be shown.

I know how to do this when the page refreshes but how to do this without a page refresh. Can someone please point me to an example?

---

EDIT:

This is what I am currently using. I’m really new to JQuery so some of the examples that have already been posted seem a bit different. I’m not really sure which example would work for me.

$.ajax({
  type: "POST",
  url: "http://site.com/search.php",
  data: dataString,
  dataType: 'json',
  success: function(data) {
    if(data.success == 1){
      alert('success');
    }else{
      alert('fail');
    }
  }
});
return false;

Answer 1

You need to use jQuery.ajax (if you want to do it without a refresh). Something like this should work:

jQuery("#mySearchForm").submit(function() {

    var searchTerm = jQuery("#mySearchInput").val();
    jQuery.ajax({
        url: "http://my.url.com",
        data: searchTerm,
        dataType: "json", //assumes your return data-type is json
        success: function(data, textStatus, jqXHR) {
           //assumes your json has a property called response
           jQuery("#myDiv").html(data.response); 
        },
        error: function(jqXHR, textStatus, errorThrown) {
           //error-handling code
        }
    });

    return false;
});