ugrás a tartalomhoz

Mennyire egészséges? jQuery php class

Tanul0 · 2011. Feb. 4. (P), 12.21
Úgy gondoltam, megkönnyíteném a saját dolgomat és írok egy osztályt az ajax kérések egyszerűsítésére. A kérdésem az lenne, hogy mennyire egészséges ilyen formában megvalósítani.

A kód:

class jQueryAjaxSubmits{
function jQueryAjaxPostInit($data, $url, $formname="Ajax", $setTimeout="2000", $ResponseFunc){
		$s='<script type="text/javascript">
			$(document).ready(function() { 
				'.$formname.'Form();
				   function '.$formname.'Form() {
					$("#waitpopup").remove();
					$("#'.$formname.'Form").submit(function(){
						'.$this->jQueryAjaxWaitPopUp().'
						setTimeout(request, '.$setTimeout.');
					});
			'.$this->jQueryAjaxRequest($url, $data).'
				}
			}
			);
			function ClosePopup(){
					$("#waitpopup").remove();
			}
			</script>';
		return $s;
	}
	function jQueryAjaxWaitPopUp(){
		$s="var popupdiv='<div id=\"waitpopup\" style=\"display:none;\">'
			+'<div id=\"popupwait\">'
			+'<p>Please wait...</p>'
			+'</div>'
			+'</div>';
		$(\"body\").append(popupdiv);
		$('#waitpopup').css(\"top\", ( $(window).height() - $('#waitpopup').height() ) / 2+$(window).scrollTop() + \"px\");
		$('#waitpopup').css(\"left\", ( $(window).width() - $('#waitpopup').width() ) / 2+$(window).scrollLeft() + \"px\");
		$('#waitpopup').fadeIn(800);";
		return $s;
	}
	function jQueryAjaxRequest($url, $data){
		$s="function request() { 
                    $.post(\"".$url."\",{ 
					".$this->jQueryAjaxPostVals($data)."
					rand:Math.random() } , function(data){
					var newhtml='<div id=\"newhtml\" style=\"display:none;\">'+data+''
					+'<div style=\"margin: 0 auto; background-color: #lime; width:200px; height: 20px;\" onclick=\"ClosePopup()\">Close</div>'
					+'</div>';
					$(\"#waitpopup\").html(newhtml);
					$(\"#newhtml\").fadeIn(800);
					});
			}";
		return $s;
	}
	function jQueryAjaxPostVals($data){
		foreach($data as $key=>$opt){
			$a.=$key.':$("#'.$opt.'").val(),';
		}
		return $a;
	}
}
Használat:

if(!isset($_POST['asdasd'])){
?>
<!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>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="/s.css" />
<script type="text/javascript" src="/js/jquery.js"></script> 
</head>
<body>
<?php
$ajax=new jQueryAjaxSubmits;
echo $ajax->jQueryAjaxPostInit(
		array(
		'asdasd'=>'asdasd',
		'dsadsa'=>'dsadsa'
		), '/a', "Ajax", $setTimeout="2000", $ResponseFunc);
?>
<div style="background-color: green;">
<form method="post" id="AjaxForm">
	<p><input type="text" name="asdasd" id="asdasd" value="" /></p>
	<p><input type="text" name="dsadsa" id="dsadsa" value="" /></p>
	<div style="margin: 0 auto; margin-top:5px; width: 99px; background-color: #red;" onclick="$('#AjaxForm').submit();">Elküld</div>
	<input name="submit" type="submit" style="display:none" />
</form>
</div>
</body>
</html>
<?php
	}else{
		echo '<div>'.$_POST['asdasd'].' - '.$_POST['dsadsa'].'</div>';
	}
?>
Ez egy nagyon egyszerűsített változat, nyílván escape stb. nincs benne, mert ezt csak egy teszt. Milyen megoldást javasoltok, ha ez nem helytálló?

Üdv!
‹ mi a baj?? Karakter kódolás kiolvasása Meta tagból ›
 ■
1

Működés közben itt tekinthető

Tanul0 · 2011. Feb. 4. (P), 12.54
Működés közben itt tekinthető meg: http://pico.myip.hu/
2

Felesleges

Poetro · 2011. Feb. 4. (P), 14.07
Pusztán JavaScript-tel meg lehetett volna írni az egész rendszeredet, és valószínűleg kevesebb sor lett volna, és nem függ ennyire a HTML-től. Ráadásul a kód nagyon átláthatatlan, valamint az onclick is teljesen rossz. Ha ugyanis nem kattintok az Elküld gomra, akkor teljesen más történik, mintha csak pusztán Enter-t nyomnék valamelyik mezőben. Valamint billentyűzettel nem is tudok ráfókuszálni az Elküld mezőre Tab gomb segítségével, ami nagyon frusztráló.
Ráadásul az egyik leglényegesebb dolog van elrontva benne, mégpedig az egyes rétegek elkülönülése.
3

Kérdés, hogy mi volt ezzel a

ironwill · 2011. Feb. 4. (P), 14.28
Kérdés, hogy mi volt ezzel a célod..? Mi a kérdésed és mit értesz "egészséges" alatt?

Én elvből kerülöm, hogy pl. a php generáljon js-t.. Persze van, amikor elkerülhetetlen, de ez az eset nem tartozik azok közé.

Szerintem az első kérdés, hogy miért így akarod megoldani? (már mint php osztályként, miközben js osztályként is bőven elegendő lenne és legalább nem "szemetelné" a html kódod)

UPDATE: látom Poetro-nál működik az "autoreply" .. :)
4

Erre voltam kíváncsi.

Tanul0 · 2011. Feb. 4. (P), 21.02
Erre voltam kíváncsi. Igazából azért gondoltam, hogy csinálok egy ilyet, mert rengeteg ajax form-ot kell használnom.

Javascriptben hogy gondoljátok?

pl.:

php={

   success:function (){
      //popup feltöltése a válasszal
   },
   error:function(){
      //ha hiba van.
   },
   complete:function(){
     //post
   }

}
Viszont a formot php-ból fogom generálni mindenképpen, tehát a hozzá tartozó input adatokat php-val kéne átadnom a js-nek. Lehet én akarom túl bonyolítani, de őszintén szólva nem tudom hogyan lenne a legkorrektebb és legtisztább megoldás? Lehet van kész megoldás is vagy hasonló amiből lehetne tanulni, eddig nem találtam.
5

JavaScript

Poetro · 2011. Feb. 4. (P), 21.19
JavaScript-tel is ki tudod deríteni, milyen mezői vannak a formnak, és be tudod állítani a szerver oldalon, hogy azt a formot AJAX-szal kell lekezelni (mondjuk adsz a form-nak egy ajax osztályt)
<form action="" class="ajax" method="post">
majd JavaScript-ben:
$('form.ajax').each(function () {
  var form = $(this);
  form.submit(
    $.ajax({
      type: form.attr('method') || 'get',
      data: form.serialize()
    });
  )
});
6

Bocsánat, hogy nem reagáltam

Tanul0 · 2011. Feb. 7. (H), 14.16
Bocsánat, hogy nem reagáltam eddig, csak most volt időm foglalkozni a dologgal.
Nos megnéztem amit ajánlottál és a következőre jutottam.
Mivel több form lehet egy oldalon, ezért mindenképpen php-ból kell átadnom a formok id-jét.

A következőre gondoltam. Csinálok egy ajax.js.php-t, amelyet majd beszúrok a formok elé javascriptként.

$(document).ready(function() {
	$('form#<?php echo $formid; ?>').each(function () {  
	  var form = $(this);  
	  form.submit(function () {
		$.ajax({  
		  type: form.attr('method') || 'post',  
		  data: form.serialize(),
		  url: '<?php echo $target; ?>'
	}); 
     });
  });  
});
Ez így már elfogadható?
7

Miért?

Poetro · 2011. Feb. 7. (H), 16.03
Miért kellene PHP-ból megadni az ID-jét? Elvégre nem csak ID alapján lehet megtalálni a form-ot, valamint a target-et is megadhatod a form action attribútumaként.
8

Végülis, jogos. Nem tudom

Tanul0 · 2011. Feb. 7. (H), 16.25
Végülis, jogos. Nem tudom miért ebben gondolkodom. Igazából még nem csináltam ilyet valószínüleg azért. Mindenáron túl akarom bonyolítani.

Nah most már megvan, működik minden tökéletesen. Köszönöm az észheztérítést :)

A kész megoldás itt van:

Több formal is működik tökéletesen.