I am using recapcha gem in my create users form. The form is submitting by ajax using data-remote=true attribute and then a create.js.erb template is rendered.
The idea is after, submitting the form:
if the user creation is successful to render a proper message
if the user creation is not successful to render the form again
with the corresponding errors
The issue is that, when a error appears (wrong recaptcha code for example) - the recaptcha input field is not rendered.
For now, in the create.js.erb file I have only the following line:
$('#b-register').html('<%=j render partial: 'security_users/sign_in' %>');
Why the #securirty_user object is automatically passed back to the partial when I am not using locals?
When I am rendering the same partial on error that I used initially, why the recaptcha input is missing?
If you want to have a "sign in" form with recapthca which is using ajax, you should not re-rendered the form.
What you should do is the following:
Make create.js.erb view to handle ajax request and in the controller add format.js.
In the new view instantiate JavaScript object which is holding the errors like this:
var current_errors = <%= raw #security_user.errors.to_json %>;
Then you are free to handle the errors as you want - add new elements displaying the error text or other, but if there is only one error:
Clear the password fields
Reload the recaptcha like this:
Recaptcha.reload();
Related
I have a grant_requests controller and I want all all of the actions to show up as "sponsored_licences" in the url.
My routes file has the following:
resources :sponsored_licences, as: :grant_requests, controller: :grant_requests
Going to new_grant_request_path works as expected; it routes to the sponsored_licenses/new url when the form is valid it posts correctly to the database.
However, when there are form validation errors and I render new_grant_request_path in the controller I get the Missing template error.
Redirecting will not work (I want to save the form data, etc.) and I am at a loss on how to correctly render the form. Is there something else I have to add to my routes file?
Try render :new if you're in the GrantRequests controller, otherwise, render "grant_requests/new"
I'm creating my first app in rails.
Basically, I have a new customer form, normally when you enter a new customer you are redirected to the record you created.
However as I am loading all my pages via ajax I want to load the new record in rather than re-direct to it.
I already have the form firing via ajax, I just need to know how I can access the new record URL to load it into my container.
Hope that makes sense. Thanks in advance!
You can add an option :remote => true to your form_for helper method, so that instead of page redirect the form gets posted via ajax.
For Ex :
<%= form_for(#post, :remote => true) do |f| %>
...
<% end %>
Then create a new template named create.js.erb which will get rendered after create method has been executed.
In this template, you can display the details of the new record you created.
For Ex :
$('some_element').replaceWith('<%=#posts.name %>');
Edit: You mentioned using load in your javascript. I would generally avoid this as you're making two round trips to the server. 1) Create 2) Get html to load into a div. Additionally, if there is an error that happens, it will be more difficult to catch and do the "good thing", whatever that might be.
Once you've added the remote: true option to your form, you need to deal with what happens on the server side of things.
Assuming your using REST, you'll have a controller with a create action in it. Normally, this method is creating the item and then subsequently returning the HTML for the create page. Instead of this, we need to create a javascript view for the action. This will tell the calling page what to when this action is hit.
Let's assume your form has a div called "new_record_form" and that you have another div called "new_records". You'll want to blank out the form elements in the form, effectively resetting it. You'll also want to add the new record to the "new_records" div.
To add the record to the new records div, you might do something like this.
$("#new_records").append("#{#new_record.name}");
When you submit the form, you should see this added. One great way to debug issues is to use the inspector. If you're in chrome, right click anywhere, inspect element and select network. Do this prior to form submission. You'll be able to see the ajax call and the response. Your logs will also be helpful.
Don't forget to blank out the form as well.
Note: You mentioned all your pages are ajax, but I highly suggest you evaluate if this makes 100% sense due to the various issues that result. Not saying this is the best article on the subject but might be worth a read.
I'm having a website http://1008designs.in/ There in the home page I have built a Enquiry Form, The form usual validation works fine, but I need Jquery & Ajax validation, the form submits to 'enquiry/add', Pls help me on how to use Jquery Ajax in cakephp 2.0, I gone through a video of Andrew Perkins, but It didn't work for me. If I submit the form, then the whole home page is displayed on that Enquiry Div. I'm trying it from a week, but not working, pls help me as soon as possible.
When you submit form with ajax to controller enquiry/add the html returend by ajax request is a view associated with this enquiry/add. If you want to customize this html you have to modify add action in controller:
At the end of the action try this:
if($this->request->is('ajax'))
{
$this->autoRender = false;
$this->render('/elements/enquiry_success');
}
And in app/view/elements/ add enquiry_success.ctp containing some html/php code which will be returned to #succces div (for example <p>Enquiry added!!!</p>).
This code detects if request is ajax and id it is it doesnt render default view for action but some element.
I have a wizard style page that I want to validate a page at a time. So before the user can move off the (partial) page I submit the inputs from the div for validation. Client side validation works OK but on some pages there are one or more fields I need to validate on the server. Yes I know about remote validation.
I can get the server side validation done without a problem. The issue I have is how do I display the errors on the correct fields? I can locate the fields in the div and find the span where the error message is suppose to go. But I just can't get the message to display.
I must be missing something when updating the field span. I would have thouht that there is a jQuery routine to add error information to a field. I need something similar to the controllers AddModuleError. So when I get return from my $.Post I can set error text on the appropriate fields.
Any suggestions?
A potential solution to your problem might be in this article "Client side validation after Ajax Partial View result in ASP.NET MVC 3"
Basically, once you get your html from the post you can invoke validation using jQuery.validator.unobtrusive.parse()
As per the example in the article;
$.post("YourAction", { data: <your form data> },
function(htmlContent){
$('#container').html(htmlContent);
jQuery.validator.unobtrusive.parse('#content')
}
Worth looking into
If you are using the included RemoteAttribute, or the version I linked to in my answer to your other remote validation question, then you should not have to worry about displaying the error, as both work with the ValidationMessage helpers to automatically display errors.
Have you added Html.ValidationMessage(...) or Html.ValidationMessageFor(...) for each field to be validated?
I'm requesting an ASP.net MVC view into a live box and the view contains form fields that have been marked up with attributes to be used by JQuery's unobtrusive validators plug-in.
The client script is not however working and my theory is that its because the validation framework is only being triggered on page load which has long since passed by the time the MVC view has been loaded into the live box.
Thus how can I let the validation framework know that it has new form fields to fix up?
Cheers, Ian.
var $form = $("form");
$form.unbind();
$form.data("validator", null);
$.validator.unobtrusive.parse(document);
// Re add validation with changes
$form.validate($form.data("unobtrusiveValidation").options);
You may take a look at the following blog post. And here's another one.
Another option, rather trick, which worked for me. Just add following line in the beginning of the partial view which is being returned by ajax call
this.ViewContext.FormContext = new FormContext();
Reference
For some reason I had to combine bjan and dfortun's answers...
So I put this in my view:
#{
this.ViewContext.FormContext = new FormContext();
}
And this execute this after the ajax call finishes:
var form = $("#EnrollmentForm");
form.unbind();
form.data("validator", null);
$.validator.unobtrusive.parse(document);
form.validate(form.data("unobtrusiveValidation").options);
I had a similar issue. I had a form that was using Ajax requests to re-display a part of the form with different form fields. I used unobtrusive validation by manually doing it on the client side using the
#Html.TextBoxFor
for my text boxes. For some reason the validation works when attempting to submit with invalid fields (i.e., the text boxes get outlined in red and the appropriate error messages display with the content I put in the
data_val_required
attribute, for example.
However, after I click a button that makes an Ajax request to modify the form with different fields and then submit again, only the red outline on the invalid fields display, but no error messages are rendered.
bjan's trick worked for me, but I still can't see what was causing the issue. All the HTML necessary to carry out the client-side validation was there I just can't figure out why the error message attribute values wouldn't display.
All I can think of is that the jQuery validation code doesn't make a second attempt to check the form fields after a submit was made.