How to redirect the response from a REST API Call

We do a lot with embedded forms and REST, but we use AJAX to do the work.  By doing this, we can control the behavior of the page on the client side.  Instead of your submit, what about an onSubmit handler?  This need not be asynchronous, but it can be.  Here's an example:

<form onSubmit='handleSubmit(this); return false'>
...
</form>
<@liaAddScript>
function handleSubmit(form) {
    ;(function($) {
        $.ajax({
            type: "POST",
            url: "${my_community}/restapi/vc/messages/id/${my_topic_id}/reply?message.subject=${topic}",
            data ({
                "message.body":form['message.body'].value
            })
        });
    })(LITHIUM.jQuery);
}
</@liaAddScript>

xorrkaz,

Thanks, I was looking at ajax, but i am not skilled enough in coding to figure it out. I have been trying to tweak code from various sources but just can't get it to work.

I tried using the code you provided and had two issues - getting the info to post, and getting the redirect.

1. As for the post, I hit the button and the page goes away and comes back. The form data has dissappeared. Leading me to hope that the data was posted. But going to the article I don't find a reply. The code I used is posted below.

2. Once the data is posted how do I redirect? Unless I am totally hopeless I didn't see anything for a redirect. Were you assuming i was smart enough to figure that out on my own (in which case I am just lost;) or is there something in the code I don't understand?

Thanks again for the help.

Cheers,

Jonathan

Here is the full source I used:

<@liaAddScript>
function handleSubmit(form) {
;(function($) {
$.ajax({
type: "POST",
url: "${my_community}/restapi/vc/messages/id/${my_topic_id}/reply?message.subject=${the_topic}",
data ({
"message.body":form['message.body'].value
})
});
})(LITHIUM.jQuery);
}
</@liaAddScript>
<!-- Create a form for replies and comments -->

<form name="reply_form" onSubmit='handleSubmit(this);'>
<p>
<textarea name="message.body" cols="80" rows="5"></textarea>
</p>
<p>
<label>
<input type="submit" value="Post Reply" />
</label>
</p>
</form>

I think maybe I didn't understand what you meant by redirect.  I assumed you wanted to submit the form without changing the current page.  In that case, you can acomplish what with:

<form name="reply_form" onSubmit='handleSubmit(this); return false;'>

You'll also need a few changes based on the API:

<@liaAddScript>
function handleSubmit(form) {
  ;(function($) {
    $.ajax({
      type: "POST",
      url: "${my_community}/restapi/vc/messages/id/${my_topic_id}/reply",
      data ({
        "message.body":form['message.body'].value,
        "message.subject":"${the_topic}"
      })
    });
  })(LITHIUM.jQuery);
}
</@liaAddScript>

As for syntax checking, if you're using Firefox, check Tools > Web Developer > Error Console after submitting to see if there are any Javascript errors.

xorrkaz,

Thanks again. I really appreciate your help.

I now have the form posting. It was the REST API call that was the problem. I didn't quite understand what was being passed.

Now I would like to redirect the page to the article where this reply was posted.

So the form shows the subject and the body of a featured article. the form replies to that article. I have the article URL defined as "my_url".

I was playing around with the handleSubmit calling another function whose only purpose is to open the new URL in the same window.

Something like

window.open (my_url,"mywindow"); 

Nothing I played with worked. I don't even know if this is what I should be doing, but any help would be appreciated.

Sorry for not being clearer earlier on. Often I don't know what I don't know;)

Cheers,

Jonathan

Why not just update the form action to go the page you want:

<form name="reply_form" action="${my_url}" onSubmit='handleSubmit(this); return true;'>

This would require you to build my_url using Freemarker.  I would also think calling this from the handleSubmit() method would work, too:

window.location.href=my_url;

Sorry, some browsers abort the async call if you replace the current page.  Try making the async call syncrhonous by adding

async: false,

Right below the "url:" line.