Ajax Submit Function

[ZockerLordLP]

Hallo zusammen,

ich habe ein Problem beim abschicken eines Forms mit Ajax. Dieses Form befindet sich in einem Model.

  <div class="modal fade" id="meinModal" tabindex="-1" role="dialog" aria-labelledby="meinModalLabel" aria-hidden="true">
     <div class="modal-dialog">
       <div class="modal-content">
        <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Schließen</span></button>
         <h4 class="modal-title" id="meinModalLabel">Modal-Überschrift</h4>
        </div>
        <div id="modal-load">
        <form action="" id="edit" method="POST">
         <div id="modal-body" class="modal-body">
           Eingabe:&nbsp;<input type="text" id="fach">
      
         </div>
    
         <div class="modal-footer">
           <button type="button" class="btn btn-default" data-dismiss="modal">Schließen</button>
           <input type="submit" class="btn btn-primary" value="Änderungen speichern">
         </div>
        </form>
        </div>
       </div>
     </div>
   </div>

Folgenden Ajax Code benutze ich:

$(document).ready(function()
{

  $("#edit").submit(function() {
     alert("HI");

  $.ajax({
  type: "POST",
  url: "ajax/send.php",
  data: "fach=" + $("#fach").val(),
  success: function(msg)
  {
         $('#meinModal').modal('toggle');
    
  }
  });

  return false;
  });

});

Leider wird die Seite reloaded und es wird kein "HI" ausgegeben. Ich weiß allerdings nicht woran das liegt.

Danke

 

[SpiceLab]

Versuch es mal hiermit:

$("#edit").submit(function(event) {
  alert("HI");
  event.preventDefault();
});

Siehe auch http://api.jquery.com/submit/

 

[ZockerLordLP]

@SpiceLab
Habe jetzt herausgefunden, dass es funktioniert wenn es nicht im Modal ist. Ist irgendwie komisch

Ich habe eine Vermutung:
Ich lade den Content der Modal über JQuery:

$('#modal-load').load("modal_content.php");

Dann funktioniert es nicht. Wenn der Code so in dem Div steht funktioniert es.

 

[Cr0wN]

Kann es sein, dass es grundsätzlich Probleme mit den Modals gibt? Ich hab dazu nämlich ein fast "ähnliches" Problem vor einigen Stunden gepostet. Bei mir funktionieren beim Formatieren die Modals nicht mehr oder die Modals funktionieren erst beim Ausführen von anderen Modals.

Ich hab jetzt das neueste Bootstrap mal geloaded und integriert, hat aber auch nichts gebracht.

 

[ZockerLordLP]

Ich glaube ich steige jetzt auch auf foundation um

 

[Jimbo2001]

Das liegt nur am Timing...
Deine Funktion ist zu schnell und das "Modal" lädt sich irgendwo rein ... dadurch verliert dein Script das "scope".

Probier es mal so:

$(function(){
// eine Live abfrage... solle zwar am besten nur am übergeordneten Container liegen aber es funktioniert auch so...
  $('body').on('submit', '#edit', function(){
    alert('submit');
  });
})();