Prototype Ajax funció meghívás diszkrét JS-sel

monghuz · 2006. Már. 26. (V), 18.10

Hali!

Ahogy kezdek előre jutni a témában úgy exponenciálissan nő az ismeretlen dolgok száma, és sajna nem mindre találok választ a tutorialokban... :(

A Prototype Ajax.Update függvényét szeretném meghívni a bejelentkező formomnál, úgy hogy a form nev és pass mező értékét átadom a login.php filenak.

A Prototype manualban ennek a példa alapján indúltam el:

var url = 'valami.php';
var pars = 'foo=bar';
var target = 'div-class';
var myAjax = new Ajax.Updater(target, url, {method: 'post', parameters: pars});


var url = 'valami.php';
var pars = 'foo=bar';
var target = 'div-class';
var myAjax = new Ajax.Updater(target, url, {method: 'post', parameters: pars});

Illetve a diszkrét javascript cikk alapján próbálkozom.

Eddig jutottam:

/* --- diszkrét javascript --- */
function getElementsByClass(name) {
var found = 0;
var elems = new Array();
var alltags = document.getElementsByTagName("*");
if (alltags) {
for (i=0; i < alltags.length; i++) {
if (alltags[i].className==name) {
elems[found++]=alltags[i];
}
}
}
return(elems);
}
function classLinkHandler(){
var elems=getElementsByClass('link');
for(i=0;i<elems.length;i++) {
if (elems[i].href && elems[i].href!='') {
addEvent(elems[i],'click',doLink);
}
}
}
function doLink(ev1)
{
// vagy megkapjuk az esemény objektumot, vagy meg kell szereznünk
ev1 || (ev1 = window.event);
// mely objektum váltotta ki az eseményt?
var source;
if (typeof ev1.target != 'undefined') {
source = ev1.target;
} else if (typeof ev1.srcElement != 'undefined') {
source = ev1.srcElement;
} else { return(true); }
/* Prototype rész */
var url = source.href;
var pars = 'foo=bar';
var target = 'login-valasz';
/* hibakeresés miatt van benne az alert */
alert('3 vege');
var myAjax = new Ajax.Updater(target, url, {method: 'post', parameters: pars});
}
addEvent(window, 'load', classLinkHandler);


/* --- diszkrét javascript --- */
function getElementsByClass(name) {
  var found = 0;
  var elems = new Array();
  var alltags = document.getElementsByTagName("*");
  if (alltags) {
    for (i=0; i < alltags.length; i++) {
        if (alltags[i].className==name) {
          elems[found++]=alltags[i];
        }
    }
  }
  return(elems);
}


function classLinkHandler(){
 var elems=getElementsByClass('link');
  for(i=0;i<elems.length;i++) {
    if (elems[i].href && elems[i].href!='') {
      addEvent(elems[i],'click',doLink);
    }
  }
}

function doLink(ev1)
{
	// vagy megkapjuk az esemény objektumot, vagy meg kell szereznünk
	ev1 || (ev1 = window.event);

	// mely objektum váltotta ki az eseményt?
	var source;
	if (typeof ev1.target != 'undefined') {
		source = ev1.target;
	} else if (typeof ev1.srcElement != 'undefined') {
		source = ev1.srcElement;
	} else { return(true); }
/* Prototype rész */
  	var url = source.href;
	var pars = 'foo=bar';
	var target = 'login-valasz';
/* hibakeresés miatt van benne az alert */
alert('3 vege');
	var myAjax = new Ajax.Updater(target, url, {method: 'post', parameters: pars});
}

addEvent(window, 'load', classLinkHandler);

A html rész:

<a href="login.php" class="link">
<input class="gomb" name="send" type="button" id="send" value="Bejelentkezés">
</a>
<div class="login-valasz"></div>


<a href="login.php" class="link">
<input class="gomb" name="send" type="button" id="send" value="Bejelentkezés">
</a>

<div class="login-valasz"></div>

Ez szépen lefut a kattintás után, egészen az alert('3 vege'); ig, és utána a login.php visszatérési üzenetét nem a <div class="login-valasz"></div> -ba, hanem az aktuális ablakot újratöltve, csak a visszatérési üzenetet jeleníti meg.
A másik problémám pedig, hogy hogyan tudnám átadni a nev és pass mező értékeit a login.php-nak

előre is köszi a helpet...

bye Tomi

■

HTML, CSS, JavaScript, Ajax

csirip

Probléma probléma probléma

KoVaLa · 2006. Már. 26. (V), 21.07

Prototype magyarul

1. Tartalamzza a getElemetsByClassName DOM kiterjesztést.
2. Tartalmaz egy observe osztályt ami az események kezelésére tökéletes.
3. Nem jó a HTML rész ne linket használj hanem FORM tag-ot.

A FORM tag Submit eseményéhez kell rendelni az ajax lekérdezést.
És a prototype serialize fügvényét használva url-en keresztül átadható a PHP-nek a form összes elemének értéke.
Röviden ennyi :)

