Kirjautuminen

Haku

Tehtävät

Keskustelu: Nettisivujen teko: Ajax ja useita päivitettäviä kohtia samalla sivulla

Sivun loppuun

jakestyles [29.01.2012 19:57:20]

#

Päiviä.

Siirryin käyttämään ajaxia päivittäessäni nettisivulla elementtejä ilman uudelleenlatausta.

Nyt ongelmana on tämä: Miten saan kaksi kohtaa päivittymään erillisesti eli tässä tapauksessa "Get Server Time" painike ja "class" select-valikko? Kumpikin päivittää omaa id-kohtaa.

Olen olettanut että homma toimii näin:

  1. luodaan molemmille "painikkeille" oma funktio (getServerTime ja getClassName)
  2. kumpikin funktio kutsuu omaa useHttpResponsea

Nyt klikkaamalla kumpaa tahansa "painiketta" kaikki id alkavat päivittymään.

Onko perusajatuskin väärä, pitäisi kaikki hoitaa yhdelle useHttpResponsella?

Koodit

function getServerTime() {
	var myurl = 'telltimeXML.php';
	myRand = parseInt(Math.random()*999999999999999);
	var modurl = myurl+"?name="+ document.form1.name.value + "&rand="+myRand;
	http.open("GET", modurl, true);
	http.onreadystatechange = useHttpResponse;
	http.send(null);
}
function useHttpResponse() {
	if (http.readyState == 4) {
		if(http.status == 200) {
			var timeValue = http.responseXML.getElementsByTagName("timenow")[0];
			var nameValue = http.responseXML.getElementsByTagName("namenow")[0];
			document.getElementById('showtime').innerHTML = timeValue.childNodes[0].nodeValue;
			document.getElementById('showname').innerHTML = nameValue.childNodes[0].nodeValue;
		}
	} else {
		document.getElementById('showtime').innerHTML = '<img src="anim.gif">';
		document.getElementById('showname').innerHTML = 'Coming...';
	}
}

function getClassName() {
	var myurl = 'tellnameXML.php';
	myRand = parseInt(Math.random()*999999999999999);
	var modurl = myurl+"?class="+ document.form1.class.value + "&rand="+myRand;
	http.open("GET", modurl, true);
	http.onreadystatechange = useHttpResponse2;
	http.send(null);
}

function useHttpResponse2() {
	if (http.readyState == 4) {
		if(http.status == 200) {
			var className = http.responseXML.getElementsByTagName("class")[0];
			document.getElementById('classname').innerHTML = className.childNodes[0].nodeValue;
		}
	} else {
		document.getElementById('classname').innerHTML = '<img src="anim.gif">';
	}
}
<body style="background-color:#cccccc;">
<h1>Ajax Demonstration</h1>
<h2>Hae luokan nimi</h2>
<form name="form1">
<input type="button" value="Get Server Time" onClick="getServerTime();" />
<input type="text" size="10" name="name">
<h1 class='FormTitle'>Opiskelijan tiedot
<select name="class" size="1" onChange="getClassName();">
  <option value="">Valitse luokka</option>
  <option value='MESSA08'>MESSA08</option>
  <option value='MESSA09'>MESSA09</option>
  <option value='MESSA10'>MESSA10</option>
</select>
</form>
<div id="showtime" class="displaybox"></div>
<div id="showname" class="displaybox"></div>
<div id="classname" class="displaybox"></div>
</body>
</html>

Lebe80 [29.01.2012 20:00:15]

#

Mä lataisisin heti ekana jQueryn jottei tarvis kuin keskittyä tekemään just sitä mitä tarvii, ja muu jättää pohtiminen muille.

jakestyles [29.01.2012 20:11:05]

#

No olisiko simppeliä esimerkkiä miten käyttäisin jQueryä tähän? Ikinä lukenut siitä.

Macro [29.01.2012 20:43:47]

#

jQueryn oma sivu sisältää monta esimerkkiä.

jakestyles [29.01.2012 21:37:32]

#

Noni, jQueryn avulla ratkaisin suunnilleen kaikki muut ongelmat paitsi sen miten näytetään animoitu gif sillä aikaa kun ajax hakee tietoja?

Tällä hetkellä käytän

