✔ Ausklappbox:Neuen Inhalt aus Datenbank lesen

silent12 · 10. September 2012

Hallo,
ich bin gerade dabei meine website zu programmieren ( http://vu2048.web02.getvisible.de/neuaufbau/Mywebshare_website/ ) und dort würde ich gerne per readmore button einen anderen text aus einer Datenbank ausgeben.
Mein Code bis jetzt:

Code:

var id = encodeURI($myblockinput.parent().attr('id'));
if(id == "")
{
alert("keine ID übermittelt");
}
else
{
$.ajax
({
type: "POST",
url: "js/ajax.php",
data: "id="+id,
success: function(data)
{
var bloginhalt = data;
$myblockinput.parent().animate({height: "500px"}, "800" ,function(){$myblockinput.html(bloginhalt);});

//rest kompliziert wenn man den code nicht kennt...
var idparent = $myblockinput.parent().attr('id');
$("#" + idparent + " .blogtext").removeClass('blogtext').addClass('blogtextlong');
alert(bloginhalt);
$myblockinput.removeClass('submit').addClass('submitlongblog');
$myblockinput.parent().addClass('blogausgeklappt');

} 
});

und die ajax.php:

Code:

<?php
/*empfängt id des auszugebenden beitrags*/

if(!empty($_POST['id']))
{
	$id = $_POST['id'];

	/*#############AUSGABE der 2 Blogeinträge der Preview#########*/
			include'../../Admin/connect.php';
			/*Auswahl aus einer Tabelle*/
			$abfrage4 = mysql_query("SELECT * FROM Blog WHERE ID = '$id'");


			/*Ausgabe der Auswahl und dabei in einem Array($row2) speichern*/
			while ($row4 = mysql_fetch_array($abfrage4)) {
	
			$inhalt =   "<div class='blogbox' id='".$row4['id']."'>
								<div class='blogdate'>".$row4['date']."</div>
								<h2 class='blogheadline'>".$row4['title']."</h2>
								<div class='blogtext'>".$row4['blogtext']."</div>
								<div class='blogimage'>
									<img src='images/Blogimages/".$row4['blogimage']."' width='140px' height='140px' alt='blogimage' />
								</div>
								<div style='clear:both'></div>
								<input type='submit' class='submit' value='Read More'/>
						</div>";
	
	
	
			}
			
			$inhalt = preg_replace("/\r|\n/s", "", $inhalt);
			mysql_close($connection);/*beendet Verbindung*/
			echo utf8_encode($inhalt); 
			
}
else
{
	$fehler = "keine id übermittelt";
	echo $fehler; 
}
?>

Leider wird der neue Inhalt zwar in der Variablen übergeben, aber er wird nicht ausgegeben.
Kann mir jemand helfen ? (Wenn das hier im falschen Topic ist bitte einfach verschieben danke

)

Gruß
silent12

erik s. · 11. September 2012

Wird denn der DIV-Layer eingeblendet mit deiner .animate()-Anweisung?

silent12 · 11. September 2012

Ja das funktioniert...

Ganz neue richtung jetzt von mir:
Kann man das auch anders mit Jquery lösen ?

Gruß
silent12

erik s. · 11. September 2012

Problem erkannt:
Die Variable bloginhalt ist der innersten Funktion, die das DIV befüllen soll, nicht bekannt, da sie lokal ist und der Funktion nicht übergeben wird.
Probier mal folgende Zeile stattdessen:

Javascript:

$myblockinput.parent().html(bloginhalt).animate({height: 500}, 800);

silent12 · 11. September 2012

Klappt leider auch noch nicht. Siehe hier: http://vu2048.web02.getvisible.de/neuaufbau/Mywebshare_website/
Wenn dir TS oder Skype oder so lieb ist wäre das evtl praktisch.

Hier nochmal der GANZE Code damit wir zu 100% am gleichen Code rumdenken:

index.php

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="robots" content="all" />


<meta name="keywords" content="Blog, Tim Pfeifle, CSS3, HTML5, Webdesign" />
<meta name="description" content="Tim Pfeifle - BLOG" />
<meta name="author" content="Tim Pfeifle" />

<title>MyWebshare</title>
<link rel="shortcut icon" href="images/logo.png" />

<!--INCLUDES-->
<link rel="stylesheet" type="text/css" href="css/main.css"/>


<!--alleBlogbeitraege-->

<?php
$bloganzahl = 0;
$showall = array();
$alleblogs = "";
include'../Admin/connect.php';
/*Auswahl aus einer Tabelle*/
$abfrage3 = mysql_query("SELECT * FROM Blog ORDER BY ID DESC");


/*Ausgabe der Auswahl und dabei in einem Array($row2) speichern*/
while ($row3 = mysql_fetch_array($abfrage3)) {
			
			$bloganzahl++;
			$showall[] = "<div class='blogbox' id='".$row3['id']."'>
								<div class='blogdate'>".$row3['date']."</div>
								<h2 class='blogheadline'>".$row3['title']."</h2>
								<div class='blogtext'>".$row3['previewtext']."</div>
								<div class='blogimage'>
									<img src='images/Blogimages/".$row3['blogimage']."' width='140px' height='140px' alt='blogimage' />
								</div>
								<div style='clear:both'></div>
								<input type='submit' class='submit' value='Read More'/>
						</div>";	
						
}

unset($showall[0]);
unset($showall[1]);
$alleblogs =  implode('', $showall); /*verbindet alle Array Werte -> Code für alle Blogeinträge in einer Variablen*/
$alleblogs = preg_replace("/\r|\n/s", "", $alleblogs);
$bloganzahl = ($bloganzahl*220)+600-440; /*anzahl der blogeinträge* länge eines blogeintrags + jetzige länge der contentbox - länge der obigen 2 blogeinträge*/

			mysql_close($connection);/*beendet Verbindung*/
			?>
<!--ENDE alleBlogbeitraege-->

</head>
<body>
<div id="maincontent">
	
	<img src="images/navibalken.png" id="navibalken" alt="asdf"/>
	<ul id="mainmenu">
	<a href="index.php"><li class="activemenu" style="border-top:3px solid white; color:white;">Home</li></a>
	<a href="files.php"><li class="notactivemenu" >Files</li></a>
	<a href=""><li class="notactivemenu" >About</li></a>
	</ul>
	
	<div style="clear:both;"></div>
	
	<div id="slider">
		<div id="sliderimage">
		</div>
		<div id="sliderpreviewmainbox">
			<div id="c1" class="activesliderbox asdf">
				<div class="onesliderpreviewboxtext">
					<br />
					<span class="onesliderpreviewboxheadline">
						Business Cards <br />
					</span>
					How to simple create an own business card.
				</div>
			</div>
			<div id="c2" class="notactivesliderbox asdf">
				<div class="onesliderpreviewboxtext">
					<br />
					<span class="onesliderpreviewboxheadline">
						CSS3: What's new ? <br />
					</span>
					Can I show you some nice tipps and tricks with CSS3 ?
				</div>
			</div>
			<div id="c3" class="notactivesliderbox asdf">
				<div class="onesliderpreviewboxtext">
					<br />
					<span class="onesliderpreviewboxheadline">
						HTML5: What's new ? <br />
					</span>
					Learn some nice features about the newest Version of HTML.
				</div>
			</div>
			<div id="c4" class="notactivesliderbox asdf">
				<div class="onesliderpreviewboximage">
				</div>
				<div class="onesliderpreviewboxtext">
					<br />
					<span class="onesliderpreviewboxheadline">
						PHP:Security <br />
					</span>
					How to make sure your PHP-Code is save.
				</div>
			</div>
		</div>
	</div>
	
	<div id="infobox">
		<div class="textmitabstand">
			<h2>News</h2>
			<div id="newsbox">
			<?php
			include'../Admin/connect.php';
			/*Auswahl aus einer Tabelle*/
			$abfrage = mysql_query("SELECT * FROM News ORDER BY ID DESC LIMIT 2");


			/*Ausgabe der Auswahl und dabei in einem Array($row) speichern*/
			while ($row = mysql_fetch_array($abfrage)) {
	

				echo "<a href=\" ".$row['link']." \" target=\"_blank\" class=\"newsheadline\">".$row['date']."</a> <br />";
				echo $row['newstext']."<br /> <br />";
			}


			mysql_close($connection);/*beendet Verbindung*/
			?>
			</div>
				
			<hr />
		
			<div id="aboutme">
				<a href="" class="newsheadline">Tim Pfeifle</a> <br />
				<img src="images/author.png"  alt="TimPfeifle" id="authorimage"/>
				<div id="authortext">
				Neben der Schulzeit arbeite 
				ich bei einzelnen Firmen mit,
				veröffentliche Web- layouts
				und bilde mich
				hauptsächlich in CSS,
				PHP, Javascript 
				und Serveradministration weiter. <br />
				Ich bin 15 Jahre alt und
				immer für neue Projekte und Aufgaben offen. 
					<a href="" id="emaillink"><img src="images/email.png" class="emailicon" alt="Kontaktemail" /></a>
					<div id="kontakttext"><a href="" style="color:white; text-decoration:none;">Kontakt</a></div>
					<div style="clear:both;"></div>
				</div>
			</div>
		</div>
	</div>
	
	
	<div id="contentbox">
	
		<div id="socialbar">
		<a href=""><img src="images/facebook-128.png" alt="facebook-128.png" /></a>
		<div style="clear:both;"></div>
		<a href=""><img src="images/twitter-128.png" alt="twitter-128.png" /></a>
		<div style="clear:both;"></div>
		<a href=""><img src="images/youtube-128.png" alt="youtube-128.png" /></a>
		</div>
		<div style="clear:both;"></div>
	
		<div id="contentboxtext">			
			<?php
			/*#############AUSGABE der 2 Blogeinträge der Preview#########*/
			include'../Admin/connect.php';
			/*Auswahl aus einer Tabelle*/
			$abfrage2 = mysql_query("SELECT * FROM Blog ORDER BY ID DESC LIMIT 2");


			/*Ausgabe der Auswahl und dabei in einem Array($row2) speichern*/
			while ($row2 = mysql_fetch_array($abfrage2)) {
	
			echo "<div class=\"blogbox\" id=\"".$row2['id']."\">
						<div class=\"blogdate\">".$row2['date']."</div>
						<h2 class=\"blogheadline\">".$row2['title']."</h2>
						<div class=\"blogtext\">".$row2['previewtext']."</div>
						<div class=\"blogimage\">
							<img src=\"images/Blogimages/".$row2['blogimage']."\" width=\"140px\" height=\140px\" alt=\"blogimage\" />
						</div>
						<div style=\"clear:both\"></div>
						<input type=\"submit\" class=\"submit\" value=\"Read More\"/>
				  </div>";
	
	
	
			}
			mysql_close($connection);/*beendet Verbindung*/
			?>
			
			
			<div id="beforeshowalllastblogbox"></div>
			<br />
			<span class="alleanzeigen"><center>Alle anzeigen</center></span>
		</div>
		
		<div id="footer">
			&copy; 2012 by Tim Pfeifle <br />
			All Rights Reserved, <a href="" class="footerlink">AGB</a> und <a href="impressum.php" class="footerlink">Impressum</a>
		</div>
	</div>
	
	<div style="clear:both;"></div>
	
	
</div>


<!--slider-->
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
<!--Ende slider-->	

<script type="text/javascript" src="js/menu.js"></script>





<!--showall-->
<script type="text/javascript">
$(document).ready(function(){
    // jQuery-Code
$('.alleanzeigen').click(
		function()
		{
			$('.alleanzeigen').css('visibility', 'hidden');
			var alleblogsnormal = <?php echo count($showall) ?>;
			var contentboxlength = $('.blogausgeklappt').length*520 + (alleblogsnormal - $('.blogausgeklappt').length)*220+690-80;
			$('#contentbox').animate({height: contentboxlength +"px"}, "800" ,function(){$("#beforeshowalllastblogbox").after("<?php echo $alleblogs ?>");});
			$('#contentbox').css('height', 'auto');
			
		}
);
});
</script>
<!--End showall-->

<!--showwholeblog-->
<script type="text/javascript">
$(document).ready(function(){
// jQuery-Code
$('.blogbox input').live('click',
function()
{
var $myblockinput = $(this);
if($myblockinput.parent('.blogausgeklappt').length > 0)
{
$('#contentbox').css('height', 'auto');
$myblockinput.attr('value', 'Read More');


var id2 = encodeURI($myblockinput.parent().attr('id'));
if(id2 == "")
{
alert("keine ID übermittelt");
}
else
{
$.ajax
({
type: "POST",
url: "js/ajax2.php",
data: "id2="+id2,
success: function(data2)
{
var blogpreview = data2;


$myblockinput.parent().animate({height: "220px"}, "800" ,function(){$(this).replaceWith(blogpreview);});

var idparent = $myblockinput.parent().attr('id');
$("#" + idparent + " .blogtext").removeClass('blogtextlong').addClass('blogtext');
$myblockinput.removeClass('submitlongblog').addClass('submit');
$myblockinput.parent().removeClass('blogausgeklappt');
}
});

}

}

else
{
$('#contentbox').css('height', 'auto');
$myblockinput.attr('value', 'Read Less');

var id = encodeURI($myblockinput.parent().attr('id'));
if(id == "")
{
alert("keine ID übermittelt");
}
else
{
$.ajax
({
type: "POST",
url: "js/ajax.php",
data: "id="+id,
success: function(data)
{
var bloginhalt = data;
$myblockinput.parent().html(bloginhalt).animate({height: 500}, 800);
 

var idparent = $myblockinput.parent().attr('id');
$("#" + idparent + " .blogtext").removeClass('blogtext').addClass('blogtextlong');
$myblockinput.removeClass('submit').addClass('submitlongblog');
$myblockinput.parent().addClass('blogausgeklappt');
 
} 
});


}
}
}
);
});
</script>
<!--END showwholeblog-->
</body>
</html>

ajax.php

Code:

<?php
/*empfängt id des auszugebenden beitrags*/
 
if(!empty($_POST['id']))
{
    $id = $_POST['id'];
 
    /*#############AUSGABE der 2 Blogeinträge der Preview#########*/
            include'../../Admin/connect.php';
            /*Auswahl aus einer Tabelle*/
            $abfrage4 = mysql_query("SELECT * FROM Blog WHERE ID = '$id'");
 
 
            /*Ausgabe der Auswahl und dabei in einem Array($row2) speichern*/
            while ($row4 = mysql_fetch_array($abfrage4)) {
    
            $inhalt =   "<div class='blogbox' id='".$row4['id']."'>
                                <div class='blogdate'>".$row4['date']."</div>
                                <h2 class='blogheadline'>".$row4['title']."</h2>
                                <div class='blogtext'>".$row4['blogtext']."</div>
                                <div class='blogimage'>
                                    <img src='images/Blogimages/".$row4['blogimage']."' width='140px' height='140px' alt='blogimage' />
                                </div>
                                <div style='clear:both'></div>
                                <input type='submit' class='submit' value='Read More'/>
                        </div>";
    
    
    
            }
            
            $inhalt = preg_replace("/\r|\n/s", "", $inhalt);
            mysql_close($connection);/*beendet Verbindung*/
            echo utf8_encode($inhalt); 
            
}
else
{
    $fehler = "keine id übermittelt";
    echo $fehler; 
}
?>

ajax2.php

Code:

<?php
/*empfängt id des auszugebenden beitrags*/

if(!empty($_POST['id2']))
{
	$id2 = $_POST['id2'];

	/*#############AUSGABE der 2 Blogeinträge der Preview#########*/
			include'../../Admin/connect.php';
			/*Auswahl aus einer Tabelle*/
			$abfrage4 = mysql_query("SELECT * FROM Blog WHERE ID = '$id2'");


			/*Ausgabe der Auswahl und dabei in einem Array($row2) speichern*/
			while ($row4 = mysql_fetch_array($abfrage4)) {
	
			$inhalt2 =   "<div class='blogbox' id='".$row4['id']."'>
								<div class='blogdate'>".$row4['date']."</div>
								<h2 class='blogheadline'>".$row4['title']."</h2>
								<div class='blogtext'>".$row4['previewtext']."</div>
								<div class='blogimage'>
									<img src='images/Blogimages/".$row4['blogimage']."' width='140px' height='140px' alt='blogimage' />
								</div>
								<div style='clear:both'></div>
								<input type='submit' class='submit' value='Read More'/>
						</div>";
	
	
	
			}
			
			$inhalt2 = preg_replace("/\r|\n/s", "", $inhalt2);
			mysql_close($connection);/*beendet Verbindung*/
			echo utf8_encode($inhalt2); 
			
}
else
{
	$fehler = "keine id übermittelt";
	echo $fehler; 
}
?>

silent12 · 11. September 2012

Ok hab jetzt den ganzen Code umgestellt und jetzt klappts *.* wenns interessiert einfach am besten eine mail an pfeifletim@gmail.com sonst seh ichs nich

Danke an alle.

Gruß
silent12

erik s. · 12. September 2012

Kannst du nicht die Lösung deines Problems hier posten? Du musst ja nicht den kompletten Quelltext kopieren, aber der relevante Teil ist sicher für einige andere Forenbesucher interessant.

Gruß

✔ Ausklappbox:Neuen Inhalt aus Datenbank lesen

silent12

Mitglied

erik s.

Erfahrenes Mitglied

silent12

Mitglied

erik s.

Erfahrenes Mitglied

silent12

Mitglied

silent12

Mitglied

erik s.

Erfahrenes Mitglied

Neue Beiträge