ravage
2011-01-26, 23:22:03
Moin.
Folgendes Konstrukt aufs wesentliche reduziert:
Ich habe eine Seite mit einem Link und einem leeren Div Container. Nach erfolgreichem Laden dieser Seite werden zwei jQuery AJAX Scripts geladen.
Script Nr. 1 überwacht den Link und lädt bei einem Klick ein Formular aus einer PHP Datei in den vorher noch leeren Div Container.
Script Nr. 2 soll beim abschicken des Formulares ausgeführt werden und die Daten im Formular per PHP Datei in MySQL eintragen. Soll... macht es aber nicht. Wenn ich das jQuery Script per onClick aufrufe funktioniert es.
Meine Vermutung ist (hab nur wenig Erfahrung damit wie Javascript arbeitet):
Da beim laden der Seite und damit der jQuery Scripts das Formular noch gar nicht vorhanden ist, kann dies auch nicht überwacht werden. Ist das wirklich so? Und wenn ja, wie löse ich das Problem ohne Hilfsmittel wie onClick etc.?
/EDIT meint, ich soll ein Beispiel posten.
index.html
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
<!--
$(function(){
$('a').click( function() { // Link wird überwacht
$.ajax({
type: "GET",
url: "back.php",
data: "task=Form",
success: function(data) {
$('div').html(data);
$('textarea').focus();
}
});
return false;
});
$('form').submit( function() { // Form wird überwacht
alert("Script wird ausgeführt!");
$.ajax({
type: "GET",
url: "back.php",
data: "task=SQL",
success: function(data) {
$('div').html(data);
}
});
return false;
});
});
function sqlStart() { // Funktion wird direkt aufgerufen
alert("Script wird ausgeführt!");
$.ajax({
type: "GET",
url: "back.php",
data: "task=SQL",
success: function(data) {
$('div').html(data);
}
});
return false;
}
//-->
</script>
</head>
<body>
<p><a href=“#“>Link</a></p>
<div></div>
</body>
</html>
back.php
<?php
if( $_POST['task'] ) $task = $_POST['task'];
else $task = $_GET['task'];
switch( $task ) {
case "Form" : # Kommentar Formular
$return = "<form>";
$return .= "<textarea></textarea>";
$return .= "<input type=\"submit\" value=\"ohne onClick\">";
$return .= "<input type=\"button\" onClick=\"sqlStart()\" value=\"mit onClick\">";
$return .= "</form>";
echo $return;
break;
case "SQL" : # Kommentar in Datenbank schreiben
echo "<p>SQL Befehl bla bla bla</p>";
break;
case "else" :
break;
}
?>
Folgendes Konstrukt aufs wesentliche reduziert:
Ich habe eine Seite mit einem Link und einem leeren Div Container. Nach erfolgreichem Laden dieser Seite werden zwei jQuery AJAX Scripts geladen.
Script Nr. 1 überwacht den Link und lädt bei einem Klick ein Formular aus einer PHP Datei in den vorher noch leeren Div Container.
Script Nr. 2 soll beim abschicken des Formulares ausgeführt werden und die Daten im Formular per PHP Datei in MySQL eintragen. Soll... macht es aber nicht. Wenn ich das jQuery Script per onClick aufrufe funktioniert es.
Meine Vermutung ist (hab nur wenig Erfahrung damit wie Javascript arbeitet):
Da beim laden der Seite und damit der jQuery Scripts das Formular noch gar nicht vorhanden ist, kann dies auch nicht überwacht werden. Ist das wirklich so? Und wenn ja, wie löse ich das Problem ohne Hilfsmittel wie onClick etc.?
/EDIT meint, ich soll ein Beispiel posten.
index.html
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
<!--
$(function(){
$('a').click( function() { // Link wird überwacht
$.ajax({
type: "GET",
url: "back.php",
data: "task=Form",
success: function(data) {
$('div').html(data);
$('textarea').focus();
}
});
return false;
});
$('form').submit( function() { // Form wird überwacht
alert("Script wird ausgeführt!");
$.ajax({
type: "GET",
url: "back.php",
data: "task=SQL",
success: function(data) {
$('div').html(data);
}
});
return false;
});
});
function sqlStart() { // Funktion wird direkt aufgerufen
alert("Script wird ausgeführt!");
$.ajax({
type: "GET",
url: "back.php",
data: "task=SQL",
success: function(data) {
$('div').html(data);
}
});
return false;
}
//-->
</script>
</head>
<body>
<p><a href=“#“>Link</a></p>
<div></div>
</body>
</html>
back.php
<?php
if( $_POST['task'] ) $task = $_POST['task'];
else $task = $_GET['task'];
switch( $task ) {
case "Form" : # Kommentar Formular
$return = "<form>";
$return .= "<textarea></textarea>";
$return .= "<input type=\"submit\" value=\"ohne onClick\">";
$return .= "<input type=\"button\" onClick=\"sqlStart()\" value=\"mit onClick\">";
$return .= "</form>";
echo $return;
break;
case "SQL" : # Kommentar in Datenbank schreiben
echo "<p>SQL Befehl bla bla bla</p>";
break;
case "else" :
break;
}
?>