ugrás a tartalomhoz

AJAX hívások ciklusban

Anonymous · 2006. Aug. 11. (P), 11.57
Sziasztok!

Van egy formom, ezen x darab szövegmező. Ezek szerkesztés után AJAX post-tal egyenként is menthetők. A módosított, de még nem mentett mezők ID-it egy JS-tömbbe gyűjtögetem.
Az oldal elhagyásakor unonload-ra szeretném felkínálni a lehetőséget a módosított mezők mentésére. A következő formára gondoltam:

for(i=0; i<unsaved_ids.length; i++)
{
   if(window.confirm('menteni akarod a(z) ' + $(unsaved_ids[i]).value + 'szövegő mezőt?'))
   {
       ide_jon_az_AJAX_fugveny();
   }
}
A probléma a dologgal, hogy az AJAX-ot aszinkron módon meghívva csak az első cikluskör fut le.
Próbálkoztam szinkron módban is, az működik, de ha csak az oldalt frissítem, akkor a textboxokba nem a módosított értékeket írja ki, pedig menti a dolgokat, mert ha mégegyszer ráfrissítek, akkor már a módosított értékek jelennek meg.
Az lenne a kérdésem, hogyan lehetne ezt valahogy kultúráltan megoldani és vajon miért áll le asszinkron módban az első kör után?

és a teljes kód: (a prototype-ot használom)

function save_input()
{
   for(i=0; i<unsaved_ids.length; i++)
   {
      if(window.confirm('Mented a megváltozott nevet: ' + '\n' + $(unsaved_ids[i]).value ))
      {                       
          var url = 'http://localhost/laser/update_kezeles.php?';

          var kezelesnev = base64enc(escape($(unsaved_ids[i]).value));
          var id = unsaved_ids[i];
          var pars = 'kezelesnev=' + kezelesnev + '&id=' + id;                  
                       
          var myAjax = new Ajax.Request(
          url, 
          {
            method: 'post', 
            parameters: pars, 
            onComplete: treatmentUpdate, 
            asynchronous : false      
          });         
          alert('A kezelés változtatásai elmentve.');                  
      }
   }   
}
A treatmentUpdate függvény takarít egy kicsit a HTML doksiban, leveszi a mentést jelző ikont, megszünteti a szövegdoboz kijelölését, stb. Aszinkron módban az első körben ez szépen látszik is a háttérben, ezért lenne ez a megoldás szimpibb.

A segítséget előre is köszönöm,

Laci
‹ JS-sel generált gombok onclick eventje IE alatt Két menü közötti menüpont áthelyező felület ›
 ■
1

talán

Anonymous · 2006. Aug. 11. (P), 12.53
mi lenne, hogy ha az oldal elhagyásánál először csak egy tömbbe gyűjtenéd, hogy mit/miket akar menteni, és utána egy ajaxos kérésben módosítanád az összeset?
2

igen,

Anonymous · 2006. Aug. 11. (P), 13.20
erre én is gondoltam, csak az probléma, hogy szépen akarom megcsinálni, hogy egyenként látszódjon, ahogy a confirm ablakot leokézod (szép magyar szó) akkor a szóban forgó szövegmezőről eltűnik a kijelölés és mellőle a mentés ikon.

Ahogy már írtam, szinkron módban végigviszi a fenti ciklust és ment is, de utána a régi értékek látszódnak pedig újratölti az oldalt, asszinkronban pedig az első kör után meghal.

Szóval van már egy félmegoldás, de ez még így elég gány.
3

biztos

Anonymous · 2006. Aug. 11. (P), 14.25
nem tudom, hogy hany mezot akarsz lementeni a vegen, de szeritem nekem mar haromnal is fogyna a turelmem, ha egyesevel kifade-elne midegyik, 3sec/db idovel...
aszinkronban a masodik keres el sem indul?
4

hali

toxin · 2006. Aug. 11. (P), 14.38
pontosan mi nem megy, mert

<html>
<head>
<title>textArea and Buton</title>
<script type="text/javascript" src="scripts/prototype.js"></script>
<script type="text/javascript" src="scripts/scriptaculous.js?load=builder"></script>
<script type="text/javascript">

window.onload = function() {
    for (var i=0;i<5;i++)  
    $('textContainer').appendChild( Builder.node('textarea',{'id':'testArea'+i},'tartalom'+i) );
    
    document.onclick = window.unonload;
}

