Jqery und reload per submit

thecrazykaktus · 21. Juli 2011

hallo Leute habe ein dickes Problem!
Und zwar kenne ich mich nicht wirklich mit Jqery aus und hoffe ihr könnt mir helfen!

ich habe ein Größeres php Datei in der viel gerüft und per submit button daten aus der Datenbank geholt werden und diese dann als ergebniss ausgegeben werde! Die Seite ist komplett php basiert und daher auch etwas überladen!

Mein Poblem ist das wenn ich auf Submit klicke die ganze Seite neu geladen wird und die Ergebnisse unten angezeigt werden! Mein Ziel ist das wenn ich auf Submit klicke nur die ergebnisse neu geladen werden und nicht die ganze Seite!

Hier mal der ganze Quelltext hoffe ihr könnt mir helfen wie gesagt jqery bin ich absoluter anfänger!

PHP:

<?PHP    
	session_start();	
	$tagOptions .='<div id="reloadall">';

	#  ADMIN-Bereich: Login check
	$login=true;
	if(isset($_SESSION['loggedin']))
	{
		if(!$_SESSION['loggedin'])
			$login=false;
	}
	else
			$login=false;

        #  Gibt fuer die Seite 'Weinlagen' den HTML-Code zur Anzeige der Lagen-Detailinformationen
        #  (Weinetiketten, Bild+Text-zusatzinfo)
    
        # header("Content-Type: text/html; charset=utf-8");
    
        include "read_lage.php";
 		$tagOptions ="";
   
 		#$tag_id = filter_input(INPUT_GET, 'tag_id', FILTER_SANITIZE_NUMBER_INT);
		if( isset( $_GET['leer'] ) ) {
			$emptyMode = 1;
		}
		if( isset( $_GET['letzte'] ) ) {
			$letzteMode = 1;
		}
		if( isset( $_GET['op'] ) ) {
 			$op = filter_input(INPUT_GET, 'op', FILTER_SANITIZE_STRING);
	 	} else { 
			$op = "und";
		}

		$ids = $_GET['ids'];
		if( $ids != 0 ) {
			$idlist = '"' . $ids[0] . '"';
			for( $i=1; $i<count($ids); ++$i) {
				$idlist .= ', "' . $ids[$i] . '"';
			}

			$idargs ="";
			foreach( $ids as $id ) {
				$idargs .="&amp;ids[]=" . $id;
			}
		}
		
		
		
		$tags = $db->query("SELECT id,name,text FROM `tags` ORDER BY name");
		$tagOptions .="Suchbegriffe ausw&auml;hlen:";
		$tagOptions .='<form name="myform" action="show.php">';
		$tagName = "";
		$tagOptions .= '<table><tr>';
		for($i=0; $i<count($tags) ; $i++) {
			$tagOptions .= '<td>';
			$tagOptions .= '<input type="checkbox" class="checkbox" name="ids[]" value="'. $tags[$i]['id'] . '" title="' . htmlentities($tags[$i]['name'])  .'"';
			if( $ids != 0 ) {
				foreach( $ids as $id ) {
					if( $tags[$i]['id']  == $id ) {
						$tagOptions .= " checked";
						if( $tagName != "" ) $tagName .= " $op ";
						$tagName .= htmlentities($tags[$i]['name']) ." ";
					}
				}
			}
			$tagOptions .= ' onchange="patternChange(this)" ';
			$tagOptions .= '>';
			$tagOptions .=  "<span id='s" . $tags[$i]['id'] . "'>" . htmlentities($tags[$i]['name']) . "</span></td>\n";
			if( ($i +1 ) % 6 == 0  && ($i +1) != count($tags)) $tagOptions .= '</tr><tr>';
		}
		$tagOptions .= "</tr></table>\n";
		$tagOptions .=  '<input type="radio" name="op" value="und"'  . ($op == "und" ?  'checked' : '') . ' onchange="patternChange()" > UND&nbsp;';
		$tagOptions .=  '<input type="radio" name="op" value="oder"' . ($op == "oder" ? 'checked' : '') . ' onchange="patternChange()" > ODER';
#		$tagOptions .= "<br>\n";
		$tagOptions .=  '<input type="submit" value=" Suchen" class="suche" id="sub_reload">';
#		$tagOptions .=  '<input name="preis" type="text" value=" Suchen " size="20"  readonly>';  
		$tagOptions .= "<span style='margin-left:12px' id='suchmuster'>Suchmuster</span><br>\n";
		$tagOptions .= "</form>\n";
		$tagOptions .= '<br><div><a href="show.php?leer">Etiketten noch ohne Suchbegriffe. </a><br>';
		$tagOptions .= '<a href="show.php?letzte">Zuletzt hochgeladene Etiketten</a></div><br>';
		
        $lageBilderHTML = "";
		$lageBilderHTML .= $tagOptions;
