Just nu i M3-nätverket
Gå till innehåll
Castor_Fiber

DIV lägger sig på fel ställe

Rekommendera Poster

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?

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser
Postad (redigerade)

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

Redigerad av Cluster
Moderator har lagt till KOD-taggar

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

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.

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser
Postad (redigerade)

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?

Redigerad av Castor_Fiber

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

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.

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

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...

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

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;
}

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser
Postad (redigerade)

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?

Redigerad av Jonas__B

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

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! ;)

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

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....

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

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>

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

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>

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser
Postad (redigerade)
$("#divven")
 .hide()
 .load("url.php?id=123", 
   function(){ 
     $(this).fadeIn(500);
    }
 );

Redigerad av Jonas__B

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser
Postad (redigerade)

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?

Redigerad av Castor_Fiber

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

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.

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

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.... ;)

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

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?

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Skapa ett konto eller logga in för att kommentera

Du måste vara medlem för att kunna kommentera

Skapa ett konto

Skapa ett nytt konto på vårt forum. Det är lätt!

Registrera ett nytt konto

Logga in

Redan medlem? Logga in här.

Logga in nu



×
×
  • Skapa nytt...