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.
Related
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();
I load some PartialView in page as response to Ajax form post. This partial contains two Ajax.ActionLink by self. After response load ActionLinks doesn't work properly - it send request to server but doesn't updates UpdateTarget with returned content.
Seems like jquery-ui provided widgets (like draggable) can't bind to elements in way like this (code placed in partial view):
$(function(){ $('#target').draggable();});
I would appreciate for any solutions.
PS> ActionLinks starts work after target id correction, but jquery ui steel don't work
seems #target is not avilable when your code is binding the handler..
try using live(), or delegate(), or .on()
Solved by add named function in PartialView and call it in OnSuccess for Ajax.BeginForm. As I discover document.ready fires for ajax-loaded content before page is really updated.
Although I read dozens of answers I could not find a solution.
I'm using MVC 3 with Razor. I have a simple Form with client validation via ajax. This part works fine. My problem is: In the update Action of my Controller I want to redirect to another Action. If the user disables Javacript, this works fine. But with javascript/ajax enabled, the redirectaction doesn't seem to work. Instead it looks like if some kind of partialview or something like that is executed.
My Controller/Action-code:
Function UpdateItem(Item As CItem) As ActionResult
' some validation code, save etc.
if everythingok then
Return RedirectToAction("Updatesuccess")
else
Return RedirectToAction("EditItem")
endif
End Function
My html page looks like (shortened/pseudo):
Logo image
H1
some text
<form>....</form>
When the form is submitted via ajax the new html code is added beyond "some text", so the form is replaced but everything above the replaced form stays on the page.
When ajax/javascript is disabled then after submit a whole new page is loaded. I checked the http headers and noticed, that with ajax there is no redirect (which is logical in some way because it is ajax).
What can I do? I want to redirect to a new page.
Is it possible to disable the ajax-submit and only use the "normal" form-submit?
I like the client validation via ajax while the user enters data and I want to use this, but for me it would be good enough, if the submit would be a "normal" submit.
I hope someone understands what I want and can help me.
Thanks.
I'm not a 100% sure I understand your question, but what the heck, don't downvote me :)
The problem is, redirect works via sending a HttpResponse with the redirect indicated in the headers, which the browser understands. If you submit via AJAX, it's not the browser that handles the request, it's your OWN JS code.
Here is the trick: instead of returning a redirect, return the Url (preferably as json), and then redirect manually using window.location.
I'm not fluent in VB, here is how I'd do it in C#:
var url = new UrlHelper(this.ControllerContext.RequestContext);
var link = url.Action("UpdateSuccess");
return Json(new {link});
and then in jQuery:
$.ajax({ method: 'POST',
url: 'your post url',
success: function(result) {window.location = result.link; },
// ... (passing form etc)
});
I have a button in JSP, when clicked, goes to a servlet stores a java object using request.setAttribute("attr", object) and forwards to another page. In that page, I am using a custom JSP tag which gets this attribute and displays some values. Now I want this all to happen using AJAX. I want to have only one page which submits a form and receives an object to be used by custom JSP tag in the same page. How do I do this ? Is there a reliable library for that ?
From what I see, in ajax I can send response by printing it which means I must send an XML back. If I do so, how do I convert it back to java object so that JSP tag can use it ?
Assuming your custom tag just displays some data, you could submit your form via ajax and return HTML. Then just push that HTML into a div. The HTML that is returned would be what your JSP with the custom tag renders, jQuery can help you out...
pseudo code:
$.post(url, params, function(htmlData) {
$('#results').html(htmlData);
});
On the server side, nothing would really change from the way you are handling it now. If you don't need to post a form but just submit some data via ajax, you could also use the load() function.
Your ajax request will only return XML if you return XML. The response type is entirely up to you.
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.