window.unonload = function(){
    $A($('textContainer').childNodes).each(
        function(elem,index)
            {
                if(window.confirm('menteni akarod a(z) ' + index + ' szövegő mezőt?'))
                {
                    save_input.bind($(elem.id))();
                }
            }
    )
}

function save_input()
{
    var url='test.php';
    var myAjaxParam = function AjaxParam(name,value){this[name]=value;}
        
    var myAjax = new Ajax.Request(
    url,
    {
        method: 'post',
        parameters: $H(new myAjaxParam('param',$F(this.id))).toQueryString(),
        onComplete: treatmentUpdate.bind(this)
        
    });

}

function treatmentUpdate(transport,objJSON){
    $(this).innerHTML= objJSON.text;
}
</script>
</head>
<body>
  <div id='textContainer'></div>
</body>
</html>
ill. min. php kód

<?php
header("X-JSON: ({'text':'hello ".$_POST['param']." '})");
?>
http://toxin.hu/weblabor/ajax/testelem.html

vígan futkorászik php módosít, js módosítja DOM-ot (most az adott textArea innerHTML-jét de akármi lehetne), szóval :S unonload-ot ráköttöttem akárhova klikk-re azt meg window.unonloadra :)

ui: igazából class/komponensbe kellett volna rakni a fenti kódot, sípol is gagyi jelzőm :))) , de most erre van időm sry :)

de mostmár volt egy kicsi, refactoring után ugyanaz és mégis más :)

<html>
<head>
<title>textArea saverComponent</title>
<script type="text/javascript" src="scripts/prototype.js"></script>
<script type="text/javascript" src="scripts/scriptaculous.js?load=builder"></script>
<script type="text/javascript">

var myTextAreaSaver = 

    Class.create();
    myTextAreaSaver.prototype = {
        
        initialize : function(textAreaWrapper){
                this.textAreaWrapper = $(textAreaWrapper);
                //            temporary solution,
                document.onclick = this.saveInic.bind(this);
        },
        
        saveInic : function(){
            $A(this.textAreaWrapper.childNodes).each(
                function(elem,index){
                    if(window.confirm('menteni akarod a(z) ' + index + ' szövegő mezőt?'))
                    {
                        this.saveAjax.bind(this)(elem);
                    }
            }.bind(this));
        },
        
        saveAjax : function(el){
            var url='test.php';
            var myAjaxParam = function (name,value){this[name]=value;}
            
            var myAjax = new Ajax.Request(
            url,
            {
                method: 'post',
                parameters: $H(new myAjaxParam('param',$F(el))).toQueryString(),
                onComplete: this.treatmentUpdate.bind(el)
            });   
        },
        
        treatmentUpdate : function(transport,objJSON){
            this.innerHTML= objJSON.text;    
        }
}
 

window.onload = function() {
    for (var i=0;i<5;i++)  $('textContainer').appendChild( Builder.node('textarea',{'id':'testArea'+i},'tartalom'+i) );
    
    new myTextAreaSaver('textContainer');
}
</script>
</head>
<body>
  <div id='textContainer'></div>
</body>
</html>
http://toxin.hu/weblabor/ajax/testelem2.html

(csak az nézze aki már komolyabban foglalkozott js-el mert egyébként úgyse érti :) nem bántásból nem felvágásból, tény )
5

igen, azt hiszem ez lesz az!

Anonymous · 2006. Aug. 11. (P), 17.05
köszi toxin, erre gondoltam. Egyébként gondolatolvasó vagy, mert éppen kérni akartalak, hogy átírnád-e a kódot "igazi profira", ha időd engedi, hogy okulásul szolgáljon nekem és minden érdeklődőnek.
Aludtam rá egyet, nyomtam egy kávét és most hajrá.
Nagyon köszönöm a segítséged,

Laci
6

debug

toxin · 2006. Aug. 11. (P), 17.47
azt nem mondtam hogy ez a profi, de ez a prototype módi, más kódbázis alatt nyilván moshogy nézne ki

amiért írok, hogy úgynézki mintha nem használnád a firebug js debuggert, konzolt stb, ha tévednék akkor bocsi, de ennélkül elég nehéz szép kódot írni (nehéz rájönni mi működik, mi nem, mert prototype alatt azért lehet saját ötletekkel is próbálkozni :) )

http://encytemedia.com/blog/articles/2006/05/12/an-in-depth-look-at-the-future-of-javascript-debugging-with-firebug

no csak ennyi, jómunkát :)