webForumDet fria alternativet

Radio buttons återställs när data läggs till med AJAX

JavaScript

6 svar · 663 visningar · startad av prplxr

Medlem sedan juni 2012581 inlägg
Frågan#1

Hej!

Har stött på ett problem som jag inte riktigt kan få ordning på.

Ska lägga upp förslag på sökord baserat på en söksträng och sedan ska man kunna göra tre olika val för varje ord mha radio buttons.

När listan laddas in har redan radio buttonsen ett värde som hämtar från databasen tillsammans med ordet i sig. När man scrollar mot slutet av sidan laddas nya rader in. När detta sker så nollställs alla radio buttons man ändrat på. Varför!?

Har denna AJAX kod:

var ind = 1;

function loadXMLDoc(filename) {

	var xmlhttp;
	if (window.XMLHttpRequest) {
		xmlhttp=new XMLHttpRequest();
	} else {
			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	
	xmlhttp.onreadystatechange=function() {
		if (xmlhttp.readyState==4 && xmlhttp.status==200) {
				document.getElementById("ajaxout").innerHTML=document.getElementById("ajaxout").innerHTML+xmlhttp.responseText;
		}
	}
	
	xmlhttp.open("GET", filename + "?index=" + ind + "&word=<?php echo $word; ?>", true);
	ind++;
	xmlhttp.send();
	
}

function pollScrollPosition() {
	var y = (document.all) ? document.body.scrollTop : window.pageYOffset;
	var max = window.scrollMaxY || (document.body.scrollHeight - document.body.clientHeight);

	if ((max - y) < 50) {
		loadXMLDoc('add_words_more.php');
	}
}

// Check the scroll position every 250ms
setInterval(pollScrollPosition, 250);

...och detta för att outputa orden i sig:

<?php

$sql = "SELECT DISTINCT Sokord AS so FROM utbildning_sokord WHERE Sokord LIKE '%" . $word . "%' UNION SELECT DISTINCT DoldSokord AS so FROM utbildning_sokord WHERE DoldSokord LIKE '%" . $word . "%' LIMIT 0, 10";

$mysql_result = mysql_query($sql);

while($row = mysql_fetch_array($mysql_result)) {
	
	$sokord = $row['so'];
	
	$status = 'ejmed';
	
	$sql2 = "SELECT Sokord FROM utbildning_sokord WHERE Sokord = '" . $sokord . "' AND Id_Skola = '" . $skolid . "'";
	$mysql_result_2 = mysql_query($sql2);
	while($row2 = mysql_fetch_array($mysql_result_2)) {
		if($row2['Sokord'] == $sokord) {
			$status = 'synlig';
		}
	}
	
	$sql3 = "SELECT DoldSokord FROM utbildning_sokord WHERE DoldSokord = '" . $sokord . "' AND Id_Skola = '" . $skolid . "'";
	$mysql_result_3 = mysql_query($sql3);
	while($row3 = mysql_fetch_array($mysql_result_3)) {
		if($row3['DoldSokord'] == $sokord) {
			$status = 'dold';
		}
	}
	
	if($sokord != '') {
			
			$i = $i == 0 ? '1' : '0';
			
			$rnd = mt_rand(10000, 99999);
										
			?>
			
			<table cellpadding="4" cellspacing="0" style="font-size: 12px;">
				
				<tr style="<?php // background-color: #<?php echo $i == 0 ? 'eee' : 'fff' ?>;">
					
					<td width="25" style=" border-bottom: 1px solid #ccc;"><input type="radio" id="<?php echo mt_rand() ?>" name="<?php echo $rnd; ?>_<?php echo $sokord ?>" value="ejmed" <?php echo $status == 'ejmed' ? 'checked="checked"' : ''; ?> /></td>
					<td width="25" style=" border-bottom: 1px solid #ccc;"><input type="radio" id="<?php echo mt_rand() ?>" name="<?php echo $rnd; ?>_<?php echo $sokord ?>" value="dold" <?php echo $status == 'dold' ? 'checked="checked"' : ''; ?> /></td>
					<td width="25" style=" border-bottom: 1px solid #ccc;"><input type="radio" id="<?php echo mt_rand() ?>" name="<?php echo $rnd; ?>_<?php echo $sokord ?>" value="synlig" <?php echo $status == 'synlig' ? 'checked="checked"' : ''; ?> /></td>
					<td width="325" style="padding-left: 15px; border-bottom: 1px solid #ccc;"><?php echo $sokord;?></td>
					
				</tr>
				
			</table>
				
			<?php
		
	}
	
}

?>

(Så ser även add_words_more.php ut)

Några förslag?

Medlem sedan juni 20019 519 inlägg
#2

en idé är kanske ha en tomt element som du lägger in xmlhttp.responseText värdet istället för att ta document.getElementById("ajaxout").innerHTML varje gång? vilken webbläsare är det du kör mot? vad är $status när ajax anropet körs?

Medlem sedan juni 2012581 inlägg
#3

Tack för snabbt svar!

document.getElementById("ajaxout") är en tom <div>.
Webbläsare jag testat i är Opera, Chrome och IE8.
$status har antingen "ejmed", "dold" eller "synlig" som värde och motsvarande radio button kommer således att bli "checked". Men varför måste detta ske varje gång jag kör XMLHttpRequest.open()? För jag antar att det är då <form>en resetas?

--[EDIT]------

Jag insåg nu att problemet bara uppstår i den div'en. Har du något förslag på hur detta kan lösas?

Medlem sedan juni 20019 519 inlägg
#4

Det är inget formulär som kör en reset, du ha en sträng som du sätter in i din div#ajaxout, men din kod kommer ge fler och fler radio knappar om och om igen, vilket känns inte riktigt det du vill? Din kod kommer köras varje 250ms, om ditt AJAX anrop tar mer än 250 ms att köra (vilket den kan göra) så kommer du få problem där...

$word i din fil med SQL frågorna... var sätter du den variablen?

ändra din readystate:

	xmlhttp.onreadystatechange=function() {
		if (xmlhttp.readyState==4 && xmlhttp.status==200) {
			var newdiv = document.createElement('div');
			newdiv.innerHTML = xmlhttp.responseText;
			document.getElementById("ajaxout").appendChild(newdiv);
		}
	}

så lägger du in en ny div per ajax anrop istället för att skriva över html blocket, så kommer det fungera bättre.

Medlem sedan juni 2012581 inlägg
#5

$word är @$_POST['word'], men faktum är att jag löst problemet nu. Du gav mig den knuff i rätt riktning jag behövde.

Denna kod använder jag nu:

var ind = 1;

function loadXMLDoc(filename) {

	var xmlhttp;
	if (window.XMLHttpRequest) {
		xmlhttp=new XMLHttpRequest();
	} else {
			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	
	xmlhttp.onreadystatechange=function() {
		if (xmlhttp.readyState==4 && xmlhttp.status==200) {
			
			var ajaxdiv = document.getElementById('ajaxout');
			var newdiv = document.createElement('div');
			newdiv.setAttribute('id', 'div_' + Math.random());
			newdiv.innerHTML = xmlhttp.responseText;
			ajaxdiv.appendChild(newdiv);
			
		}
	}
	
	xmlhttp.open("GET", filename + "?index=" + ind + "&word=<?php echo $word; ?>", true);
	ind++;
	xmlhttp.send();
	
}

function pollScrollPosition() {
	var y = (document.all) ? document.body.scrollTop : window.pageYOffset;
	var max = window.scrollMaxY || (document.body.scrollHeight - document.body.clientHeight);

	if ((max - y) < 50) {
		loadXMLDoc('add_words_more.php');
	}
}

setInterval(pollScrollPosition, 250);

Du säger att om anropet skulle ta längre än 1/4 sekund får jag problem, vad skulle då hända?

Medlem sedan juni 20019 519 inlägg
#6

du behöver inte sätta id på elementet...

Medlem sedan juni 2012581 inlägg
#7

Eftersom du nämner det så antar jag att det har negativa konsekvenser så jag har nu tagit bort den raden. :-)

297 ms totalt · 4 externa anrop · v20260731065814-full.6fe65c25
167 ms — deklarationer (db)
0 ms — hämta statistik (cache)
128 ms — hämta tråd, inlägg och bilagor (db)
165 ms — ändringar (db)