#		$lageBilderHTML .= ' <br><a href="show.php?leer">Etiketten ohne Tags</a> <br>';
		if( $login ) {
			$lageBilderHTML .= ' <a href="etiketten_hochladen.php">Etiketten hochladen</a> <br>';
			$lageBilderHTML .= ' <a href="tags_bearbeiten.php">Tags bearbeiten</a> <br>';
			$lageBilderHTML .= ' <a href="protokoll.php">Protokoll</a> <br>';
		}


		if( $emptyMode == 1 ) {
		 	$cmd ="SELECT * FROM etiketten  WHERE NOT EXISTS (SELECT * FROM taglinks  WHERE taglinks.etiketten_id = etiketten.id)";
			$lageBilderHTML .= "<h2>Etiketten ohne Tags</h2>";
 		} else if( $letzteMode == 1 ) {
		 	$cmd ="SELECT * FROM etiketten  ORDER BY ID DESC LIMIT 10 ";
			$lageBilderHTML .= "<h2>Neueste Etiketten</h2>";
 		} else {
			$cmd = 'SELECT t1.id, t1.bild_url, t1.beschreibung, t2.tag_id FROM etiketten AS t1 INNER JOIN taglinks AS t2  ON t1.id = t2.etiketten_id WHERE  t2.tag_id IN (';
			$cmd .= $idlist . ')';
			if($op == "und") {
				$cmd .= 'GROUP BY t1.id HAVING   Count(t1.id) = ' . count($ids);
			}
			if( $tagName != "" ) {
				$lageBilderHTML .= "<h2>Etiketten zu <i> $tagName </i></h2>";
				$anfragen = $db->query("SELECT * FROM `anfragen` ORDER BY zeit DESC LIMIT 1 ");
				if( $anfragen[0]['text'] != $tagName ) {
					$proto = "INSERT INTO `anfragen` (text, zeit) VALUES ('$tagName', now() )";
					if(!$db->execute($proto))  {
						$lageBilderHTML .= "Fehler beim Protokollieren: " . $db->get_last_error();
					}
				}
			} else {
				$lageBilderHTML .= "<h2>Etiketten zu <i> ??? </i></h2>";
			}
 		}

