Re: [Lift] Re: Ajax forms and (multiple) submit buttons
Hello, Right ... and it's not even a hack ... css is the right way of building layout not really the html. Putting buttons in the form ar giving this perception in the page doesn't mean that the button has to be physically in the form element (at least that's the way I see it.). actually I think I'll take back the doable with CSS as it's quite easy for an add element button, but per-element operations, like delete, move up, move down would take really some more time to layout properly, if they were placed outside the form :). But as I said, I'll make the whole form AJAX :). -- Adam-- You received this message because you are subscribed to the Google Groups Lift group. To post to this group, send email to lift...@googlegroups.com. To unsubscribe from this group, send email to liftweb+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/liftweb?hl=en.
[Lift] Re: Ajax forms and (multiple) submit buttons
Hi, Something puzzled me about this as in firebug the parameters order was correct. So here is the explanation why it doesn't for with your code: 1. HTTP parameters MAY arrive in an unpredictable order into the servlet. Container may alter their order due to use of maps etc, or browsers may even alter it. The point is that parameters order for application/x-www-form-urlencoded is not specified. 2. Even if the ajax request was sent with the right order (the one that we expected) Lift DOES the parameter sorting. This is imperative to ensure proper execution order for form functions. Thus since the function names that were added after you press the Add button are lexicographically then your submit function name (there is an algorithm generating form function names), your submit function was processed BEFORE those fields function. To cope with this I modified your ajaxButton to: def ajaxButton(text: NodeSeq, formId: String, func: () = JsCmd, attrs: (String, String)*): Elem = { val name = Z + Helpers.nextFuncName addFunctionMap(name, contextFuncBuilder(func)) attrs.foldLeft( button onclick={makeAjaxCall(JsRaw( LiftRules.jsArtifacts.serialize(formId).toJsCmd + + + Str( + name + =true).toJsCmd)).toJsCmd + ; return false;}{text}/button)(_ % _) } This will ensure that your submit function will be called last. I did some a testing with your code and having only ajaxButton changes and the behavior was correct. Br's, Marius On Jan 18, 10:36 am, Adam Warski a...@warski.org wrote: Hello, Right ... and it's not even a hack ... css is the right way of building layout not really the html. Putting buttons in the form ar giving this perception in the page doesn't mean that the button has to be physically in the form element (at least that's the way I see it.). actually I think I'll take back the doable with CSS as it's quite easy for an add element button, but per-element operations, like delete, move up, move down would take really some more time to layout properly, if they were placed outside the form :). But as I said, I'll make the whole form AJAX :). --Adam -- You received this message because you are subscribed to the Google Groups Lift group. To post to this group, send email to lift...@googlegroups.com. To unsubscribe from this group, send email to liftweb+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/liftweb?hl=en.
[Lift] Re: Ajax forms and (multiple) submit buttons
On Jan 16, 12:02 pm, Adam Warski a...@warski.org wrote: Hello, Ok I just looked on your code. The problem is that you put the ajax button inside the form and there is not reason for that. Well, unless I do want the button to be inside the form ;) (for user-experience/layout reasons). Although it's possible to hack this with css somehow. I changed your code to something like: bind(cont, containerTemplate, name - { println(bind container name + cont.name); SHtml.text(cont.name, (s: String) = {println(set container name + s); cont.name = s; }) }, rooms - editRoom _ ) ++ ajaxButton(Text(Add), cont_edit, () = { println(executing funtion); cont.rooms += new Room; reDraw }) So the button is outside the form now. Otherwise your dynamic added field were appended in the form after the add button location. I removed from your template cont:add / (or whatever the name was). I tested it and the behavior appears correct to me now. Field values are preserved correctly. Hmm yes I wondered if the order in which the functions are bound is significant, but my experiments showed that it's not simply a first bound, first called principle. So I don't quite get it yet why it doesn't work. We rely on JQuery (or other underlying library) to send the actual ajax request. We feed in the correct sequence but if your button is in the middle of the form (as fields were added after the button's location in the form) the sequence of the function id-s is not sent right via ajax even if onclick for the ajax button we first serialize the for and then add the function ID of the ajax button. Personally I don't see why this is an impediment Anyway, thanks a lot for taking the time and checking the code. I'll simply use an ajaxForm for now, as I don't really have to use normal forms. Just wanted to check if it's possible ;). It is possible and easy. Just put your ajax button outside the form. -- Adam -- You received this message because you are subscribed to the Google Groups Lift group. To post to this group, send email to lift...@googlegroups.com. To unsubscribe from this group, send email to liftweb+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/liftweb?hl=en.
Re: [Lift] Re: Ajax forms and (multiple) submit buttons
Hello, Hmm yes I wondered if the order in which the functions are bound is significant, but my experiments showed that it's not simply a first bound, first called principle. So I don't quite get it yet why it doesn't work. We rely on JQuery (or other underlying library) to send the actual ajax request. We feed in the correct sequence but if your button is in the middle of the form (as fields were added after the button's location in the form) the sequence of the function id-s is not sent right via ajax even if onclick for the ajax button we first serialize the for and then add the function ID of the ajax button. Personally I don't see why this is an impediment ah, clear now. Thanks a lot for the explanation. This is a small impediment if the button logically belongs inside the form (if I want the user to see the button inside the form), but then, as I wrote, I can use css to correctly position it, although I would consider it a small hack :) -- Adam-- You received this message because you are subscribed to the Google Groups Lift group. To post to this group, send email to lift...@googlegroups.com. To unsubscribe from this group, send email to liftweb+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/liftweb?hl=en.
[Lift] Re: Ajax forms and (multiple) submit buttons
On Jan 16, 7:08 pm, Adam Warski a...@warski.org wrote: Hello, Hmm yes I wondered if the order in which the functions are bound is significant, but my experiments showed that it's not simply a first bound, first called principle. So I don't quite get it yet why it doesn't work. We rely on JQuery (or other underlying library) to send the actual ajax request. We feed in the correct sequence but if your button is in the middle of the form (as fields were added after the button's location in the form) the sequence of the function id-s is not sent right via ajax even if onclick for the ajax button we first serialize the for and then add the function ID of the ajax button. Personally I don't see why this is an impediment ah, clear now. Thanks a lot for the explanation. This is a small impediment if the button logically belongs inside the form (if I want the user to see the button inside the form), but then, as I wrote, I can use css to correctly position it, although I would consider it a small hack :) Right ... and it's not even a hack ... css is the right way of building layout not really the html. Putting buttons in the form ar giving this perception in the page doesn't mean that the button has to be physically in the form element (at least that's the way I see it.). Anyways have fun with Lift :) and thanks for contributing with interesting use-cases. -- Adam -- You received this message because you are subscribed to the Google Groups Lift group. To post to this group, send email to lift...@googlegroups.com. To unsubscribe from this group, send email to liftweb+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/liftweb?hl=en.
Re: [Lift] Re: Ajax forms and (multiple) submit buttons
Hello, I tried the trunk version and again it almost works :) 1. the RequestVars aren't preserved for the ajax request. I think this can be fixed by replacing in SHtml:692 the NFuncHolder with a call to contextFuncBuilder, so the method would look like this: def doit = makeFormElementWithName(submit, contextFuncBuilder(func), attrs: _*){ case (funcName, elem) = elem % new UnprefixedAttribute(value, Text(value), Null) % (onclick - (liftAjax.lift_uriSuffix = '+funcName+=_'; return true;)) } I tested it on my example application (http://github.com/adamw/lift-ajax-submit-test) and it works. 2. The button will work only with full ajax-forms right? So forms wrapped with ajaxForm(...)? My initial use-case was for adding some ajax buttons to normal forms (submitted with a normal http request), but I guess I can make the whole form submitted with ajax. Thanks! Adam Most likely I'll commit it today in master as it was approved by review board. Br's, Marius On Jan 14, 9:53 am, Adam Warski a...@warski.org wrote: I would of course be very +1 to include the ajaxSubmit :). Thanks for the work. This looks a bit different to the button I tried before, maybe you have a patch so that I can try it out on the test app? Adam On Jan 12, 2010, at 8:39 PM, Marius wrote: Dear all, Recently (and not only) there have been discussions about ajax forms and their submit Scala functions not being called and that's because JQuery's form serialization doesn't serialize the input submits (for pertinent reasons). The workaround is as you know to use hidden fields. Adam also wanted an ajax form with multiple submit buttons taking different actions depending on which button is being called. This is also *doable* using hidden fields but not quite from elegant. I've experimented a way to allow ajax form submission but after all form field functions are being called your own ajax Scala function is being called (with no hidden fields). the idea is this: 1. I added an SHtml.ajaxSubmit which has the same signature with SHtml.submit 2. At js level I added a liftAjax.lift_uriSuffix 3. When clicking the ajaxSubmit button we set the liftAjax.lift_uriSuffix with the function name value. This is the function name of your scala function. Hence your scala function for ajaxSubmit will be called after form field functions are called. In short we piggy back the Scala function info on top of the serialized form info. I tested it and it works just fine for me: Using it looks something like like: ajaxForm(bind(hello, xhtml, field1 - text(, (s) = {println(field1 = + s)}), field2 - text(, (s) = {println(field2 = + s)}), field3 - text(, (s) = {println(field3 = + s)}), submit - ajaxSubmit(Press me, () = { println(my ajax func called.) Noop })) ... you got the idea. This of course allows putting virtually any number of ajax submit buttons and the right function will be called on server side. I'm thinking to add this to Lift but first I'd like to know your thoughts. Br's, Marius -- You received this message because you are subscribed to the Google Groups Lift group. To post to this group, send email to lift...@googlegroups.com. To unsubscribe from this group, send email to liftweb+unsubscr...@googlegroups.com. For more options, visit this group athttp://groups.google.com/group/liftweb?hl=en. -- You received this message because you are subscribed to the Google Groups Lift group. To post to this group, send email to lift...@googlegroups.com. To unsubscribe from this group, send email to liftweb+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/liftweb?hl=en. -- You received this message because you are subscribed to the Google Groups Lift group. To post to this group, send email to lift...@googlegroups.com. To unsubscribe from this group, send email to liftweb+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/liftweb?hl=en.
[Lift] Re: Ajax forms and (multiple) submit buttons
On Jan 15, 11:05 am, Adam Warski a...@warski.org wrote: Hello, I tried the trunk version and again it almost works :) 1. the RequestVars aren't preserved for the ajax request. I think this can be fixed by replacing in SHtml:692 the NFuncHolder with a call to contextFuncBuilder, so the method would look like this: def doit = makeFormElementWithName(submit, contextFuncBuilder(func), attrs: _*){ case (funcName, elem) = elem % new UnprefixedAttribute(value, Text(value), Null) % (onclick - (liftAjax.lift_uriSuffix = '+funcName+=_'; return true;)) } I tested it on my example application (http://github.com/adamw/lift-ajax-submit-test) and it works. Oh yeah contextFuncBuider ... good catch. I'll update today. 2. The button will work only with full ajax-forms right? So forms wrapped with ajaxForm(...)? My initial use-case was for adding some ajax buttons to normal forms (submitted with a normal http request), but I guess I can make the whole form submitted with ajax. Yes it is meant to work for ajaxForm. But for normal forms you can use submitAjaxForm you could use the ajaxButton I sent on a different thread. Not sure what the issue was with that as in my tests it worked fine. Thanks! Adam Most likely I'll commit it today in master as it was approved by review board. Br's, Marius On Jan 14, 9:53 am, Adam Warski a...@warski.org wrote: I would of course be very +1 to include the ajaxSubmit :). Thanks for the work. This looks a bit different to the button I tried before, maybe you have a patch so that I can try it out on the test app? Adam On Jan 12, 2010, at 8:39 PM, Marius wrote: Dear all, Recently (and not only) there have been discussions about ajax forms and their submit Scala functions not being called and that's because JQuery's form serialization doesn't serialize the input submits (for pertinent reasons). The workaround is as you know to use hidden fields. Adam also wanted an ajax form with multiple submit buttons taking different actions depending on which button is being called. This is also *doable* using hidden fields but not quite from elegant. I've experimented a way to allow ajax form submission but after all form field functions are being called your own ajax Scala function is being called (with no hidden fields). the idea is this: 1. I added an SHtml.ajaxSubmit which has the same signature with SHtml.submit 2. At js level I added a liftAjax.lift_uriSuffix 3. When clicking the ajaxSubmit button we set the liftAjax.lift_uriSuffix with the function name value. This is the function name of your scala function. Hence your scala function for ajaxSubmit will be called after form field functions are called. In short we piggy back the Scala function info on top of the serialized form info. I tested it and it works just fine for me: Using it looks something like like: ajaxForm(bind(hello, xhtml, field1 - text(, (s) = {println(field1 = + s)}), field2 - text(, (s) = {println(field2 = + s)}), field3 - text(, (s) = {println(field3 = + s)}), submit - ajaxSubmit(Press me, () = { println(my ajax func called.) Noop })) ... you got the idea. This of course allows putting virtually any number of ajax submit buttons and the right function will be called on server side. I'm thinking to add this to Lift but first I'd like to know your thoughts. Br's, Marius -- You received this message because you are subscribed to the Google Groups Lift group. To post to this group, send email to lift...@googlegroups.com. To unsubscribe from this group, send email to liftweb+unsubscr...@googlegroups.com. For more options, visit this group athttp://groups.google.com/group/liftweb?hl=en. -- You received this message because you are subscribed to the Google Groups Lift group. To post to this group, send email to lift...@googlegroups.com. To unsubscribe from this group, send email to liftweb+unsubscr...@googlegroups.com. For more options, visit this group athttp://groups.google.com/group/liftweb?hl=en. -- You received this message because you are subscribed to the Google Groups Lift group. To post to this group, send email to lift...@googlegroups.com. To unsubscribe from this group, send email to liftweb+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/liftweb?hl=en.
Re: [Lift] Re: Ajax forms and (multiple) submit buttons
Hello, Oh yeah contextFuncBuider ... good catch. I'll update today. thanks :) 2. The button will work only with full ajax-forms right? So forms wrapped with ajaxForm(...)? My initial use-case was for adding some ajax buttons to normal forms (submitted with a normal http request), but I guess I can make the whole form submitted with ajax. Yes it is meant to work for ajaxForm. But for normal forms you can use submitAjaxForm you could use the ajaxButton I sent on a different thread. Not sure what the issue was with that as in my tests it worked fine. well I guess you were just lucky because with the modified ajax button some form fields where update before, and some after the associated function was called. So in your tests all form fields feel into the before category. But in my test case on github some field elements are updated after the function, so they loose their value (it's very simple btw., just one form with a list of elements). -- Adam-- You received this message because you are subscribed to the Google Groups Lift group. To post to this group, send email to lift...@googlegroups.com. To unsubscribe from this group, send email to liftweb+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/liftweb?hl=en.
[Lift] Re: Ajax forms and (multiple) submit buttons
On Jan 15, 5:59 pm, Adam Warski a...@warski.org wrote: Hello, Oh yeah contextFuncBuider ... good catch. I'll update today. thanks :) done. 2. The button will work only with full ajax-forms right? So forms wrapped with ajaxForm(...)? My initial use-case was for adding some ajax buttons to normal forms (submitted with a normal http request), but I guess I can make the whole form submitted with ajax. Yes it is meant to work for ajaxForm. But for normal forms you can use submitAjaxForm you could use the ajaxButton I sent on a different thread. Not sure what the issue was with that as in my tests it worked fine. well I guess you were just lucky because with the modified ajax button some form fields where update before, and some after the associated function was called. So in your tests all form fields feel into the before category. But in my test case on github some field elements are updated after the function, so they loose their value (it's very simple btw., just one form with a list of elements). I kinda doubt that as I tested with a bunch of form fields. In the ajax request the function ID of the ajax function was always the last in the parameters and functions are evaluated in canonical order (for the same owner). But I think you sent me your source code location and I need to look what's in there this weekend. I Hope your code that works as you described is still there :) -- Adam -- You received this message because you are subscribed to the Google Groups Lift group. To post to this group, send email to lift...@googlegroups.com. To unsubscribe from this group, send email to liftweb+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/liftweb?hl=en.
Re: [Lift] Re: Ajax forms and (multiple) submit buttons
I kinda doubt that as I tested with a bunch of form fields. In the ajax request the function ID of the ajax function was always the last in the parameters and functions are evaluated in canonical order (for the same owner). But I think you sent me your source code location and I need to look what's in there this weekend. I Hope your code that works as you described is still there :) Yep, it's still there: http://github.com/adamw/lift-ajax-submit-test Just run it, add one element, fill in the two input fields, and click add again, you should see the input disappearing. Thanks a lot :) -- Adam-- You received this message because you are subscribed to the Google Groups Lift group. To post to this group, send email to lift...@googlegroups.com. To unsubscribe from this group, send email to liftweb+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/liftweb?hl=en.
[Lift] Re: Ajax forms and (multiple) submit buttons
Ok I just looked on your code. The problem is that you put the ajax button inside the form and there is not reason for that. I changed your code to something like: bind(cont, containerTemplate, name - { println(bind container name + cont.name); SHtml.text(cont.name, (s: String) = {println(set container name + s); cont.name = s; }) }, rooms - editRoom _ ) ++ ajaxButton(Text(Add), cont_edit, () = { println(executing funtion); cont.rooms += new Room; reDraw }) So the button is outside the form now. Otherwise your dynamic added field were appended in the form after the add button location. I removed from your template cont:add / (or whatever the name was). I tested it and the behavior appears correct to me now. Field values are preserved correctly. So this being an ajaxButton it shouldn't be inside a form especially when the form content is changed dynamically. If you have a form with static fields and put the button after all fields, I'm pretty sure it'll also work. Br's, Marius On Jan 15, 6:38 pm, Adam Warski a...@warski.org wrote: I kinda doubt that as I tested with a bunch of form fields. In the ajax request the function ID of the ajax function was always the last in the parameters and functions are evaluated in canonical order (for the same owner). But I think you sent me your source code location and I need to look what's in there this weekend. I Hope your code that works as you described is still there :) Yep, it's still there:http://github.com/adamw/lift-ajax-submit-test Just run it, add one element, fill in the two input fields, and click add again, you should see the input disappearing. Thanks a lot :) -- Adam -- You received this message because you are subscribed to the Google Groups Lift group. To post to this group, send email to lift...@googlegroups.com. To unsubscribe from this group, send email to liftweb+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/liftweb?hl=en.
[Lift] Re: Ajax forms and (multiple) submit buttons
Most likely I'll commit it today in master as it was approved by review board. Br's, Marius On Jan 14, 9:53 am, Adam Warski a...@warski.org wrote: I would of course be very +1 to include the ajaxSubmit :). Thanks for the work. This looks a bit different to the button I tried before, maybe you have a patch so that I can try it out on the test app? Adam On Jan 12, 2010, at 8:39 PM, Marius wrote: Dear all, Recently (and not only) there have been discussions about ajax forms and their submit Scala functions not being called and that's because JQuery's form serialization doesn't serialize the input submits (for pertinent reasons). The workaround is as you know to use hidden fields. Adam also wanted an ajax form with multiple submit buttons taking different actions depending on which button is being called. This is also *doable* using hidden fields but not quite from elegant. I've experimented a way to allow ajax form submission but after all form field functions are being called your own ajax Scala function is being called (with no hidden fields). the idea is this: 1. I added an SHtml.ajaxSubmit which has the same signature with SHtml.submit 2. At js level I added a liftAjax.lift_uriSuffix 3. When clicking the ajaxSubmit button we set the liftAjax.lift_uriSuffix with the function name value. This is the function name of your scala function. Hence your scala function for ajaxSubmit will be called after form field functions are called. In short we piggy back the Scala function info on top of the serialized form info. I tested it and it works just fine for me: Using it looks something like like: ajaxForm(bind(hello, xhtml, field1 - text(, (s) = {println(field1 = + s)}), field2 - text(, (s) = {println(field2 = + s)}), field3 - text(, (s) = {println(field3 = + s)}), submit - ajaxSubmit(Press me, () = { println(my ajax func called.) Noop })) ... you got the idea. This of course allows putting virtually any number of ajax submit buttons and the right function will be called on server side. I'm thinking to add this to Lift but first I'd like to know your thoughts. Br's, Marius -- You received this message because you are subscribed to the Google Groups Lift group. To post to this group, send email to lift...@googlegroups.com. To unsubscribe from this group, send email to liftweb+unsubscr...@googlegroups.com. For more options, visit this group athttp://groups.google.com/group/liftweb?hl=en. -- You received this message because you are subscribed to the Google Groups Lift group. To post to this group, send email to lift...@googlegroups.com. To unsubscribe from this group, send email to liftweb+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/liftweb?hl=en.
[Lift] Re: Ajax forms and (multiple) submit buttons
Cool. Br's, Marius On Jan 12, 9:50 pm, Alex Boisvert alex.boisv...@gmail.com wrote: I like it a lot. Eliminates recent confusion about submit() in ajaxForm, prettier and semantically more correct than hidden fields and supports multiple actions. What's not to like? alex On Tue, Jan 12, 2010 at 2:39 PM, Marius marius.dan...@gmail.com wrote: Dear all, Recently (and not only) there have been discussions about ajax forms and their submit Scala functions not being called and that's because JQuery's form serialization doesn't serialize the input submits (for pertinent reasons). The workaround is as you know to use hidden fields. Adam also wanted an ajax form with multiple submit buttons taking different actions depending on which button is being called. This is also *doable* using hidden fields but not quite from elegant. I've experimented a way to allow ajax form submission but after all form field functions are being called your own ajax Scala function is being called (with no hidden fields). the idea is this: 1. I added an SHtml.ajaxSubmit which has the same signature with SHtml.submit 2. At js level I added a liftAjax.lift_uriSuffix 3. When clicking the ajaxSubmit button we set the liftAjax.lift_uriSuffix with the function name value. This is the function name of your scala function. Hence your scala function for ajaxSubmit will be called after form field functions are called. In short we piggy back the Scala function info on top of the serialized form info. I tested it and it works just fine for me: Using it looks something like like: ajaxForm(bind(hello, xhtml, field1 - text(, (s) = {println(field1 = + s)}), field2 - text(, (s) = {println(field2 = + s)}), field3 - text(, (s) = {println(field3 = + s)}), submit - ajaxSubmit(Press me, () = { println(my ajax func called.) Noop })) ... you got the idea. This of course allows putting virtually any number of ajax submit buttons and the right function will be called on server side. I'm thinking to add this to Lift but first I'd like to know your thoughts. Br's, Marius -- You received this message because you are subscribed to the Google Groups Lift group. To post to this group, send email to lift...@googlegroups.com. To unsubscribe from this group, send email to liftweb+unsubscr...@googlegroups.comliftweb%2bunsubscr...@googlegroups.com . For more options, visit this group at http://groups.google.com/group/liftweb?hl=en. -- You received this message because you are subscribed to the Google Groups Lift group. To post to this group, send email to lift...@googlegroups.com. To unsubscribe from this group, send email to liftweb+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/liftweb?hl=en.