jquery - auf submit in div verlinken

[max]

Hallo!

Muss ehrlich gestehen, ich kenn mich nicht aus. Die 3 mini Code stücke die ich bisher brauchte hat mir ein Freund geschrieben, nachdem ich gerade erst Anfang php und html zu lernen.

  
<script src='jquery-1.3.2.js' type='text/javascript'></script>  
<script type='text/javascript'>		  
  
function setlinks()  
{  
	$('.divaendern').live('click', function(event){  
		var href = $(this).attr('href');				//sucht sich die href attribute  
		$('#inhalt').load(href);  
		event.preventDefault();							//verhindert das link geladen wird (um php  nur im div inhalt anzuzeigen)  
	});	  
	  
	$('.suchen').click(function(event){  
		var href = $(this).attr('href'); 				//sucht sich die href attribute  
		var suche = $('#suchen').val();  
		$('#inhalt').load(href+'?search='+suche);  
		event.preventDefault();							//verhindert das link geladen wird (um php  nur im div inhalt anzuzeigen)  
	});	  
	$('.profile').click(function(event){  
		var href = $(this).attr('href'); 				//sucht sich die href attribute  
		$('#login').load(href);  
		event.preventDefault();	  
	});  
}  
  
//script das ausgeführt wird wenn dokument vollständig geladen  
$(document).ready(function(){  
	setlinks();  
});	  

die funktionieren auch alle super, nun möchte ich allerdings,
das wenn ich auf den Submit Button eines Formulars klick das eben auch das Laden in ein neues Fenster unterdrückt und die verlinkte Datei sich dann eben auch in das div lädt. Da kann mein Freund mir leider nicht mehr weiter helfen, deswegen:

BITTE UM EURE HILFE,

ich hab schon solche Probleme damit, dass mit meinen Php alles gut geht, dass ich leider keine Zeit habe um mich selber einzulesen (nicht das ich es nicht versucht hätte, aber ich verstehs einfach nicht, da gibt es ja unterschiedlichste Schreibweisen oder so)

Lg Max

[hal]

Hallo!

vielleicht hilft dir ein kleiner Umbau weiter:

$('.suchen').click(function(event){
var href = $(this).attr('href'); //sucht sich die href attribute
var suche = $('#suchen').val();
$('#inhalt').load(href+'?search='+suche);
event.preventDefault(); //verhindert das link geladen wird (um php  nur im div inhalt anzuzeigen)
});

Per jQuery POST könnte man das eventuell so realisieren...
SCRIPT:
$('.suchen').click(function(){
    $.post("test.php", { search:suche }, function(data){
        $('#inhalt').html(data);
    });
});
Aus: jQuery Dokumentation

PHP Datei:
<?
...Ergebnis der verschieden php Funktionen=$suchergebnis;
return $suchergebnis;
?>

$.post sendet die Daten (in deinem Falle 'suche' aus JS als $_POST['search'] in PHP) an die URL test.php. Die Antwort dieses Scriptes (also $suchergebnis) wird als JS Variable 'data' zurückgegeben und der Inhalt dieser in das DIV geschrieben.

Ich hoffe ich habe dich richtig verstanden und nicht zu sehr verwirrt.

Grüße, Stefan.

[max]

Sorry wenn das nicht rausgekommen ist, die Daten hol ich mir eh alle mit MySql und das klappt auch alles, ich will nur nicht dass es in einem neuen Fenster aufgemacht wird, sondern in das div, in dem es eigentlich ja schon drinnen steht, allerdings ohne einen hässlichen iframe.

Lg max

[hal]

Sorry wenn das nicht rausgekommen ist, die Daten hol ich mir eh alle mit MySql und das klappt auch alles, ich will nur nicht dass es in einem neuen Fenster aufgemacht wird, sondern in das div, in dem es eigentlich ja schon drinnen steht, allerdings ohne einen hässlichen iframe.

Lg max

Ja, das tut mein kleiner Schnipsel ja. Man klickt auf den Button und sendet eine Anfrage an das PHP-Script (per POST). Dieses erledigt alles was es soll und gibt dann zb. die Suchergebnisse zurück. $("#inhalt").html(data) schreibt dann die Ergebnisse der PHP Datei in das DIV mit der ID 'inhalt'. Das passiert alles ohne ein Neuladen der kompletten Seite oder dem Einsatz eines iFrames. Melde dich, wenn du es ausführlicher brauchst.

Grüße, Stefan

[hal]

»» Sorry wenn das nicht rausgekommen ist, die Daten hol ich mir eh alle mit MySql und das klappt auch alles, ich will nur nicht dass es in einem neuen Fenster aufgemacht wird, sondern in das div, in dem es eigentlich ja schon drinnen steht, allerdings ohne einen hässlichen iframe.
»»
»» Lg max

