$(document).ready(function() {
  $("form").submit(function() {
    var id = this.id;
    var url = this.action;

    var f = $('#' + id);
    var data = f.serialize();
        
    $('#query > div').hide();
    $('#results > *').hide();
    
    $.ajax({
      type: "POST",
      url: url,
      dataType: "json",
      data: {str: data},
      beforeSend: function(XMLHttpRequest) {
        $('#query, #results').addClass('loading');        
      },
      success: function(transport){
        var results = (transport.results ? transport.results : '<p>No Results...</p>');
        $('#query, #results').removeClass('loading');
        $('#query > div').fadeIn().html(transport.query);
        $('#results > *').fadeIn().html(results);
      },
      error: function(XMLHttpRequest, textStatus, errorThrown) {
        $('#query, #results').removeClass('loading');
        $('#results > *, #query > div').fadeIn().html('<span class="error">AJAX Exception: ' + errorThrown + ' ' + textStatus + '</span>');        
      }
    });
    return false;
  });
});

function ajax_query(e, url, id) {     
  $('#query > div').hide();
  $('#results > *').hide();
  
  $.ajax({
    type: "POST",
    url: url,
    dataType: "json",
    data: {id: id},
    beforeSend: function(XMLHttpRequest) {
      $('#query, #results').addClass('loading');        
    },
    success: function(transport){
      var results = (transport.results ? transport.results : '<p>No Results...</p>');
      $('#query, #results').removeClass('loading');
      $('#query > div').fadeIn().html(transport.query);
      $('#results > *').fadeIn().html(results);
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
      $('#query, #results').removeClass('loading');
      $('#results > *, #query > div').fadeIn().html('<span class="error">AJAX Exception: ' + errorThrown + ' ' + textStatus + '</span>');        
    }
  });
  e.preventDefault();
  return false;
}