$("#indicator").bind("ajaxStart", function(){
  $(this).show();
});

$("#indicator").bind("ajaxComplete", function(){
  $(this).hide();
});

mutta ongelmana on se että gif pyörii aina kun ajaxia kutsutaan eikä silloin kun funktiota käytetään.

Lebe80 [29.01.2012 22:47:59]

#

No laitat sen pyörintä-giffin luonnollisesti näkymään sinne funktioosi...

Macro [30.01.2012 16:28:29]

#

Mulla on tämmönen eräässä projektissa. Koita soveltaa.

$(document).ready(function() {
    $("#haku").submit(function() {
	if(tarkista()) {

	    var d1 = $("#d1").val();
	    var d2 = $("#d2").val();

	    $("#oikea").html("<img src=\"ajax-loader.gif\">");
	    $.ajax({
		type: "GET",
		url: "haku.php",
		data: "d1=" + d1 +"&d2=" + d2,
		success: function(data){
		    $("#oikea").html(data);
		}
	    });

	    return false;
	} else
	    return false;
    });
});

jakestyles [30.01.2012 20:05:08]

#

Kiitosta. Tuon perusteella arvelin että tämä toimisi:

function sendValue(str){
  $("#indicator").html("<img src=\"anim2.gif\">");
  $.post("ajax.php",{ sendValue: str },
  function(data){
    $('#displayClass').html(data.returnValue);
    $("#indicator").html("");
  }, "json");
}

ja niinhän se teki. Oikeastaan simppeli ratkaisu. Sanokaa onko oikeaoppinen.

makumaku [30.01.2012 21:01:31]

#

Eiköhän tuo ihan oikein ole (varsinkin jos toimii ;)
Tuossa, sekä myös Macron koodissa, animaation piilotus on tehty success callbackissä. En tiedä olisiko sitten oikeaoppisempi ratkaisu piilottaa tuo animaatio complete-callbackissä (eli sekä fail/success).
Ja periaatteessahan myös animaation näytön voisi heittää myös beforeSend-callbackiin, niin olisi kaikki ajax-rutiinin sisällä.

Sitten jos sivulla on paljon latauksia, jotka kaikki haluavat käyttää samaa animaatiota, niin helpompi ratkaisu voisi olla esim:

$('#indicator').ajaxStart(function() {
    $(this).show();
}).ajaxComplete(function() {
    $(this).hide();
});

Ja en mene takuuseen että nuo toimii, kun en ole kokeillut :)

jakestyles [07.02.2012 21:00:27]

#

Päiviä.
Tilanne on kehittynyt siihen malliin, että ensimmäinen päivitys onnistuu hyvin mutta toinen ei.

Eli onko yleensä mahdollista tehdä id:n sisälle ensin yksi select, jonka päivittää seuraavaan jne.

Ensimmäinen select olisi luokka ja toinen oppilas eli ensin valitaan luokka jonka perusteella valitaan luokan oppilas jonka perusteella etsitään oppilaan tiedot.

Homma toimii kun luon molemmille omat id:t mutta haluaisin että vain yhtä kohtaa nettisivua päivitetään.


index.html

<div id="className">
  <select name='class' id='class'><option value=''>Valitse luokka</option>";
    <option value='1'>luokka1</option>
  </select>
</div>

functions.js

$(document).ready(function(){
  $('#class').change(function(){
    sendClass($(this).val());
  });
  $('#student').change(function(){
    sendStudent($(this).val());
  });
});

function sendClass(str){
  $.post("ajax.php",{ sendClass: str },
  function(data){
    $('#className').html(data.returnValue);
  }, "json");
}

function sendStudent(str){
  $.post("ajax.php",{ sendStudent: str },
  function(data){
    $('#studentName').html(data.returnValue);
  }, "json");      			}

ajax.php

<?php
if (isset($_POST['sendClass'])){
  $value = "<select name='student' id='student'><option value=''>Valitse oppilas</option>";
  $value .= "<option value='1'>oppilas1</option>";
} else {
  $value = "";
}

if (isset($_POST['sendStudent'])) {
  $value = "<h1>Oppilas valittu</h1>";
}

echo json_encode(array("returnValue"=>$value));
?>

Sivun alkuun

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Tietoa sivustosta