Multiple ajax forms on page and resetting strikeone request validation

I'm looking to figure out (and document) how to implement multiple forms on a page that are submitted via JQuery Form. The tricky part has to with how to integrate with request validation (strikeone). While that page points to a possible solution (specifically Approch 2) , it does not spell out the details on how to implement it.

Here's the basic use case:

• A formatted search returns a set of topics with associated DataForms information.
• The rendered results includes a forms for each record to update one or more of the fields.
• Without ajax, the form would need to save the target record and then redirect back to reload the original page.
• The jquery form plugin nicely allows us to update the target record in the background without having to reload the page.
• The problem is that strikeone provides a single validation key for the page, so while the first invocation of ajax form submittal works, each subsequent one triggers the validation confirmation screen (thereby terminating the ajax request).

If I'm understanding the approach outlined in how to integrate with request validation, the solution is to use a follow-up ajax call (subsequent to the initial form submittal) to request a generic form, thereby getting a new validation key and then populating all the forms in the page with this new key. Unfortunately, I've not gotten this to work (yet). So I thought I'd post this question to see if I can get some help. I'll post whatever I figure out.

I'd also welcome any thoughts regarding other approaches to achieving the same ends as well as possible security issues with this setup and how to mitigate.

-- LynnwoodBrown - 18 Mar 2014

Success!

I seem to have gotten this working, at least with a minimal test example. Here's two simple forms that write to Question1428Test.

Actually, I see my example is not working on Foswiki.org because RenderPlugin is not installed. I suspect that it could be done without this plugin but I'm not sure about the details. I suppose if the "extraForm" was in a page by itself, the one could use a regular ajax "get" call. RenderPlugin enables calling a particular section.

Perhaps someone else could provide more details. None, the less, this does provide a proof of concept.

Ajax results:

Here's the code:

%STARTSECTION{"theForm"}%<div id='form%ID%' class='ajaxLoad' >
---++++ FORM %ID%
<form id='testAjaxForm%ID%' action='%SCRIPTURL{save}%/%WEB%/' class='ajaxForm' method='post'>
<input type='hidden' name='topic' value='%TOPIC%Test' />
<input type='hidden' name='text' value='This is a test topic used for %BASEWEB%.%BASETOPIC%. The form that did the last write was # %ID%.' />
<input type='submit' value=' Submit'>
</form>
</div>%ENDSECTION{"theForm"}%

%STARTSECTION{"extraform"}% 
<form id="dummyForm" name="extraForm" action="%SCRIPTURL{save}%/%BASEWEB%/" method="post"> 
<input type="hidden" name="topic" value="%BASETOPIC%"> 
<input type="submit" value=" Submit "/></form> 
%ENDSECTION{"dummyForm"}%

%STARTSECTION{"js"}%
<script type='text/javascript'> 
 jQuery(function($) { 
  function refreshForms(responseText, statusText, xhr, $form) {  
     $.get('%SCRIPTURL{rest}%/RenderPlugin/tag', 
        {  
          name: 'INCLUDE', 
          param: '%WEB%.%TOPIC%', 
          section: 'extraform', 
          skin: 'plain', 
          t: '%SERVERTIME{$epoch}%',
          render: true 
        })
        .done(function(data,status) {
            var retrievedKey = $(data).find('input[name=validation_key]').attr('value');
             $('form.ajaxForm').find('input[name=validation_key]').attr( 'value', retrievedKey );
             $('#ajaxResult').html( 'Success!  The key is: ' + retrievedKey);
        });
    }  
    var options = {  
         success: refreshForms  
    };  
 $('.ajaxForm').submit(function() { 
        $(this).ajaxSubmit(options); 
        return false; 
  }); 
});
</script>
%ENDSECTION{"js"}%

I'd welcome anyone who can simplify what I've done here or can offer improvements.

Commenting is disabled while not logged in