background invisible stored process

[mathias]

Hi,

I would like to register email subscriptions from a static website (only html and javascript)

I have a simple webform with 3 values that need to be registerd.

I was planning to do it with a SAS STP and store the 3 values in a dataset.

It's working but my problem is that UX is really bad :

- when a user click on submit, the browser goes to the link of the STP, closing the current website (can be solved with newwindow)

- the stp does it's job, it registers the subscription into a dataset.

- user sees a gray screen and is left there.

How is it possible to make this more friendly ?

Ideally the user would click on submit, would be redirected to the same website and would be shown a confirmation dialog (passed with an URL parameter like "?subscriptionIsConfirmed=1" )

Is there a way to run the STP in the background ? to prevent it of opening a window ? to close the STP window ? to redirect to a specific URL ?

Thank you for your help !

[mathias]

Maybe the stored process can be run in an invisible iframe in my website, this would make the process completely invisible to users.

Browsers may not like invisible iframes though.

I'll try this.

[jakarman]

mathias your are using the SP more like what I have seen done with SAS/Internet building your own html. It is part of a SP approach and possible.
Does this help you? SAS(R) 9.4 Stored Processes: Developer's Guide, Second Edition The web is stateless if you want to use multiple screens there must be some session binding.      

[boemskats]

Hi Mathias,

look at using an AJAX request instead of a form post request. This way you can do whatever you want with the returned values in the javascript.

Are you using anything like jquery on your site?

The other approach is like you say setting the form submit target to a small/hidden iframe somewhere, but the ajax route is better. It's slightly more complex to program though if you don't have a js library/framework available

[mathias]

I'm using jQuery, yes.

can you tell me little bit more ?

Thanks

[boemskats]

Have a look at this example: jQuery AJAX Form Submit Example

It's a very well documented technique so I'll assume you've familiarised yourself with it before continuing with this, and that you understand javascript objects etc. What AJAX does is it lets you make a background HTTP request without reloading the page and interpret any data returned using function that you define in there. So here is the example above but modified to suit your purposes:

SAS code:

...code that handles your form input and validates it, and then...

data _null_;

  file _webout;

         %if &successful = 1 %then %do;

  put '{"success":1}';

          %end;

          %else %do;

  put '{"success":0}';

          %end;

run;

*note: no need to include stpbegin and stpend as you are outputting raw text data here to be interpreted by the front end javascript;

JQuery code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

//callback handler for form submit $("#ajaxform").submit(function(e) {     var postData = $(this).serializeArray();  // this will put all your form responses in a javascript object     postData._program = '/my metadata/Stored Process/location/program'; // this will add extra parameters to postData on top of your form responses     var formURL = $(this).attr("action");     $.ajax(     {         url : formURL,         type: "POST",         data : postData,         success:function(data, textStatus, jqXHR)         {             if (data.success == 1) {               // indicate to user they have signed up ok             } else {               // indicate to user they need to submit again as there was an error             }         },         error: function(jqXHR, textStatus, errorThrown)         {             //if fails              }     });     e.preventDefault(); //STOP default action     e.unbind(); //unbind. to stop multiple form submit. }); $("#ajaxform").submit(); //Submit  the FORM

I've edited this code by hand but I hope it gives you an idea of the mechanisms involved. It's a much more modern way of working.

Let me know if you need any more help, I'll be happy to.

cheers

Nik

[mathias]

Thanks a lot,

I tried what you suggested.

I got my stp to output {"success":1}

(removed % in your data step + added %stepbegin right after it)

However, what happens is always : //if fails

In the console I have this error :

XMLHttpRequest cannot load <formURL>. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '<MyWebsiteURL>' is therefore not allowed access.

And here is what I found on the subject : http://stackoverflow.com/questions/19821753/jquery-xml-error-no-access-control-allow-origin-header-i...

But I have no idea how to enable CORS on the STP server.

[boemskats]

Ah - this can be a problem. Will your final site be hosted on the same server as your SAS STP webapp?

What you'll need to do while you are developing is, if using chrome, start it with the parameter of --disable-web-security, which disables the same origin policy and lets you get it working on your local browser. You then have some options if you want to use this approach for deployment. They vary in complexity:

1) deploy your website as part of the jboss root.war static directory. This will mean that your /website will be on the same server as your /SASStoredProcess/do, which means that same origin policy will allow it

2) deploy both your website and your SAS SPWA behind a reverse proxy, which will present your website and the SAS app to the browser as appearing on the same server, effectively doing as above

3) configure your application server, or the front end that fronts it, for CORS, as you suggest.

    Here is how to do it for a front-end:

enable cross-origin resource sharing

    And here is how to do it if you just have JBoss:

Cross Origin Resource Sharing (CORS) with jQuery and JBoss web service - Stack Overflow

(this involves implementing a class in jboss, such as this Padcom's blog: CORS filter for Java applications and then configuring a filter that sends all CORS requests to that class)

I'm sorry, I assumed that you were already working as #1 above, ie hosting your pages on the same server that hosts your web application.