Ja, das tut mein kleiner Schnipsel ja. Man klickt auf den Button und sendet eine Anfrage an das PHP-Script (per POST). Dieses erledigt alles was es soll und gibt dann zb. die Suchergebnisse zurück. $("#inhalt").html(data) schreibt dann die Ergebnisse der PHP Datei in das DIV mit der ID 'inhalt'. Das passiert alles ohne ein Neuladen der kompletten Seite oder dem Einsatz eines iFrames. Melde dich, wenn du es ausführlicher brauchst.

Grüße, Stefan

NACHTRAG:

Entschuldige, ich glaube jetzt zu wissen was du meintest...
Also mit dieser, von mir genannten Methode sollte das PHP Script nur ein HTML Schnipsel als String zurückgeben z.B. eine Tabelle (kann natürlich komplizierter sein). Es wird dadurch nicht eine komplette HTML Seite geladen, sondern eben nur ein String übermittelt (also ohne <html><head></head><body></body></html>), der dann in das DIV geschrieben wird. nun hoffe ich das ich richtig lag ;)

Grüße, Stefan

[max]

Ja also nein - zum Teil,

Ja es soll in das DIV geschrieben werden.
Nein es soll kein Html Schnipsel als String zurückgegeben werden, sondern wie action oder href oder sonstiges eben das eigentliche natürliche verhalten des submit buttons schon noch erhalten werden, dass dieser die Daten weiterschickt, und ein php aufruft, nur dass eben dieses in das div hineingeladen wird.
somit die ganze Seite nicht neu geladen wird, keine iframes drinnen sind, und sodass ich nicht die home.php nochmal als ganzes brauch

und ja, leider brauch ichs ausführlicher :), weiß nicht, irgendwie ist javascript bzw. jquery schon eine Fremdsprache für mich!

Danke für deine Hilfe!

LG Max

[hal]

Ok, habe nun mal schnell ein Beispiel geschrieben:

Zuerst einmal die HTML Datei:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">  
<head>  
<script type="text/javascript" src="jquery.js"></script>  
  
<script type="text/javascript">  
  
    $(document).ready(function(){                                 //Ausgeführte Funktion nach dem Laden der Seite  
        $('#suchen').click(function() {                           //Clickevent wird dem Button mit der id 'suchen' zugeteilt  
	    var suche=$("#begriff").val();                        //Wert aus dem Textfeld mit der id 'suchen' wird ausgelesen  
	    $.post("test.php", { search:suche }, function(data) { //test.php wird im Hintergrund aufgerufen und 'suche' wird übergeben  
	        $('#inhalt').html(data);                          //das Ergebnis von test.php wird zurückgegeben und in das DIV mit der id  
	    });                                                   //'inhalt' geschrieben  
        });  
    });  
  
</script>  
</head>  
<body>  
  
<input type="text" id="begriff" />  
<input type="button" value="Suchen!" id="suchen" />  
<div id="inhalt" style="margin-top:30px; width:200px; border:1px solid #ff0000;"></div>  
  
</body></html>

und die dazugehörige PHP Datei:

  
<?  
for($a=0;$a<10;$a++)  //Testinhalt erzeugen  
	$ergebnis.='<div style="border:1px solid;">Suchanfrage: '.$_POST["search"].' Zeile: #'.$a.'</div>';  
  
echo $ergebnis;       //Inhalt zurückgeben  
?>

Der von mir erzeugte Testinhalt kann natürlich alles mögliche sein. Das Script läufts soweit bei mir sehr gut. Von der HTML Datei wird 'suche' an das PHP Script übergeben und ist in diesem dann als Variable $_POST["search"] verfügbar. Damit kann man dann alles Mögliche anstellen. Das Ergebnis der PHP Seite wird in einem String zusammengefasst und mit echo $ergebnis zurück an die HTML Datei gesendet (ich schrieb vorhin etwas von return $ergebnis, dies war aber falsch!). Dort wiederrum wird das Ergebnis in das DIV mit der id 'inhalt' eingetragen - Fertig. Kein iFrame, kein Neuladen, nichts. Der Anwender bemerkt diese Anfrage nicht wirklich. Ich hoffe das hilft dir ein bischen weiter.

Grüße, Stefan

[Max]

Danke danke, das erklärt mir zumindest mal, wie das ganze zumindest ungefähr mal passiert ;)
Bin mir sicher das ich noch über das eine oder andere Problem drüberstolpern werden aber danke danke danke danke wäre sonst echt einfach nur planlos!

Lg Max

[hal]

Danke danke, das erklärt mir zumindest mal, wie das ganze zumindest ungefähr mal passiert ;)
Bin mir sicher das ich noch über das eine oder andere Problem drüberstolpern werden aber danke danke danke danke wäre sonst echt einfach nur planlos!

Lg Max

Gern geschehen, jederzeit wieder!

Grüße, Stefan