I have this situation: - I have an Ajax form in a DIV which when it''s posted and the result message shown up I want another DIV to be refreshed with the new content. Pretty much like you see on http://video.msn.com (the new site - choose a video and you see the video loading up in the right player but also relating videos loadingup on the bottom right...without reloading the whole page and without using frames). Anyone any ideas? And maybe some code examples? (I''m using Prototype library but the scripting language is not RoR) Thanks. --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
for clarification: so you want the user to submit the form and then have that forms parent Div updated (with the response I assume of ''logged in/welcome back'' or ''login failed'') and then have another div updated with different content from a single Ajax call? On 9/27/07, Mircea <mirceagoia-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> > > I have this situation: > - I have an Ajax form in a DIV which when it''s posted and the result > message shown up I want another DIV to be refreshed with the new > content. > > Pretty much like you see on http://video.msn.com (the new site - > choose a video and you see the video loading up in the right player > but also relating videos loadingup on the bottom right...without > reloading the whole page and without using frames). > > Anyone any ideas? And maybe some code examples? (I''m using Prototype > library but the scripting language is not RoR) > > Thanks. > > > > >--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
I''m working on something like this.
So far, it consists of 6 functions to process the form and act
according to the results.
I have a general function that validates and sends all the fields to
be processed on the server (I use PHP).
I use another three very fine libraries: script.aculo.us, the
Prototype Window class and Dexgogo field Validation.
[code]
function submitValues(form,url,msg) {
var valid = new Validation(form);
var result = valid.validate();
if (result) {
$(''stat'').update('' '');
new Ajax.Request(
url, {
method: ''post'',
parameters: $(form).serialize(true),
onLoading: loadingAction(msg),
onComplete: completeAction,
onSuccess: processResponse,
onFailure: processFailure
}
);
}
}
[/code]
As you can see, the function takes the values of the form (the id), an
url (the PHP to process the data) and msg, which is a text to display
while the Ajax request is processing (like "Loading...", "Logging
in...", etc.).
There are other 4 functions to control and display the result of each
state:
[code]
function loadingAction(msg) {
Dialog.info(msg, {width: 200, height: 50, showProgress: true});
}
[/code]
This function uses the Prototype Window Class to show a window with a
message that lasts while the action is taking place.
[code]
function completeAction() {
Dialog.closeInfo();
}
[/code]
When the action is complete, close the window
Now, here comes the fun part
[code]
function processResponse(xhrObject) {
response = String(xhrObject.responseText);
args = response.split(''&'');
if (args.length > 0 && args.length < 4) {
if (args[0] != "") {
msg = args[0].split(''='');
if (msg.length > 1 && msg.length < 4 && msg[0] ==
''msg'' && !
isNaN(Number(msg[1]))) {
txt = args[1].split(''='');
if (txt[1] != "") {
rmsg = txt[1];
}
switch(Number(msg[1])) {
case 1: // exito
if (rmsg == '''') { rmsg = ''Transaccion
exitosa.'';}
var stat_class = ''exito'';
break;
case 2: // error
if (rmsg == '''') { rmsg = ''Error indeterminado.
Es posible que la
operacion no se haya completado satisfactoriamente.'';}
var stat_class = ''error'';
break;
}
Element.show(''stat'');
$(''stat'').update(rmsg);
document.getElementById(''stat'').className=stat_class;
new Effect.Highlight(''stat'', {duration: 5.0});
//$(''stat'').toggleClassName(stat_class);
if (args[2] != "") {
complementar(args[2]);
}
} else {
alert(''1) La respuesta del servidor no es adecuada.\nNo se puede
determinar el estatus de la operacion.'');
}
} else {
alert(''2) La respuesta del servidor no es adecuada.\nNo se puede
determinar el estatus de la operacion.'');
}
} else {
alert(''3) La respuesta del servidor no es adecuada.\nNo se puede
determinar el estatus de la operacion.'');
}
}
[/code]
My PHP returns something like this: msg=1&txt=Invalid Login
So, I split the text returned by the & and then split it again at the
= to check for the result of the operation.
1 means it is ok
2 means there was an error
Sorry for the spanish, I am a bit lazy :-)
Now, after the switch there is an Element.show that, well, shows the
message.
And right next to it, there is a function called complementar.
I use that function to do something else after the response, like
updating another div, deleting rows, etc.
For that to work, I have my PHP return a third argument, for example,
after login succesfull I get:
msg=1&Login successful&menu|$menu
You might have noticed I used a | instead of an =, because I noticed
that my HTML in $menu would get split too, so I changed the separator
there.
$menu contains HTML that will be used to replace the login form by the
function complementar.
[code]
function complementar(args,row) {
var args = args.split(''|'');
var serv = args[1];
// actualizar menu de servicios al logearse
if (args.length == 2 && args[0] == "menu" && serv !=
'''') {
$(''usr_menu'').update(serv);
Element.show(''stat'');
$(''stat'').update(''Login successful'');
new Effect.Highlight(''stat'', {duration: 5.0});
$(''menu'').update(''User Menu'');
}
}
[/code]
There you go.
Simple? I think not.
Works? Sure it does!
Could it be simpler? probably, I dunno.
oh! and finally, a function to display errors:
[code]
function processFailure(xhrObject) {
alert(''Error: la operacion no se
realizo.\n''+xhrObject.responseText);
}
[/code]
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
As the people above me have already written the specific answer i''ll
go for a general one.
Load your form menu with objects that contain an ID or the url path to
said object.
Observe click events on menu objects, When one is clicked, extract
unique data from clicked element, send to server.
Have listener wait for server response, take data and insert into
display container.
Cheers,
Matt
On Sep 27, 1:21 pm, Transistor
<transistor....-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:> I''m working on something like this.
> So far, it consists of 6 functions to process the form and act
> according to the results.
> I have a general function that validates and sends all the fields to
> be processed on the server (I use PHP).
> I use another three very fine libraries: script.aculo.us, the
> Prototype Window class and Dexgogo field Validation.
> [code]
> function submitValues(form,url,msg) {
> var valid = new Validation(form);
> var result = valid.validate();
> if (result) {
>
$(''stat'').update('' '');
> new Ajax.Request(
> url, {
> method: ''post'',
> parameters: $(form).serialize(true),
> onLoading: loadingAction(msg),
> onComplete: completeAction,
> onSuccess: processResponse,
> onFailure: processFailure
> }
> );
> }}
>
> [/code]
> As you can see, the function takes the values of the form (the id), an
> url (the PHP to process the data) and msg, which is a text to display
> while the Ajax request is processing (like "Loading...",
"Logging
> in...", etc.).
> There are other 4 functions to control and display the result of each
> state:
> [code]
> function loadingAction(msg) {
> Dialog.info(msg, {width: 200, height: 50, showProgress: true});}
>
> [/code]
> This function uses the Prototype Window Class to show a window with a
> message that lasts while the action is taking place.
> [code]
> function completeAction() {
> Dialog.closeInfo();}
>
> [/code]
> When the action is complete, close the window
> Now, here comes the fun part
> [code]
> function processResponse(xhrObject) {
> response = String(xhrObject.responseText);
> args = response.split(''&'');
> if (args.length > 0 && args.length < 4) {
> if (args[0] != "") {
> msg = args[0].split(''='');
> if (msg.length > 1 && msg.length < 4
&& msg[0] == ''msg'' && !
> isNaN(Number(msg[1]))) {
> txt = args[1].split(''='');
> if (txt[1] != "") {
> rmsg = txt[1];
> }
> switch(Number(msg[1])) {
> case 1: // exito
> if (rmsg ==
'''') { rmsg = ''Transaccion exitosa.'';}
> var stat_class =
''exito'';
> break;
> case 2: // error
> if (rmsg ==
'''') { rmsg = ''Error indeterminado. Es posible que la
> operacion no se haya completado satisfactoriamente.'';}
> var stat_class =
''error'';
> break;
> }
> Element.show(''stat'');
> $(''stat'').update(rmsg);
>
document.getElementById(''stat'').className=stat_class;
> new
Effect.Highlight(''stat'', {duration: 5.0});
>
//$(''stat'').toggleClassName(stat_class);
> if (args[2] != "") {
> complementar(args[2]);
> }
> } else {
> alert(''1) La respuesta del
servidor no es adecuada.\nNo se puede
> determinar el estatus de la operacion.'');
> }
> } else {
> alert(''2) La respuesta del servidor no es
adecuada.\nNo se puede
> determinar el estatus de la operacion.'');
> }
> } else {
> alert(''3) La respuesta del servidor no es
adecuada.\nNo se puede
> determinar el estatus de la operacion.'');
> }}
>
> [/code]
> My PHP returns something like this: msg=1&txt=Invalid Login
> So, I split the text returned by the & and then split it again at the
> = to check for the result of the operation.
> 1 means it is ok
> 2 means there was an error
> Sorry for the spanish, I am a bit lazy :-)
> Now, after the switch there is an Element.show that, well, shows the
> message.
>
> And right next to it, there is a function called complementar.
> I use that function to do something else after the response, like
> updating another div, deleting rows, etc.
> For that to work, I have my PHP return a third argument, for example,
> after login succesfull I get:
> msg=1&Login successful&menu|$menu
> You might have noticed I used a | instead of an =, because I noticed
> that my HTML in $menu would get split too, so I changed the separator
> there.
> $menu contains HTML that will be used to replace the login form by the
> function complementar.
> [code]
> function complementar(args,row) {
> var args = args.split(''|'');
> var serv = args[1];
> // actualizar menu de servicios al logearse
> if (args.length == 2 && args[0] == "menu"
&& serv != '''') {
> $(''usr_menu'').update(serv);
> Element.show(''stat'');
> $(''stat'').update(''Login
successful'');
> new Effect.Highlight(''stat'', {duration:
5.0});
> $(''menu'').update(''User
Menu'');
> }}
>
> [/code]
> There you go.
> Simple? I think not.
> Works? Sure it does!
> Could it be simpler? probably, I dunno.
>
> oh! and finally, a function to display errors:
> [code]
> function processFailure(xhrObject) {
> alert(''Error: la operacion no se
realizo.\n''+xhrObject.responseText);}
>
> [/code]
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
Yes, that''s what I want to do. Mircea On Sep 27, 8:13 am, "Brian Williams" <brianw1...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> for clarification: > > so you want the user to submit the form and then have that forms parent Div > updated (with the response I assume of ''logged in/welcome back'' or ''login > failed'') and then have another div updated with different content from a > single Ajax call? > > On 9/27/07, Mircea <mirceag...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > > > > > > I have this situation: > > - I have an Ajax form in a DIV which when it''s posted and the result > > message shown up I want another DIV to be refreshed with the new > > content. > > > Pretty much like you see onhttp://video.msn.com(the new site - > > choose a video and you see the video loading up in the right player > > but also relating videos loadingup on the bottom right...without > > reloading the whole page and without using frames). > > > Anyone any ideas? And maybe some code examples? (I''m using Prototype > > library but the scripting language is not RoR) > > > Thanks.- Hide quoted text - > > - Show quoted text ---~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
I know how to use Prototype for submitting a form and get the result
in the same DIV where the form was.
The only problem is that after getting the results of the submitted
form I want to update another DIV with the new results.
Say I have the form (in a DIV) and under the form is a table (in
another DIV) with several results.
If I add a record using the form then I want to show the succes
message and that table to be updated with the new result I just added
(without reloading the whole page).
All using AJAX from Prototype.
Seem simple at a glance...but I couldn''t find out how to implement
it...
For the form I am using this:
---------
onsubmit="new Ajax.Updater(''DIV_1,
''/forms/dsp_add_edit.cfm?
view=0&stage=add&action=update&id_cat=1'',
{asynchronous:true,
parameters:Form.serialize(this)}); return false;"
--------
The success message is hard-coded in the HTML file which is returned
after posting the data. It''s not returned using Prototype.
The Loading message is displayed with the help oif this code:
--------
<!--- show/hide the Loading... --->
<script language="JavaScript" type="text/javascript">
<!--
// --- show/hide loading ---
var myGlobalHandlers = {
onCreate: function(){
toY = getPageScroll() + 220;
Element.setStyle(''systemWorking'',{top:
toY+''px'', left: ''580px''});
Element.show(''systemWorking'');
},
onComplete: function() {
if(Ajax.activeRequestCount == 0){
Element.hide(''systemWorking'');
}
}
};
Ajax.Responders.register(myGlobalHandlers);
function getPageScroll(){
var yScroll;
if (self.pageYOffset) {
yScroll = self.pageYOffset;
} else if (document.documentElement &&
document.documentElement.scrollTop){ // Explorer 6 Strict
yScroll = document.documentElement.scrollTop;
} else if (document.body) {// all other Explorers
yScroll = document.body.scrollTop;
}
return yScroll;
}
//-->
</script>
-------------
''systemWorking'' is the DIV which shows the Loading
message...abd the
function getPageScroll show me the Loading message regardless how I
scroll the page (I can take this out if I want).
Mircea
On Sep 27, 10:21 am, Transistor
<transistor....-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:> I''m working on something like this.
> So far, it consists of 6 functions to process the form and act
> according to the results.
> I have a general function that validates and sends all the fields to
> be processed on the server (I use PHP).
> I use another three very fine libraries: script.aculo.us, the
> Prototype Window class and Dexgogo field Validation.
> [code]
> function submitValues(form,url,msg) {
> var valid = new Validation(form);
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
ajax.updater will update what ever id you provide. If you want to do something more complex than just update one id after the ajax is complete, you should use ajax.request, and then set a function to be called on complete. More on Ajax.Request here http://www.prototypejs.org/api/ajax/request On 27-Sep-07, at 1:59 PM, Mircea wrote:> > I know how to use Prototype for submitting a form and get the result > in the same DIV where the form was. > > The only problem is that after getting the results of the submitted > form I want to update another DIV with the new results. > > Say I have the form (in a DIV) and under the form is a table (in > another DIV) with several results. > If I add a record using the form then I want to show the succes > message and that table to be updated with the new result I just added > (without reloading the whole page). > > All using AJAX from Prototype. > > Seem simple at a glance...but I couldn''t find out how to implement > it... > > For the form I am using this: > --------- > onsubmit="new Ajax.Updater(''DIV_1, ''/forms/dsp_add_edit.cfm? > view=0&stage=add&action=update&id_cat=1'', {asynchronous:true, > parameters:Form.serialize(this)}); return false;" > -------- > > The success message is hard-coded in the HTML file which is returned > after posting the data. It''s not returned using Prototype. > > The Loading message is displayed with the help oif this code: > -------- > <!--- show/hide the Loading... ---> > <script language="JavaScript" type="text/javascript"> > <!-- > // --- show/hide loading --- > var myGlobalHandlers = { > onCreate: function(){ > > toY = getPageScroll() + 220; > Element.setStyle(''systemWorking'',{top: toY+''px'', left: ''580px''}); > Element.show(''systemWorking''); > }, > > onComplete: function() { > if(Ajax.activeRequestCount == 0){ > Element.hide(''systemWorking''); > } > } > }; > Ajax.Responders.register(myGlobalHandlers); > > function getPageScroll(){ > var yScroll; > if (self.pageYOffset) { > yScroll = self.pageYOffset; > } else if (document.documentElement && > document.documentElement.scrollTop){ // Explorer 6 Strict > yScroll = document.documentElement.scrollTop; > } else if (document.body) {// all other Explorers > yScroll = document.body.scrollTop; > } > return yScroll; > } > > //--> > </script> > ------------- > ''systemWorking'' is the DIV which shows the Loading message...abd the > function getPageScroll show me the Loading message regardless how I > scroll the page (I can take this out if I want). > > > Mircea > > > > On Sep 27, 10:21 am, Transistor <transistor....-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: >> I''m working on something like this. >> So far, it consists of 6 functions to process the form and act >> according to the results. >> I have a general function that validates and sends all the fields to >> be processed on the server (I use PHP). >> I use another three very fine libraries: script.aculo.us, the >> Prototype Window class and Dexgogo field Validation. >> [code] >> function submitValues(form,url,msg) { >> var valid = new Validation(form); > > > >______________________________________________________________________ Alex Duffield ❖ Principal ❖ InControl Solutions . http:// www.incontrolsolutions.com --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
or have your first "login" ajax request return code to call another function containing an Ajax.Updater with the other div''s ID yeah, it''s kind of ugly, but effective none-the-less. On 9/27/07, Alex Duffield <alex-GLL9njBnHiGqPKKiFzS5XxZCeNDtXRbv@public.gmane.org> wrote:> > ajax.updater will update what ever id you provide. > If you want to do something more complex than just update one id after the > ajax is complete, you should use ajax.request, and then set a function to > be called on complete. > > > More on Ajax.Request here > > http://www.prototypejs.org/api/ajax/request > > > > On 27-Sep-07, at 1:59 PM, Mircea wrote: > > > I know how to use Prototype for submitting a form and get the result > in the same DIV where the form was. > > The only problem is that after getting the results of the submitted > form I want to update another DIV with the new results. > > Say I have the form (in a DIV) and under the form is a table (in > another DIV) with several results. > If I add a record using the form then I want to show the succes > message and that table to be updated with the new result I just added > (without reloading the whole page). > > All using AJAX from Prototype. > > Seem simple at a glance...but I couldn''t find out how to implement > it... > > For the form I am using this: > --------- > onsubmit="new Ajax.Updater(''DIV_1, ''/forms/dsp_add_edit.cfm? > view=0&stage=add&action=update&id_cat=1'', {asynchronous:true, > parameters:Form.serialize(this)}); return false;" > -------- > > The success message is hard-coded in the HTML file which is returned > after posting the data. It''s not returned using Prototype. > > The Loading message is displayed with the help oif this code: > -------- > <!--- show/hide the Loading... ---> > <script language="JavaScript" type="text/javascript"> > <!-- > // --- show/hide loading --- > var myGlobalHandlers = { > onCreate: function(){ > > toY = getPageScroll() + 220; > Element.setStyle(''systemWorking'',{top: toY+''px'', left: ''580px''}); > Element.show(''systemWorking''); > }, > > onComplete: function() { > if(Ajax.activeRequestCount == 0){ > Element.hide(''systemWorking''); > } > } > }; > Ajax.Responders.register(myGlobalHandlers); > > function getPageScroll(){ > var yScroll; > if (self.pageYOffset) { > yScroll = self.pageYOffset; > } else if (document.documentElement && > document.documentElement.scrollTop){ // Explorer 6 Strict > yScroll = document.documentElement.scrollTop; > } else if (document.body) {// all other Explorers > yScroll = document.body.scrollTop; > } > return yScroll; > } > > //--> > </script> > ------------- > ''systemWorking'' is the DIV which shows the Loading message...abd the > function getPageScroll show me the Loading message regardless how I > scroll the page (I can take this out if I want). > > > Mircea > > > > On Sep 27, 10:21 am, Transistor <transistor....-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > I''m working on something like this. > So far, it consists of 6 functions to process the form and act > according to the results. > I have a general function that validates and sends all the fields to > be processed on the server (I use PHP). > I use another three very fine libraries: script.aculo.us, the > Prototype Window class and Dexgogo field Validation. > [code] > function submitValues(form,url,msg) { > var valid = new Validation(form); > > > > > > > > ______________________________________________________________________ > *Alex Duffield* *â -* *Principal* *â -* *InControl Solutions* *.* * > http://www.incontrolsolutions.com* <http://www.incontrolsolutions.com/> > > > > > > >--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Can''t figure out exactly how to use this...I am just using Ajax/ Javascript...not really a Javascript programmer... That''s why some examples may help... Thanks. On Sep 27, 3:11 pm, "Brian Williams" <brianw1...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> or have your first "login" ajax request return code to call another function > containing an Ajax.Updater with the other div''s ID > > yeah, it''s kind of ugly, but effective none-the-less. > > On 9/27/07, Alex Duffield <a...-GLL9njBnHiGqPKKiFzS5XxZCeNDtXRbv@public.gmane.org> wrote: > > > > > > > ajax.updater will update what ever id you provide. > > If you want to do something more complex than just update one id after the > > ajax is complete, you should use ajax.request, and then set a function to > > be called on complete. > > > More on Ajax.Request here > > >http://www.prototypejs.org/api/ajax/request > > > On 27-Sep-07, at 1:59 PM, Mircea wrote: > > > I know how to use Prototype for submitting a form and get the result > > in the same DIV where the form was. > > > The only problem is that after getting the results of the submitted > > form I want to update another DIV with the new results. > > > Say I have the form (in a DIV) and under the form is a table (in > > another DIV) with several results. > > If I add a record using the form then I want to show the succes > > message and that table to be updated with the new result I just added > > (without reloading the whole page). > > > All using AJAX from Prototype. > > > Seem simple at a glance...but I couldn''t find out how to implement > > it... > > > For the form I am using this: > > --------- > > onsubmit="new Ajax.Updater(''DIV_1, ''/forms/dsp_add_edit.cfm? > > view=0&stage=add&action=update&id_cat=1'', {asynchronous:true, > > parameters:Form.serialize(this)}); return false;" > > -------- > > > The success message is hard-coded in the HTML file which is returned > > after posting the data. It''s not returned using Prototype. > > > The Loading message is displayed with the help oif this code: > > -------- > > <!--- show/hide the Loading... ---> > > <script language="JavaScript" type="text/javascript"> > > <!-- > > // --- show/hide loading --- > > var myGlobalHandlers = { > > onCreate: function(){ > > > toY = getPageScroll() + 220; > > Element.setStyle(''systemWorking'',{top: toY+''px'', left: ''580px''}); > > Element.show(''systemWorking''); > > }, > > > onComplete: function() { > > if(Ajax.activeRequestCount == 0){ > > Element.hide(''systemWorking''); > > } > > } > > }; > > Ajax.Responders.register(myGlobalHandlers); > > > function getPageScroll(){ > > var yScroll; > > if (self.pageYOffset) { > > yScroll = self.pageYOffset; > > } else if (document.documentElement && > > document.documentElement.scrollTop){ // Explorer 6 Strict > > yScroll = document.documentElement.scrollTop; > > } else if (document.body) {// all other Explorers > > yScroll = document.body.scrollTop; > > } > > return yScroll; > > } > > > //--> > > </script> > > ------------- > > ''systemWorking'' is the DIV which shows the Loading message...abd the > > function getPageScroll show me the Loading message regardless how I > > scroll the page (I can take this out if I want). > > > Mircea > > > On Sep 27, 10:21 am, Transistor <transistor....-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > > I''m working on something like this. > > So far, it consists of 6 functions to process the form and act > > according to the results. > > I have a general function that validates and sends all the fields to > > be processed on the server (I use PHP). > > I use another three very fine libraries: script.aculo.us, the > > Prototype Window class and Dexgogo field Validation. > > [code] > > function submitValues(form,url,msg) { > > var valid = new Validation(form); > > > ______________________________________________________________________ > > *Alex Duffield* *â -* *Principal* *â -* *InControl Solutions* *.* * > >http://www.incontrolsolutions.com*<http://www.incontrolsolutions.com/>- Hide quoted text - > > - Show quoted text ---~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Ok, maybe it was too much, hehe. Let me try to explain 1 the main function is submitValues, triggered when submitting a form 2 onSuccess, it triggers the function processResponse 3 processResponse handles showing the result message (succes or failure basically) and if succesful, it triggers the funciton complementar 4 complementar can do anything else, like updating a div or series of divs, deleting and adding rows, whatever you need. In order to do this, I needed to establish a way to return to the JavaScript what I want to do, so I decided I would use a set of messages like this: msg=(1,2)&txt=(text to display)&var|(html), where number=1 means success, 2 means error, text is what you want to show and var is HTML that will be used somewhere on the page. My philosophy is to create a series of functions, that trigger another function so its easier for me to update and debug and I can use it on other projects with no modifications. --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---