Avatar billede madszeneli Nybegynder
16. marts 2011 - 12:14 Der er 2 kommentarer og
1 løsning

Problemer med ajax formular

Hej med jer,

Jeg har fulgt en guide til hvordan man laver en ajax-formular, som ikke opdatere siden. Det troede jeg faktisk fungerede fint, indtil jeg opdagede at siden faktisk nåede at opdatere.

Jeg modtager data på min server, men den opdatere bare siden inden... Hvad kan det skyldes?



Den originale kode:

$(function() {

$(".submit").click(function() {

var name = $("#name").val();
var email = $("#email").val();
    var comment = $("#comment").val();
        var post_id = $("#post_id").val();
    var dataString = 'name='+ name + '&email=' + email + '&comment=' + comment + '&post_id=' + post_id;
   
    if(name=='' || email=='' || comment=='')
    {
    alert('Please Give Valide Details');
    }
    else
    {
    $("#flash").show();
    $("#flash").fadeIn(400).html('<img src="ajax-loader.gif" align="absmiddle">&nbsp;<span class="loading">Loading Comment...</span>');
$.ajax({
        type: "POST",
  url: "commentajax.php",
  data: dataString,
  cache: false,
  success: function(html){

  $("ol#update").append(html);
  $("ol#update li:last").fadeIn("slow");
  document.getElementById('email').value='';
  document.getElementById('name').value='';
    document.getElementById('comment').value='';
    $("#name").focus();

  $("#flash").hide();
   
  }
});
}
return false;
    });
});






Min version, som også har live validering (men er ikke med i koden her):

    form.submit(function(){               

        var name = $("#name").val();
        var efternavn = $("#efternavn").val();
        var email = $("#email").val();
        var pass1 = $("#pass1").val();
        var pass2 = $("#pass2").val();
        var dataString = 'name='+ name + '&efternavn=' + efternavn + '&email=' + email + '&pass1=' + pass1 + '&pass2=' + pass2;
       
        if(validateName() & validateEfternavn() & validateEmail() & validatePass1() & validatePass2()){   
               
        {
        $("#flash").show();
        $("#flash").fadeIn(5000).html('<div class="Tilfoej">Tilføjer dig til databasen...</div>');
        $.ajax({
        type: "POST",
        url: "php/opret.php",
        data: dataString,
        cache: false,
        success: function(html){
        $("ol#update").append(html);
        $("ol#update li:last").fadeIn("slow");
        $("#flash").hide();
        }
        });
        }
           
        }
           
        else
       
            return false;
           
        });       


Håber at nogle af jer kan hjælpe mig :-)
Avatar billede olebole Juniormester
16. marts 2011 - 16:27 #1
<ole>

Jeg har svært ved at se logikken i koden. Det skyldes selvfølgelig dels, at den er skrevet med totalt usammenhængende indrykning - og dels forstår jeg ikke, hvad du vil med dine "show", "fadeIn" og "hide" funktioner. Du må nok forklare noget mere  =)

/mvh
</bole>
Avatar billede intenz Novice
16. marts 2011 - 17:57 #2
Som jeg forstår det, er det formularen som submittes? Altså den laver en refresh/redirect.

Du kan bruge preventDefault (eller returnere false) for at undgå det.

Du kan ændre starten af din form.submit til:

form.submit(function(event){
event.preventDefault();

...resten af din kode.


Manual: http://api.jquery.com/event.preventDefault/
Avatar billede madszeneli Nybegynder
17. marts 2011 - 08:38 #3
Mange tak for hjælpen :-)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester