Just nu i M3-nätverket
Jump to content

DIV lägger sig på fel ställe


Castor_Fiber

Recommended Posts

Castor_Fiber

Har ett smärre problem, som jag absolut inte förstår mig på..

 

När jag hämtar ut en sida via ajax så lägger sig innehållet på ett helt annat ställe än vad DIVen ligger...

 

<div id="delete"></div>

 

Innehållet lägger sig på stället där de andra ajax-div;sen ligger, och inte "längre ned"...

 

Om jag lägger nåt i DIVen direkt innan ajax-hämtningen så ligger det på rätt ställe men när jag hämtar ut datan hamnar det fel...

 

Hur funkar det egentligen, inte hört något om detta.. Någon som förstår sig på detta?

Link to comment
Share on other sites

Castor_Fiber

Nej, självklart inte... Ser ut såhär...

 

<div id="add_food"></div>

 

<div id="edit_food"></div>

 

<div id="delete_food"></div>

 

 

Men lägger jag tex den sista, #delete_food så lägger den sig trots allt på samma ställer som dom andra två...

 

Koden i delete_food.js ser ut såhär:

var xmlhttp;

function delete_food(str)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}
var url="includes/pages/delete_food.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}

function stateChanged()
{
if (xmlhttp.readyState==4)
{
document.getElementById("delete_food").innerHTML=xmlhttp.responseText;
}
}

function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}

 

Samma kod används till dom andra, fast IDn o namn på funktioner o sånt är självklart ändrat, så det SKA ju inte påverka.. Eller? :S

Link to comment
Share on other sites

Ja det ser ju onekligen rätt ut, men är det inte cssen som spökar då?

 

Om du använder FireBug (tillägg till Firefox, eller motsvarande tillägg till andra webbläsare) kan du se vad som händer vid/efter javascripthändelser.

Link to comment
Share on other sites

Castor_Fiber

Nja, även om jag stylar DIV.arna så blir det inte rätt, för nu är dom helt "orörda" så att säga...

 

 

Men hur funkar det med tex ankare på sidan och ajax...

 

Som exempel;

 

<a href="#" onclick="edit_food(1);return false;">

 

Det funkar ju inte med <a href="#top_of_page" onclick="edit_food(1);return false;">

 

<a name="top_of_page">.....

 

Kan man få detta o fungera på något sätt?

Link to comment
Share on other sites

Hmm, nu känns det som du varit otydlig med vad som varit fel; jag förstod det som att din div flyttade på sig efter man fyllt i innehållet, men det är alltså att man skall gå vidare till ankarlänken efter att innehållet fyllts i?!

 

Ta då bort "return false" i onclick, då du vill att den skall gå vidare till ankarlänken - "return false" tar bort den händelsen helt enkelt.

Link to comment
Share on other sites

Castor_Fiber

Oj, ne, förlåt! Det sista var bara en vidareutveckling som hjälper mig på det viset att jag förflyttar besökaren till rätt stället eftersom jag inte lyckas få DIVen att placera sig så som den ska...

Link to comment
Share on other sites

Castor_Fiber

Men har nu märkt att ALLA Ajax-divar rättar sig efter funktionen "add_food".... Kan du hitta något som kan påverka i detta då?

 

var xmlhttp;

function add_food(str)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
 {
 alert ("Browser does not support HTTP Request");
 return;
 }
var url="includes/pages/add_food.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}

function stateChanged()
{
if (xmlhttp.readyState==4)
{
document.getElementById("add_food").innerHTML=xmlhttp.responseText;
}
}

function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
 {
 // code for IE7+, Firefox, Chrome, Opera, Safari
 return new XMLHttpRequest();
 }
if (window.ActiveXObject)
 {
 // code for IE6, IE5
 return new ActiveXObject("Microsoft.XMLHTTP");
 }
return null;
}

Link to comment
Share on other sites

det är inget i din kod som kan göra att en div skall flytta på sig, så det borde vara din css. Kan du visa sidan hur den ser ut publicerad?

 

Du borde effektivisera dina funktioner; kör gärna ett js-bibliotek för ajax istället.

Har du inte dubletter av statechanged, till exempel?

Link to comment
Share on other sites

Castor_Fiber

Kan det vara så att det är funktionen StateChanged som stör allting, att alla lägger sig på samma ställe tror du?

 

Jo, jag har med "hört" det.. Men vet inte hur det funkar i praktiken, hur menar du med ett js.bibliotek o så?

 

Tack för hjälpen än så länge! ;)

Link to comment
Share on other sites

  • 4 weeks later...
Castor_Fiber

kolla in jquery

 

 

Med tanke på att du pekade på jQuery... Har tagit mig tid och försökt sätta mig in i djungeln, även om det verkar enkelt när man väl kommer in i det... så kanske DU vet något om det också.. ;) Har på en kort stund lyckats göra en liten kod, se: jQuery.get. Där jag hämtar ett externt dokument för att ersätta min tidigare kod som jag skrev innan, och lyckas faktiskt riktigt bra, eller ja, det funkar! ;)

 

Men en liten viktig detalj, hur hämtar jag ut värdet från variabeln "id" när jag försöker hämta datan... Se koden nedan;

 

<span class="data">

 	Get data

 	</p>

<script>

 	$("span.data").click(function () {

 		$.get("test.php", { id: "1" },

  		function(data){

		$("#view").html(data);

		});
 	});

 	</script>

<div id="view"></div>

 

 

Med andra ord; jag vill ha ut värdet, i detta fall "1" på sidan test.php för att hämta ut rätt rad från databasen.. (....WHERE id = 1 ....) så att säga....

Link to comment
Share on other sites

det har då med php att göra så det hör eg inte hemma i denna tråd.

 

Men som svar på din fråga

<?php
//test.php

var $id = $_GET["id"];
//nu har du id-värdet du skickade i varabeln $id

?>

 

Sedan tycker jag inte att test.php är ett bra namn på en fil, så jag hoppas du ändrar det sedan.

 

Tips är att ändra jQueryn lite också:

<script>
     $().ready(function(){  
       $("span.data").click(function () {
          $("#view").load("test.php", { id: "1" });
       });
     });  
</script>

Link to comment
Share on other sites

Castor_Fiber

Sååå.. poäng till dig, suttit med jQuery som en liten galning de senaste dagarna, gillar det jag sett hittils, sjukt trevligt!

 

Meeen, som alltid.. :)

 

Försöker få in en "effekt" , tex fadeIn eller vad som när jag hämtar data genom "load", en kod ser ut såhär.. Har försökt få in en effekt på alla sätt o vis, men vill inte fungera, den hämtar datan och så men effekten funkar inte... Har du något humm om detta?

 

<script>
 	$("#Edit_Profile_Text_Trigger").click(function () {
 		$("#Edit_Profile_Text").load("includes/pages/edit_profile_text.php?id=<?php echo $data_session["id"];?>");
 	});
 	</script>

Link to comment
Share on other sites

Castor_Fiber

Okey, har kommit så här långt... Allt funkar ju perfekt, använder slide-effekten istället för att inte få det där "hacket" i sidan som det blir med fadeOut... men iaf.....

 

<div class="ContentGrey" id="Edit_Profile_Text">

   <span id="Edit_Profile_Text_Trigger"></span>

   </div>

   <?php if($data_session["id"] == $member_id) { ?>

 	<script>
 	$("#Edit_Profile_Text_Trigger").click(function () {
 		$("#Edit_Profile_Text")
 			.slideUp(500)
 			.load("includes/pages/edit_profile_text.php?id=<?php echo $data_session["id"];?>", 
   			function(){ 
     				$(this).slideDown(500);
    			}
 			);
 	});
 	</script>

 

Det jag undrar nu är väl egentligen hur det enlaste vägen till att återstället divven till den ursprungliga texten, tex... Behöver man en helt ny funktion då, eller kan man "bygga" in en i den befintliga?

 

 

 

---------edit---------

En tanke till jag hade... MÅSTE man använda tex, "hide" eller annat för att "ta bort det ursprungliga innehållet genom effekt".. Eller kan man på något sätt låta divven direkt "tona" till det nya innehållet?

Link to comment
Share on other sites

om du skall kunna återställa rekommenderar jag att du kan göra en callback på det innehållet som det är i original, eller att det finns i en variabel ( i js)

Nej du kan inte tona mellan om du använder samma div till olika textinnehåll utan du måste då trixa med flera, men det orkar jag inte supporta så du får testa fram själv.

Link to comment
Share on other sites

Castor_Fiber

Okey på det viset... Nej, det förstår jag, ber jag inte dig om! ;) Hehe..

 

Men kanske du orkar dra en vits om "callback" - Verkar väääldigt intressant.... ;)

Link to comment
Share on other sites

Castor_Fiber

Alltså, en ajaxrequest där orginaltexten hämtas, precis som du hämtar den nya infon.

 

Aha, men då måste originaltexten ligga i tex en div med unikt id va?

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.



×
×
  • Create New...