Construct ajax query (ie. ajax Contact form)

[ezersky]

Hi, help please.

How to construct ajax contact form?
I have an js-script

$(document).on('submit', '#contactForm form', function(){

    var temp_href = window.location.pathname.replace('?','&');
    if(temp_href.substr(0,4) == 'http'){
      temp_href = temp_href.substr(7);
      temp_href = temp_href.substr(temp_href.indexOf('/')+1);
    }
    if(temp_href.substr(0,1) == '/'){
      temp_href = temp_href.substr(1);
    }
    if(temp_href.indexOf('#') > -1){
      temp_href = temp_href.substr(0,temp_href.indexOf('#'));
    }
    temp_href = 'q='+temp_href;
    temp_href += '&search_id=contactForm';
    temp_href += '&context=web';

    var form_data = $(this).serialize();

    $('#contactForm')
      .css({
        'height': $('#contactForm').height()+'px',
        'background': 'url("/assets/theme/img/loader.gif") center center no-repeat'
      })

    .children('form').css({'opacity':'0.2'});

    jQuery.ajax({
      url: "/assets/components/ajax_submit/ajax_submit.php?"+temp_href,
      type: "post",
      data: form_data,
      dataType: "html",
      success: function(response){
        jQuery("#contactForm").html(response);

        $('#contactForm')
        .css({
          'height': 'auto',
          'background-image': 'none'
        })
        .children('form').css({'opacity': 1});
        if( $('.success_message').length ){
          $('.success_message').superEffect({
            speed: 1000,
            count: 5
          });
        }
        if( $('div.error').length ){
          $('div.error').parents('.field').addClass('error');
        }
      }

    });

   return false;  
});

How to integrate to

$(function(){
  $.fn.modal.defaults.spinner = $.fn.modalmanager.defaults.spinner = 
    '<div class="loading-spinner" style="width: 200px; margin-left: -100px;">' +
      '<div class="progress progress-striped active">' +
        '<div class="progress-bar" style="width: 100%;"></div>' +
      '</div>' +
    '</div>';
  $.fn.modalmanager.defaults.resize = true;
});

var $modal = $('#ajax-modal');

$('.ajax .demo').on('click', function(){
  // create the backdrop and wait for next modal to be triggered
  $('body').modalmanager('loading');

  setTimeout(function(){
     $modal.load('tl.html', '', function(){
      $modal.modal();
    });
  }, 1000);
});

$modal.on('click', '.btn-warning', function(){
  $modal.modal('loading');
  setTimeout(function(){
    $modal
      .modal('loading')
      .find('.modal-body')
        .prepend('<div class="alert alert-info fade in">' +
          'Updated!<button type="button" class="close" data-dismiss="alert">&times;</button>' +
        '</div>');
  }, 1000);
});