#        $lageBilderHTML  .= "<br>" . $cmd . " ";
		$etiketten = $db->query($cmd);
           
                #$lageBilderHTML .= "<i>Insgesamt " . count($etiketten) . " Etiketten vorhanden.</i><br>";

		if(count($etiketten) == 0)
            {
                $lageBilderHTML .= "<p><i>Keine Etiketten vorhanden.</i><br>";
				if( $op == "und" ) {
					$lageBilderHTML .= "Sie haben mehrere Suchbegriffe mit UND verkn&uuml;pft?";
					$lageBilderHTML .= "Dann werden Etiketten gesucht, die jeweils alle Begriffe enthalten.";
					$lageBilderHTML .= "Zum Beispiel findet <em>Baden UND Vogel</em> alle Vogeletiketten aus Baden.";
					$lageBilderHTML .= "Andererseits gibt es f&uuml;r <em>Ahr UND Baden</em> (hoffentlich) kein Etikett.";
					$lageBilderHTML .= "In diesem Fall ist wohl eher <em>Ahr ODER Baden</em> gemeint, um alle Etiketten aus den beiden Gebieten anzuzeigen.";
                $lageBilderHTML .= "</p>";
				}
            }
            else
            {	
               $lageBilderHTML .= '<div id="etiketten" >';

			    $lageBilderHTML .= "<ol>";
				$index = array();
                #  Liste aller Etiketten durchlaufen
                for($i=0; $i<count($etiketten) ; $i++) {
                    $etikett = $etiketten[$i];
					$index[$i] = $etikett['id'];
                              
                    $sourceImageURL = "../../img/etiketten/original/" . $etikett['bild_url'];
                    $sourceImageLocalPath = $_SERVER['DOCUMENT_ROOT'] . "/" . APP_BASE_PATH . "img/etiketten/original/" . $etikett['bild_url'];
        
                    $targetImageURL = "../../img/etiketten/anzeige/" . $etikett['bild_url'];
                    $targetImageLocalPath = $_SERVER['DOCUMENT_ROOT'] . "/" . APP_BASE_PATH . "img/etiketten/anzeige/" . $etikett['bild_url'];

                    $lageBilderHTML .= '<li class="floatleft">';		#Hier Wird die Liste gefloatet damit die ausgegebenen Ettiketten nebereinander angeordnet werden und nicht untereinander	
#                    $lageBilderHTML .= $etikett['tag_id'] . "*";			

                    if(!file_exists($sourceImageLocalPath))
                       # $lageBilderHTML .= "Bild  $sourceImageURL  existiert nicht.";	
						$lageBilderHTML .= '<img src="etikett_nicht.gif">';		
                    else
                   {
                       #  Pruefen, ob das Bild schon als Anzeigekopie existiert
                       if(!file_exists($targetImageLocalPath))
                       {
                          #  Querformate werden proportional auf 400 Pixel Breite
                          #  skaliert, Hochformate auf 400 Pixel Hoehe.   -- anders als im Archiv
                          resizeImageEx($sourceImageLocalPath, $targetImageLocalPath, 400, 400, 0xFFFFFF, 96);
                       }
					   if( $etikett['beschreibung'] != "-" ) {
						   $name = $etikett['beschreibung'];
					   } else {
                       	   $imgInfo = getimagesize($targetImageLocalPath);	
					   	   $parts = preg_split('/[\/.]/', $etikett['bild_url'] );
					   	   $name = $parts[count($parts) - 2];
					   }
                    #   $lageBilderHTML .= '<a href="' .  $targetImageURL . '" rel="prettyPhoto[gal]" title="'. $name .'">'. $name ."</a>";
                      
						
				#---------------------------------------------------------------------------
				#Sorgt für die Ausgabe der Thumb Bilder anstatt der ausgabe als Links
				#---------------------------------------------------------------------------
					  
					  $lageBilderHTML .= '<a href="' .  $targetImageURL . '" rel="prettyPhoto[gal]" title="'. $name .'">';
					  
					  $lageBilderHTML .= '<img src="'.  $targetImageURL . '" width="120px" height="100px">';
					  
					  $lageBilderHTML .= "</a>";		  
					  
				#---------------------------------------------------------------------------
			
					  
					   $lageBilderHTML .= " ";
                       $lageBilderHTML .= '<a href="taginfo.php?eti=' . $etikett['id'];
                       $lageBilderHTML .= '&amp;op='. $op ;
                       $lageBilderHTML .= $idargs ;
                       $lageBilderHTML .= '" target="_blank">'; #target_vlank hinzugefügt das estra Informationen im neuen Tab erscheinen
                       $lageBilderHTML .= '<img src="i_2.gif "></a>';
					  
					   
				   }
                   $lageBilderHTML .= "</li>\n";
				  
                }
			    $lageBilderHTML .= "</ol></div>";
 		        $_SESSION['index'] = $index;	
			}
       
        
        $db->close();
		$tagOptions .='</div>';
    
    ?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Etiketten-Schau</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="js/jquery-1.4.4.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="css/etikettenschau.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
	 $(document).ready( function() {
	 	patternChange( null );
 		});
	 
	function nav()
  	 {
   		var w = document.myform.tag_id.selectedIndex;
   		var url_add = "show.php?tag_id=" + document.myform.tag_id.options[w].value;
		//alert( url_add);
   		window.location.href = url_add;
   }
	function patternChange( e )
  	 {
		 if( e != null ) {
			 var sId = "s" + e.value;
			//alert( sId + document.getElementById(sId) );
			var sE = document.getElementById(sId);
			if( e.checked ) {
				sE.style.color  = "#698a33";
			} else {
				sE.style.color  = "";
			}
		 }
		var suche = ""; 
		var op;
		if (document.myform.op[0].checked == true) {
			op = " UND ";
		} else {
			op = " ODER ";
		}
   		var w = document.getElementById('suchmuster');
		for( var j=0; j<document.getElementsByName('ids[]').length; j++ ) {
			var boxes = document.getElementsByName('ids[]')[j];
			if( boxes.checked ) {
				if( suche != "" ) {
					suche += op;
				}
				suche +=  boxes.title;
			}
		}
	  var sstyle = "font-size:large;color:#698a33";
	  if( suche != "" ) {
		  sstyle += ";border-style:none";
	  }
 		w.innerHTML = "Suchanfrage: <span style='" + sstyle + "'>" + suche + "<\/span>";
	}
	</script>