Sok sikert és kitartást szükséged lessz rá. Ha nem megy kezd újra. Lépésről lépésre haladj előre. Minden működő verziót ments el.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

tényleg rövid volt...

monghuz · 2006. Már. 26. (V), 23.05

Mielött félre értés esik, a cim ironikus volt :D

Szóval..
A leírásban ez van, de sajna az elnevezéseket nem vágom annyira.. :(

observe(element, name, observer, useCapture)

element: objektum vagy azonosító,
name: az esemény neve (pl. 'click', 'load'),
observer: a függvény ami lekezeli az eseményt,
useCapture: ha true, akkor a capture fázisban, ha pedig false akkor bubbling fázisban kezeli le az eseményt.

légyszi valaki homályosítson fel a félkövér cuccok jelentésével

És még egy kérdésem lenne.. a submit folyamatot milyen függvénnyel lehet megszakítani magában a javascript-ben, ha nem szeretném az onclick="return(false)" -t használni.

köszi Tomi

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Hmmm

KoVaLa · 2006. Már. 27. (H), 10.44

Jó lenne ha beszereznél minnél több irodalmat a témában (javascript) mielőtt tovább folytatnád. Sok problémától megmentenéd önmagad.

De ha már ide irtam.
elemet: Annak az elemnek az ID je vagy objaktum azonosítója amelyhez az eseményt rendelni szeretnéd.
useCapture: az addEventListener függvény 3. paraméterét takarja.

És még egy... return(false) bárhol használhatod a meghívot függvényben és így megszakítod a függvény lefutását. Miért használnál mást mikkor ez a megoldás.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

úgy van ahogy mondod..

monghuz · 2006. Már. 27. (H), 13.49

Köszi szépen a segitséget... amúgy javascriptet most kezdtem el a prototypeval együtt szóval még nagyon az elején vagyok, de azért tanulok.. :P

bye Tom

A hozzászóláshoz regisztráció és belépés szükséges
új téma

parameterek átadása a linkkel..

monghuz · 2006. Már. 29. (Sze), 16.29

Hali!

Még egy olyan kérdésem lenne, hogy magában egy linkben..
pl: index.php?page=news&cikk=41

A paraméterek átadására van valami függvény a prototypeban? vagy az a.href objektumnak ezek is átkéne adnia? Ha átadja akkor hogyan tudom kinyerni a.href tömbböl? mert alapból csak a linket látom (index.php)

bye Tomi

A hozzászóláshoz regisztráció és belépés szükséges
új téma

help plz :(

monghuz · 2006. Ápr. 7. (P), 00.47

Lehet hogy hülyé fogalmaztam, vagy csak senki nem tud segíteni.. de hátha most :D
Szóval a linkekben lévő paramétereket szeretném használni, pl egy cikkre igy hivatkozom: index.php?page=cikk&id=11
az ehez tartozó hozzászólásokat szeretném megjeleníteni, lehetőleg teljes oldal letöltödés nélkül..

a gondom hogy még mindig nem tudom hogy hogyan mondjam meg az ajax által meghívott php kódnak, hogy ezt meg ezt kérje le az adatbázisból..
elöre is köszi...

A hozzászóláshoz regisztráció és belépés szükséges
új téma

parameters

Anonymous · 2006. Ápr. 7. (P), 10.13

Ha az Ajax.Updater osztalyt hasznalod ott van egy parameters tulajdonsag.
Ennek add meg a "page=cikk&id=11"-t. Amugy ha hasznalsz firebug kiterjesztest, ott lehet kovetni az XMLHttpREquest-eket. A feldolgozo fileba teszel egy print_r( $_REQUEST) -et es Firebugban latod milyen valtozokat kapott meg.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

átadás..

monghuz · 2006. Ápr. 7. (P), 11.12

Na igen, addig eljutottam hogy annak kell átadni, csak a mikéntjével vagyok gondban, vagyis magának a js függvénynek hogyan tudom átadni a hivatkozásnak a paraméteres részét?
mert addig ok hogy

function feldolgozo(link){
var url = 'index.php';
var pars = 'valtozo=ertek';
var target = 'div-keret';
var myAjax = new Ajax.Updater(target, url, {method: 'get', parameters: pars});
}


function feldolgozo(link){
     var url = 'index.php';
     var pars = 'valtozo=ertek';
     var target = 'div-keret';
     var myAjax = new Ajax.Updater(target, url, {method: 'get', parameters: pars});
}

bocsi hogy ennyire láma vagyok de már egy csomó cikket elolvastam és azokban legtöbbször formértékeket adnak át a serialize osztályal, viszont itt nekem egy árva form-om sincs :(

A hozzászóláshoz regisztráció és belépés szükséges
új téma

hash objektum ?

toxin · 2006. Ápr. 7. (P), 15.13

http://prototype.rajmi.hu/prototype.js.hu.html

asszociatív tömböt feltöltöd, konvertálod hash-objektummá, majd a hash.toQueryString(), mehet paramnak szvsz :)

A hozzászóláshoz regisztráció és belépés szükséges
új téma

egy megoldás

toxin · 2006. Ápr. 7. (P), 16.47

aki nemérti járjon utánna :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>Untitled Document</title>
<script src="scripts/prototype.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript" language="javascript">
var myNewsClass =
Class.create();
myNewsClass.prototype = {
initialize : function (newsLinkClass,wrapper,placeholder) {
var elems = document.getElementsByClassName(newsLinkClass,wrapper);
for (var i=0;i<elems.length;i++)
{
var elem = elems[i];
elem.id = i;
elem.myNewsClassClickHandler = this;
elem.onclick = this.onClickHandler;
}
this.placeholder = placeholder;
},
onClickHandler : function(){
var myNewsClassClickHandler = this.myNewsClassClickHandler;
if (myNewsClassClickHandler) myNewsClassClickHandler.ajaxReq(this.id);
},
ajaxReq : function (id){
var url = 'ajax_server.php';
var pars = '&news='+id;
var myAjax = new Ajax.Updater( this.placeholder, url, { method: 'get', parameters: pars });
}
}
window.onload = function(){
var cikkObject = new myNewsClass('cikklink','cikklinkek','cikkhelye');
}
</script>
</head>
<body>
<div id="cikklinkek">
<a class="cikklink" href="#"> cikk0 vagyok</a>
<a class="cikklink" href="#"> cikk1 vagyok</a>
<a class="cikklink" href="#"> cikk2 vagyok</a>
</div>
<div id="cikkhelye">
</div>
</body>
</html>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>Untitled Document</title>
<script  src="scripts/prototype.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript" language="javascript">
	
var myNewsClass = 

	Class.create();
	myNewsClass.prototype = {
		initialize : function (newsLinkClass,wrapper,placeholder) {
			var elems = document.getElementsByClassName(newsLinkClass,wrapper);					
			for (var i=0;i<elems.length;i++)
			{
					var elem = elems[i];
					elem.id = i;
					elem.myNewsClassClickHandler = this;
					elem.onclick = this.onClickHandler;	
			}
   			this.placeholder = placeholder;
		},
		
		onClickHandler : function(){
			var myNewsClassClickHandler = this.myNewsClassClickHandler;
			if (myNewsClassClickHandler) myNewsClassClickHandler.ajaxReq(this.id);
				
		},
		
		ajaxReq : function (id){
			var url = 'ajax_server.php';
			var pars = '&news='+id;
			var myAjax = new Ajax.Updater( this.placeholder, url, { method: 'get', parameters: pars }); 		
		}
	}
 
window.onload = function(){
		
	var cikkObject = new myNewsClass('cikklink','cikklinkek','cikkhelye');		
}

</script>
</head>
<body>

<div id="cikklinkek">
	<a class="cikklink" href="#"> cikk0 vagyok</a>
	<a class="cikklink" href="#"> cikk1 vagyok</a>
	<a class="cikklink" href="#"> cikk2 vagyok</a>
</div>

<div id="cikkhelye">

</div>

</body>
</html>

php rész meg csak a példa kedvéért

<?php

echo 'cikk '.$_GET['news'].' vagyok';

?>

itt meg bőszen müxik
http://toxin.hu/ajax/links.html#

jó szórakozást :)

ui: forró ajánlat: http://www.sergiopereira.com/articles/advjs.html és az alján a 2 könyv

A hozzászóláshoz regisztráció és belépés szükséges
új téma

müködik csak csúnya a link

monghuz · 2006. Május. 5. (P), 01.57

hali!

már mükszik a dolog, csak egy gond van... a linkjeim igy néznek ki :

<a href="#page=hirek&parameter=12" class="link">12 es cikk</a>

<a href="#page=hirek&parameter=12" class="link">12 es cikk</a>

a gondom, hogy 2 kattintás után (12es 13as cikk) valami ilyesmi lesz a cimsorban

www.oldal.hu/index.php?page=hirek&parameter=12#page=hirek&parameter=13

www.oldal.hu/index.php?page=hirek&parameter=12#page=hirek&parameter=13

ezt úgy ki tudom küszöbölni, hogy a linket mondjuk hirek.php?parameter=12 formában adom meg, viszont igy ha betöltödik az adott cikk az AJAX-szal utána a hirek.php ugyan úgy végrehajtódik az egész oldal újratöltődésével..

nem lehet ezt valahogy leállitani? mert a var myAjax = new Ajax.Updater ... sor után ha beszúrok egy alert(); -et akkor az még végre hajtódik és utána töltödik újra az egész weblap..
A return(false); sem állitja le, nincs valami header küldés vagy ilyesmi ami menet közben lévő "link végrehalytást" megállítja???

előre is köszi

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Weblabor

Keresés