jQuery Ajax Formular Übergeben ignoriert 'Erfolg' Funktion, lädt Seite

Question

Ich reiche ein HTML-Formular zu einer MySQL-Datenbank mit jQuery .ajax. Wenn ich das Formular absende (nachdem alle Felder validiert sind), werden die Daten als neuer Datensatz in die Datenbank eingefügt, aber die Erfolgsfunktion wird nicht ausgeführt.

jsFiddle

* Das ist alles findet in einer Google Maps infowindow, aber ich bin mir nicht sicher, dass das ist relevant.

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; 
    }; 

Ich habe die jQuery Ajax-Fehler aufmerksam gemacht, und ich bin immer:

alert (XHR); => 0

alert (thrownError) => Fehler

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

Answer 1

Versuchen Sie, diese anstelle der Inline-JavaScript-Funktion:

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

Answer 2

Die jQuery kann nicht auf den Absenden-Button anhängen, wie Es hat die ID submitBtn und Sie versuchen, an Klasse submitBtn anzuhängen.

Wechsel von:

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

zu:

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

Beachten Sie auch die Verwendung von .live() weil die Form created dynamically ist.