jQuery Ajaxフォームは、「成功」機能を無視し、ページを再読み込みします。

Question

jQuery .ajaxを使用してmySQLデータベースにHTMLフォームを送信しています。フォームを送信すると（すべてのフィールドが検証された後）、データは新しいレコードとしてdbに挿入されますが、成功関数は実行されません。

jsFiddle

*これは、Googleマップの情報ウィンドウ内のすべての場所取りですが、私はそれが関連性のあることはよく分かりません。

HTML：

<div id="formDiv"> 
    <form name="htmlForm" id="htmlForm"> 

    <p id="contactP"> 
    <label for="contact">Email:</label> 
    <input type="text" name="contact" id="contact"/> <br/> 
    </p> 

    <p id="phoneP"> 
    <label for="phone">Phone:</label> 
    <input type="text" name="phone" id="phone"/> <br/> 
    </p> 

    <p id="datepickerP"> 
    <label for="datepicker">Date:</label> 
    <input type="text" name="date" id="datepicker"/> <br/> 
    </p> 

    <p id="latP"> 
    <label for="lat">Latitude:</label> 
    <input type="text" name="lat" id="lat" class="location"/> <br/> 
    </p> 

    <p id="lngP"> 
    <label for="lng">Longitude:</label> 
    <input type="text" name="lng" id="lng" class="location"/> <br/> 
    </p>   

    <p id="descP"> 
    <label for="desc" id="dos">Description of Sighting:</label> <br/> 
    <textarea name="desc" id="desc"></textarea><br/> 
    </p> 

    <input type="submit" class="button" id="submitBtn" value="Post Sighting!" onClick="postSighting();"/> 

</div> 

Javascriptを/ jQueryの：

function postSighting() { 
    // jQuery Validate 
    $('#htmlForm').validate({ 
     rules: { 
      contact: {required:true, email:true}, 
      phone: {required:true}, 
      date: {required:true, date:true}, 
      lat: {required:true}, 
      lng: {required:true}, 
      desc: {required:true}, 
     }, 
     messages: { 
      desc: 'Please be descriptive!' 
     }, 
     errorPlacement: function(error, element) { 
      error.appendTo($('#' + element.attr('id') + 'P')); 
      return false; 
     }; 
    }); 

    //jQuery ajax form submit 
     var contact = $('input#contact').val(), 
      phone = $('input#phone').val(), 
      date = $('input#datepicker').val(), 
      lat = $('input#lat').val(), 
      lng = $('input#lng').val(), 
      desc = $('textarea#desc').val(); 
     var dataString = "contact=" + contact + '&phone=' + phone + "&date=" + date + "&lat=" + lat + "&lng=" + lng + "&desc=" + desc; 
     $.ajax({ 
      type: "POST", 
      url: "Includes/test.php", 
      data: dataString, 
      error: function(xhr, ajaxOptions, thrownError){ 
       alert(xhr.status); 
       alert(ajaxOptions); 
       alert(thrownError); 
      }, 
      beforeSend: function() { 
       return $('#htmlForm').validate().form(); 
      }, 
      success: function() { 
       $('#formDiv').html('<div id="message"></div>'); 
       $('#message').html('<h2>Thank You!</h2>') 
        .append('<h3>Your sighting has been reported</h3>')  
       return false; 
      } 
     }); 
     return false; 
    }; 

私はjQueryのAjaxのエラーを警告してきた、と私は取得しています：

警告（XHR）を、 => 0

警告（thrownError）=>エラー

http://jsfiddle.net/rhewitt/u3C4U/

Answer 1

javascript関数のインラインこれを試してみてください代わりに：jQueryのように、送信ボタンにアタッチすることはできません

$("#map_canvas").on('click', '.submitBtn', function(e){ 
    e.preventDefault(); 
    postSighting();   
}); 

Answer 2

id submitBtnがあり、クラス submitBtnにアタッチしようとしています。

変更から：

$('.submitBtn').click(function(e){ 
    e.preventDefault(); 
    postSighting();   
}); 

に：フォームがcreated dynamicallyあるので

$('#submitBtn').live("click", function(e){ 
    e.preventDefault(); 
    postSighting();   
}); 

また.live()の使用を注意してください。