<script type="text/javascript"> 
$(document).ready(function(){

	$("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav
	
	$("ul.topnav li span").click(function() { //When trigger is clicked...
		
		//Following events are applied to the subnav itself (moving subnav up and down)
		$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click

		$(this).parent().hover(function() {
		}, function(){	
			$(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
		});

		//Following events are applied to the trigger (Hover events for the trigger)
		}).hover(function() { 
			$(this).addClass("subhover"); //On hover over, add class "subhover"
		}, function(){	//On Hover Out
			$(this).removeClass("subhover"); //On hover out, remove class "subhover"
	});

});
</script>

<script type="text/javascript"> 

</script>

<style type="text/css">
.dfwsText {
	width:800px;
	margin-bottom:12px;
}
</style>
</head>
<body>
<?PHP
	#Hier werden Header, Content und Footer geladen
		
        include 'header.php';
		include 'content.php';
		include 'footer.php';

    ?>
<script type="text/javascript" charset="utf-8">
		$(document).ready(function(){
			$("a[rel^='prettyPhoto']").prettyPhoto({
			      overlay_gallery: false, /* If set to true, a gallery will overlay the fullscreen image on mouse over */
			      theme: 'dark_rounded'});
		});
	</script>
</body>
</html>

Derzeitiges ergbniss zusehen unter http://projekt.krebsbach-westies.de/lagenarchiv/pages/etiketten/show.php zum besseren Verständniss!

ice-breaker · 21. Juli 2011

was du suchst nennt sich ajax: 5 Ways to Make Ajax Calls with jQuery

thecrazykaktus · 21. Juli 2011

na das ist mir schon klar! nur wie gesagt bin ich absoluter anfänger und wenn man so kommt hab ich keine ahnung wie ich das direkt umsetzen kann! Da erhoffe ich mir Hilfe! Will natürlich keine Lösung das verlange ich ja auch nicht

Wennich das richtig sehe was du mir gepostet hast brauche ich diese Funktion oder?

Code:

    //  $.get()  
        $("#get").click(function(){  
            $("#result").html(ajax_load);  
            $.get(  
                loadUrl,  
                {language: "php", version: 5},  
                function(responseText){  
                    $("#result").html(responseText);  
                },  
                "html"  
            );  
        });

Mr. Snoot · 21. Juli 2011

Mal als Denkansatz:

Mit load() kannst du Daten dynamisch laden und in die Seite einfügen.

Folgendes übergibt via $_POST['value'] an abfrage.php die Werte wert1 und wert2:

PHP:

$("#ausgabe").load("abfrage.php",{"value[]": [wert1,wert2]});

In abfrage.php kannst du damit eine DB-Abfrage generieren welche via echo zurückgegeben und dann in <div id="ausgabe"> ausgegeben wird.

abfrage.php

PHP:

$wert1 = $_POST['value'][0];
$wert1 = $_POST['value'][1];

$sql = mysql_query("SELECT name FROM tabelle WHERE x = $wert1 AND y = $wert2");
while($row = mysql_fetch_object($sql))
{
  echo $row->name; // landet in <div id="ausgabe"></div>
}

thecrazykaktus · 21. Juli 2011

Wenn ich das jetzt richtig verstehe und den Quelltext von oben anschaue müste ich alles was ich oben programmiert habe bzw der Vorgänger von mir auseinander stricken damit ich das so umsetzen kann?

Mr. Snoot · 21. Juli 2011

Naja - im Grunde musst du "nur" die gesamte DB-Abfrage in eine abfrage.php auslagern und alle notwendigen Werte wie oben beschrieben an selbige übergeben.

thecrazykaktus · 21. Juli 2011

Nur is das bei dem ding das Problem das das alles extrem ineinender greift!
Mal schauen ob ich es hinbekomme werde mich später nochmal melden!

Ergänzung (21. Juli 2011)

Also ich verzweifele ich bekomme es einfach nicht hin und weis nicht wie ich es umgesetzt bekomme

Das beispiel oben kann ich noch nachvollziehen schaffe es aber nicht auf die oben aufgezeigte Seite anzuwenden

Ergänzung (22. Juli 2011)

Könnte mir einer bei der umsetzung Helfen? Würde auch ein Obolus dafür bezahlen ? Wer interesse hat einfach mal ne PN scjicken wäre echt super!

Mr. Snoot · 22. Juli 2011

Du hast aber nicht geglaubt, dass du das in so kurzer Zeit schaffst, oder?

Hab dir mal was gebastelt, damit du siehst, wie es aussehen könnte: ~~http://misc.halbleiter.org/etikett/etikett.php~~

Die Abfrage mit und macht in dem Fall zwar keinen Sinn, aber es geht ja nur ums Prinzip.

thecrazykaktus · 22. Juli 2011

Ich werde mir das mal anschauen aber danke dir auf jeden Fall!

Ergänzung (22. Juli 2011)

Danke schon mal für das Tolle beispiel leider habe ich wirklich problme das auf das obere Beispiel umzusetzen werde mich nochmal etwas dahinter setzen!

Suche

Jqery und reload per submit

thecrazykaktus

Lt. Junior Grade

ice-breaker

Commodore

thecrazykaktus

Lt. Junior Grade

Mr. Snoot

Gast

thecrazykaktus

Lt. Junior Grade

Mr. Snoot

Gast

thecrazykaktus

Lt. Junior Grade

Mr. Snoot

Gast

thecrazykaktus

Lt. Junior Grade

Ähnliche Themen