een mysql query reloaden met jquery

Alleen dan nog even, hoe ziet de HTML van die dynamische divs eruit. Dus wat is de HTML die je php pagina genereert die je met je AJAX call aanroept.

Dus gewoon wat in de foreach loop staat?

[size=xsmall]Toevoeging op 08/01/2012 14:08:42:[/size]

<?php

echo "

<div class=\"reactiondiv_by_comment\" id=\"id_of_reactiondiv_by_comment\">
<div class=\"reaction_name_time\"><p><span class=\"reactions_name\">$name_reaction</span><span class=\"reactions_time\">$count $suffix ago</span></p></div>
<div class=\"reaction_message\"><p>$message_reaction</p></div>
</div>
";

?>

En dat is ook wat je krijgt als je je php pagina in een browser aanroept. Er komt niets anders bij (html of body tags oid)?

sorry maar wat bedoel je? dit komt er uit de php pagina wat via jquery wordt ingevoegd:




<h5 style="padding: 8px 5px 8px 10px;">Comments</h5>

<div class="reactiondiv_by_comment" id="id_of_reactiondiv_by_comment">
<div class="reaction_name_time"><p><span class="reactions_name">sdfsdfdsfdsfdsfsdfsdfsdfsdfdsf</span><span class="reactions_time">1 day ago</span></p></div>
<div class="reaction_message"><p>fdfdsfdsfdfffffffffffffffsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdf</p></div>
</div>


<div class="reactiondiv_by_comment" id="id_of_reactiondiv_by_comment">
<div class="reaction_name_time"><p><span class="reactions_name">gfdgdfg</span><span class="reactions_time">1 day ago</span></p></div>
<div class="reaction_message"><p>test</p></div>
</div>


<div class="reactiondiv_by_comment" id="id_of_reactiondiv_by_comment">
<div class="reaction_name_time"><p><span class="reactions_name">hgfhfghfghfg</span><span class="reactions_time">1 day ago</span></p></div>
<div class="reaction_message"><p>hfghgfhsdfsdfdsfdsfdsfsdfsdf</p></div>
</div>


<div class="reactiondiv_by_comment" id="id_of_reactiondiv_by_comment">
<div class="reaction_name_time"><p><span class="reactions_name">hfghfghfghfgh</span><span class="reactions_time">1 day ago</span></p></div>
<div class="reaction_message"><p>fghfghfghsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdf</p></div>
</div>


<div class="reactiondiv_by_comment" id="id_of_reactiondiv_by_comment">
<div class="reaction_name_time"><p><span class="reactions_name">trythgfhgfh</span><span class="reactions_time">1 day ago</span></p></div>
<div class="reaction_message"><p>sdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdf</p></div>
</div>


<div class="reactiondiv_by_comment" id="id_of_reactiondiv_by_comment">
<div class="reaction_name_time"><p><span class="reactions_name">tertretertreertrt</span><span class="reactions_time">1 day ago</span></p></div>
<div class="reaction_message"><p>sdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdf</p></div>
</div>


<div class="reactiondiv_by_comment" id="id_of_reactiondiv_by_comment">
<div class="reaction_name_time"><p><span class="reactions_name">rtretretertrtr</span><span class="reactions_time">1 day ago</span></p></div>
<div class="reaction_message"><p>sdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdf</p></div>
</div>


<div class="reactiondiv_by_comment" id="id_of_reactiondiv_by_comment">
<div class="reaction_name_time"><p><span class="reactions_name">fdgfdgdgfdgdfg</span><span class="reactions_time">1 day ago</span></p></div>
<div class="reaction_message"><p>sdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdf</p></div>
</div>


<div class="reactiondiv_by_comment" id="id_of_reactiondiv_by_comment">
<div class="reaction_name_time"><p><span class="reactions_name">gdrgdfgfdgf</span><span class="reactions_time">1 day ago</span></p></div>
<div class="reaction_message"><p>sdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdf</p></div>
</div>


<div class="reactiondiv_by_comment" id="id_of_reactiondiv_by_comment">
<div class="reaction_name_time"><p><span class="reactions_name">fsdfsf</span><span class="reactions_time">1 day ago</span></p></div>
<div class="reaction_message"><p>sdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdf</p></div>
</div>


