Question

I have a site where I use jquery ui tabs and in the first tab I display general information and on the second tab I have a form that I would like it to send back some information to the server via xml (ajax-style); update the database and subsequently return information for that same tab to update itself. It appears, however, that whenever a form is submited within a jquery ui tab that there is no way to prevent the “refresh”-style effect and handle the form in a way that the submit doesn’t effectively take place thus keeping the active tab still the same. I’ve tried several approaches such as onclick=”return 0;” onsubmit=”return 0;” and some snippets to cancel events but I don’t seem to be very successful. Has anyone gone through the same problem before?

Thanks!

Answer 1

If you want to do an ajax request, you can omit the <form></form> tag, so when the submit button is clicked, the form is not submitted (no refresh/postback) because the form and its action value doesn’t exist. Then just handle the submit button click event and do your ajax stuff from there.

I think you can also return false when the submit button is clicked. ie: <input type="submit" value="Go!" onclick="dostuff(); return false;">