2010-11-24 16 views
0
nicht

Hier ist der Code:jQuery Form arbeiten

<script type="text/javascript"> 
    $.ajaxSetup ({ 
     cache: false 
    }); 

    var ajax_load = "<img src='load.gif' alt='Loading...' />"; 

    $('#create').submit(function() { 
     $("#result").html(ajax_load); 
     $.get("actions/create.php", { url: longform }, 
      function(data){ 
       $('#result').html(data); 
      }); 
     ); 
    }); 
</script> 

Aber alles, was auf die URL in der Adressleiste Änderungen passiert ist:

http://domain.com/?longform=http://www.google.com/&submit=Submit 

Form und Ergebnis div:

<form name="create" action="" id="create"> 
    <input type="text" name="longform" /> <input type="submit" name="submit" value="Submit" /> 
</form> 

<div id="result"> 
results go here 
</div> 

Muss ich den Ajax-Code im Kopfbereich haben? Oder ist, dass keine Rolle ..

UPDATE:

Der Code auf meiner Seite sieht nun wie folgt aus:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
<script type="text/javascript"> 
    $.ajaxSetup ({ 
     cache: false 
    }); 

    var ajax_load = "<img src='img/load.gif' alt='loading...' />"; 

    $('#create').submit(function() { 
     event.preventDefault(); 
     $("#result").html(ajax_load); 
     $.get("actions/create.php", { url: longform }, 
      function(data){ 
       $('#result').html(data); 
      }); 
     ); 
    }); 
</script> 
</head> 

<body> 
<form name="create" action="" id="create"> 
    <input type="text" name="longform" /> <input type="submit" name="submit" value="Shorten" /> 
</form> 

<div id="result"> 
123 
</div> 

immer noch nicht funktioniert. actions/create.php gibt einfach eine Foobar-Zeichenfolge aus, um es zu testen.

UPDATE:

Ich habe auch schon versucht, diese:

$('#create').submit(function() { 
    var formdata = $(this).serialize(); 
    $.ajax({ 
     url: 'actions/create.php', 
     data: formdata, 
     success: function(responseText){ 
       $('#result').html(responseText); 
     } 
    }); 
    return false; 
}); 

Aber es auch nicht funktioniert .. könnte etwas in meinem .htaccess mit ihm durcheinander sein?

Antwort

0

Ok, es hat funktioniert, sobald ich alle jQuery UNTEN die Form und Ergebnisse div .. wie langweilig.

+1

das ist, weil das Formular nicht Teil des DOM war, als das Skript ausgeführt wurde. Sie sollten das Skript als Teil des 'document.ready'-Ereignisses einschließen. 'jQuery (Funktion ($) {/ * Dein Code hier * /});' – zzzzBov

-1

entfernen Sie das action-Attribut aus dem Formular-Tag

1

Ihre

function(data){ 
    $('#result').html(data); 
}); 

function(data){ 
    $('#result').html(data); 
} 

sein sollte, und Sie müssen das Standardverhalten des Formulars einreichen Aktion (Absenden des Formulars verhindern über POST):

$('#create').submit(function() { 
    // ... 
    return false; 
}); 

Sie können (zusätzlich) einen Blick auf jQuerys .load()-method werfen, die genau das tut, was Sie tun, aber kürzer. Das Ganze würde wie folgt aussehen:

$('#create').submit(function() { 
    $("#result").load("actions/create.php", { url: longform }); 
    return false; 
}); 
1

Das submit Ereignis nicht statt der Vorlage geschieht aber vor es, damit das Formular normalerweise trägt, nachdem der JavaScript ausgeführt wird. Sie müssen den normalen einreichenden entweder durch Rückkehr false aus dem Ereignishandler abbrechen:

$('#create').submit(function() { 
    $("#result").html(ajax_load); 
    $.get("actions/create.php", { url: longform }, 
     function(data){ 
      $('#result').html(data); 
     }); 
    ); 
    return false; 
}); 

Alternativ können Sie preventDefault nennen. Siehe http://api.jquery.com/event.preventDefault/