<div class="reactiondiv_by_comment" id="id_of_reactiondiv_by_comment">
<div class="reaction_name_time"><p><span class="reactions_name">dfsfs</span><span class="reactions_time">1 day ago</span></p></div>
<div class="reaction_message"><p>sdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdfsdfsdfdsfdsfdsfsdfsdf</p></div>
</div>

Dit bedoel ik inderdaad. Dit is namelijk de totale HTML die je in de pagina invoegt na de AJAX call. Op zich valt het me op dat er nog een h5 tag bij staat. Die lijkt me op zich standaard, dus die zou je niet elke keer mee hoeven te sturen, maar als in je pagina kunnen hebben of de javascript kunnen laten maken. Daar zit waarschijnlijk de fout niet overigens.

Volgende vraag van mijn kant zou zijn hoe de CSS eruit ziet voor deze divs. Opmaak is over het algemeen CSS, dus als je tekst doorloopt zit er wellicht mis in je CSS of in de classes die je gebruikt voor de divs. Heb je daar al naar gekeken?

ja ik heb daar al naar gekeken (het eerste wat ik deed ;-)) ik post het wel even:

[size=xsmall]Toevoeging op 08/01/2012 14:27:19:[/size]

.reactiondiv_by_comment {
	min-height: 25px;
	padding: 7px 121px 7px 10px;
	margin: 0px 0px 0px 0px;
	border: 1px solid #1D1D1B;
}

.reactions_name {
	font-size: 16px;
	font-weight: normal;
	color: #CE44B5;
	padding: 0px 10px 0px 0px;
}


.reactions_time {
	font-size: 12px;
	color: #787878;
}

.reaction_message {
	font-size: 13px;
	color: #E8E8E8;
	padding: 5px 0px 0px 5px;

}

Als ik in je code kijk zie ik deze structuur:

  <div id="maincontainter">
    <div style="clear:both;" id="content">
      <div id="left">
        <div class="comments_of_music_by_id" id="id_of_comments_of_music_by_id">
        </div>
      </div> <!-- end of left -->
    </div> <!-- end of content -->
  </div> <!-- end of maincontainer -->

De dynamische HTML komt terecht in "id_of_comments_of_music_by_id".
In de CSS die je boven geeft zie ik geen enkele style rule die iets zegt over de breedte of overflow van de nieuwe divs die je genereert. Ik krijg dus het idee dat het in een van de parent elementen moet zitten. Wat is de CSS voor die divs?
Heb je overigens Firefox met Firebug? Daarin kan je namelijk heel snel zien welke CSS rules gelden voor een willekeurig element op de pagina, ook dynamische elementen.

ja ik heb firebug en gebruik ik ook erg vaak! ik heb dus left waar zegmaar alle content in staat dus ook het dynamische gedeelte een width gegeven. En wat ik al had gedaan was de code droog zonder php er in zetten en dan werkt het wel! ook heb ik al geprobeerd met wat width's maar heb het maar weer terug gezet. Want wat ik eerst deed was gewoon de css en html creeën en daarna pas php en jquery. maar hier de css:

#left {
	width: 525px;
	min-height: 600px;
	border: 0px solid #4F4F4F;
	clear:left;
}

firebug... Chrome Developer Tools (of eigenlijk Webkit WebInspector) is stukken beter! (en in een veel beter browser)

Dat hij gewoon door gaat komt omdat het 1 woord is. Als je een zin erin stopt breekt hij wel de regel af en gaat eronder verder. Dus als je allemaal tekens achter elkaar hebt breekt hij hem niet af.

Hoe kun je dit oplossen? Gebruik:

.reaction_message
{
  word-wrap: break-word;
}

Dit breekt je woorden ook, dit is CSS3 maar werkt in alle browsers zelfs IE5.5+.

hmmm, ik begin uit ideeen te geraken... Als het niet in je HTML zit en niet in de CSS dan kan ik me alleen nog bedenken dat je ergens iets in javascript moet hebben dat die breedte zet als de pagina wordt geladen, maar niet later. Alleen dat lijkt me echt heel erg ver gezocht....

Ik vrees dat ik je dan niet verder meer kan helpen :-(