PrototypeJS Event.observe ja FORM pārlādē

[LamerNo1]

HTML bloks

<div id="addAnswerDiv">
  <form id="addAnswerForm" method="post" action="./">
  <input type="hidden" name="jautajums" value="Kas?" />
  <input type="text" name="atbilde" value="" />
  <input type="submit" name="pievienot" value="Pievienot!" />
  </form>
</div>

 

JavaScript

function addAnswer(e) {
new Ajax.Request("./", {
	parameters :  $('addAnswerForm').serialize(true),
	onSuccess: function(transport){
		var response = transport.responseText || "no response text";
		$('addAnswerDiv').innerHTML = response;
	},
	onFailure: function(){ alert('Something went wrong...') }
});
Event.stop(e);
}

document.observe("dom:loaded", function() {
Event.observe($('addAnswerForm'), 'submit', addAnswer);
});

 

Tātad pēc formas apstiprināšanas ajax pārņem kontroli un iegūtos rezultātus ieliek pašas formas vietā. Iegūtie rezultāti ir tā pari forma, tikai ar mainītu "jautajums" vērtību.

Pirmajā reizē viss notiek tieši tā tam vajadzēdu būt, bet mēģinot otru reizi apstipirnā šo formu (ar ajax iegūto) tā vairs netiek aizturēta un apstrādāta ar JS, bet gan pa taisno tiek nosūtīta.

Kā lai panāk to, ka arī ielādētās formas tiek aizturētas un apstrādātas ar JS, ja tām ir tāds pats ID kā iepriekšējai.

 

P.S. tiek izmantots PrototypeJS - http://www.prototypejs.org/

 

Update:

Nepieciešamajā kadījumā iztiku ar JSON un un nomainiju tikai nepieciešamās vērtības, protams nācās visiem objektiem kuros nepieciešamas izmaiņas piešķirt ID.

 

HTML bloks:

<div>
  <form id="addAnswerForm" method="post" action="./">
  <input type="hidden" id="jautajums" name="jautajums" value="Kas?" />
  <input type="text" name="atbilde" />
  <input type="submit" name="pievienot" value="Pievienot!" />
  <div id="zinojums"></div>
  </form>
</div>

 

java script:

function addAnswer(e) {
new Ajax.Request('json.php', {
	parameters : $('addAnswerForm').serialize(true),
	requestHeaders: {Accept: 'application/json'},
	onSuccess: function(transport){
		var json = transport.responseText.evalJSON(true);
		$('jautajums').value = resp.jautajums;
		$('zinojums').innerHTML = resp.zinojums;
	},
	onFailure: function(){ alert('Something went wrong...') }
});
Event.stop(e);
}

document.observe("dom:loaded", function() {
Event.observe($('addAnswerForm'), 'submit', addAnswer);
});

 

Un JSON izskatās apmēram tā

<?
header("Content-type: application/json");
//Pēdējā rindiņa ir tas, kā būtu jāizskatās JSON faila saturam kad tas tiek padots;-)
?>
{"jautajums": "nākamais jautājums", "zinojums": "Tava atbilde ir apstrādāta!"}

 

Tas arī viss, bet joprojām derētu uzzināt kā var piedabūt Event.observe strādāt ar formām kuras tiek ielādētas ar ajax.

Edited November 18, 2007 by LamerNo1

[Delfins]

liekas, ka tas saistīts ar handļiem... jaunai formai jau būs cits handlis.. līdz ar to jāizsauc atkārtoti hook-ers.

[LamerNo1]

liekas, ka tas saistīts ar handļiem... jaunai formai jau būs cits handlis.. līdz ar to jāizsauc atkārtoti hook-ers.

Tu domā jaunu Event.observe? Mēģināju jau dažādos veidos un vietās, bet nekas nesanāca. Pašam nav šobrīd vairs ideju kā to izlabot. Cerams kāds artrisinās un es varēšu no risinājuma mācīties.

 

Update: iztiku ar JSON - http://php.lv/f/index.php?s=&showtopic...ost&p=68159

Edited November 18, 2007 by LamerNo1

[v3rb0]

šitā rindiņa: $('addAnswerDiv').innerHTML = response;

viņa uztaisa citu "addAnswerForm", tas ka idi ir vienādi nenozīmē, ka Event.observe viņu atpazīs kā veco ar visiem piesietajiem eventiem (zinu, būtu forši ja atpazītu :) ). vari pēc šīs darbības pasaukt vēlreiz Event.observe, vai arī(cik saprotu tā izdarījii) neaiztikt ar innerHTML tagus, kuriem kaut kas tiek observots.

[LamerNo1]

Tas prototype.js spēj būt diezgan dīvains. Esmu uzdūries nezināmas izcelas Form.disable() un Form.enable() gļukiem. Ar IE viss ir OK, bet ar firefox joki ir tādi, ka reizēm nenostrāda Form.enable(). Kas protams noved pie tā, ka forma ir atslēgta, un vairs neko ar viņu nevar izdarīt.

Jocīgākais ir tas, ka es nevaru atrasrt nevienu likumsakarību kādēļ tas tā varētu būt. Katru reizi viņš atslēdzas pēc dažāda skaita, arī dažādas jaunās informācijas. Nav pilnīgi nekā kas manuprāt viņu varētu ietekmēt. Beztam kā jau teicu, uz IE viss rullē.

 function addAnswer(e) {
var oldAddBt = $('addAnswerBt').value;
$('addAnswerBt').value = "Uzgaidiet";
new Ajax.Request('./', {
	parameters : $('addAnswerForm').serialize(true),
	requestHeaders: {Accept: 'application/json'},
	onLoading: function() {
		$('addAnswerForm').disable();
	},
	onLoaded: function() {
		$('addAnswerForm').enable();			
	},
	onSuccess: function(transport){
		$('addAnswerForm').enable();
		var resp = transport.responseText.evalJSON(true);
		$('questionId').value = resp.questionId;
		$('question').innerHTML = resp.question;
		$('answer').value = resp.qPrefix;
		$('result').innerHTML = resp.result;
		$('addAnswerBt').value = oldAddBt;
	},
	onFailure: function(){ alert('Something went wrong...') }
});
Event.stop(e);
}

[v3rb0]

kaut kur kaut kas tomēŗ nomirst. tie enable() un disable() ir pārāk vienkārši, lai viņi gļukotu, visticamāk, ka viņi pat netiek izsaukti.

varbūt uzliec firebugu, un pieraksti console.log() katras f-jas sākumā, vismaz redzēsi kas izpildās, un kas nē.