Can I have a submit in <% using (Ajax.BeginForm("ChangePassword", new AjaxOptions { OnComplete = "ChangePasswordComplete" })) without having a submit button on the form?
I yes, how? Let's say I want to submit the above when a user click on an input of type button simply?
You'd have to use Javascript to post back the form, jQuery has a submit method you can use.
$("#FormId").submit();
But really, an input of type button is the same as submit, only it submits automatically so you might as well use that.
Progressive Enhancement
Alternatively, you can use the jQuery Form plug-in to post a standard form (using Html.BeginForm or manually outputting the <form />) and that will work for people who don't have Javascript enabled on their browser.
Related
I have an admin form that updates a model via a html submit. I'd like to be able to send the form's contents to an Ajax modal dialog for a 'preview' via a link or button in the admin form.
Is there a way to send the form's contents to the modal dialog via Ajax without breaking the html submit? So far all I can do is get the data into the modal as html which breaks the js rendering. All the Ajax submit examples I find attach to the form which will break the html submit.
Suggestions and/or pointers are appreciated.
We are using Rails 3.2.12 for what it's worth.
I suppose it depends on how you are rendering your modal. If you're doing it server side and just need to get the form values to your ajax controller action you could do something like this with jquery"
$.post(ajaxUrl + "?" + $("#myform").serialize())
to generate a query string of your form values that you could sent to you ajax model.
Or if you're building the modal client side try
$("#myform").serializeArray()
to get an array of name, value pairs
This is what it took to get this to work under Rails 3.2.12
View:
<%= link_to 'Preview Promotion UI', admin_preview_promotion_url, id: :promotion_preview %>
The above link is inside the form do/end.
Javascript in application.js
$("#promotion_preview").live('click', (function (event) {
event.preventDefault();
$.post("/store/admin/promotions/preview",
$(event.currentTarget.parentElement).serialize().replace('=put&', '=post&'),
{},
"script"
);
}));
Rails.js injects some hidden code in the page that sets the type of response to PUT and then gets in the way of the routing. At least in this case simply replacing PUT with POST fixes things.
With this bit of code I can post my form updates as usual and activate a modal dialog "preview" using the form data.
I want to call an action (it does some filtering and send mails) from my GSP but I want to stay on that GSP. How to acoplish this? Thanks.
You have to use Ajax to submit your form.
Use the formRemote tag to achieve an Ajax submit.
Alternatively you could build it on your own by hooking into the onSubmit event of you form.
If you want to do this with a form, you can take a look on 'submitToRemote' tag: submitToRemote
but if you want to do it with a hyperlink... take a look on 'remoteLink' tag: remoteLink
I have a form_for an #object with two buttons.
While the first button renders the 'show action', the second button renders the same form again. So I'd like the latter to be ajax-handled.
Is it possible to have a non-ajax button and an ajax button in the same form or do I have to change strategy?
Maybe I need a form_for with 'remote: true' so that both the buttons are ajax but then, how would I manage the first button to render the proper 'show view'?
Or maybe the only real solution is to have two different forms?
Thank you.
You could try to hook onto the buttons onClick event, remove the data-remote="true" attribute, submit the form and add data-remote="true" again. I dont know if this is really the best way but it should work.
function sendWithoutAjax() {
$('my_form_id').removeAttr("data-remote");
$('my_form_id').submit();
$('my_form_id').data( "remote", "true" );
}
Something like this...
I think the easiest approach would be to use the jQuery Form plugin. Then you can just create the form to submit to your non-ajax action, and the ajax functionality will be attached to the submit button itself:
$(".ajax_submit_button").click(function() {
$(this).closest("form").ajaxSubmit({
// options go here
...
});
return false;
});
I am using jQuery's UI dialog to open a basic form. I want to submit that form and close the dialog. I am having trouble.
The parent window opens the dialog (which contains a partial view) from click and form is submitted, they the browser opens the partial view in the browser. I want it to do the form work and close the dialog.
Is there a way to do this VIA Ajax.SubmitForm or some other method.
You need to capture the onsubmit event of the form, send the form via Ajax, close the dialog and then Return False to prevent the browser from submitting the form again and doing a full page postback.
I found an ideal solution and can't believe that I couldn't solve it earlier. Simply use Ajax.BeginForm using the OnSuccess function of the AjaxOptions.
<% using (Ajax.BeginForm("Action", "Controller", new AjaxOptions { OnSuccess = "CloseDialog" })) { %>
<%= Html.Hidden("ID", ViewData["ID"]) %>
<input type="submit" value="Submit" />
<% } %>
function CloseDialog() {
$("#ImageCropModal").dialog("close");
}
This posts to the form without re-rendering the view. The I can close the dialog manually, after form post is successful.
I have a HTML form, and I have a Controller Action that accepts the POST request. Everything works with a regular submit button, but I would like to submit the form with a link (<a>-tag) instead, to be able to further control the formatting. Is there any way of doing this nicely built into the ASP.NET MVC Framework, or should I write my own extension method? Is it even possible to do this without javascript (I will use AJAX in the future, but it has to work without).
Here is a complete example. Note that this particular example does something fairly important: it has a fallback for browsers with JavaScript disabled.
If javascript and jQuery is enabled this effectively replaces all submit-buttons with links:
$("input:submit").hide().each(function (index, Element) {
var elm = $(Element);
elm.after($("<a href=#>" + elm.val() + "</a>")
.click(function () { elm.click(); })
);
});
Based on post linked to in the accepted answer.
I'm not aware of a helper and as far as I know it is impossible to submit a form using an anchor tag without using javascript.
You cannot 'submit a form' using a link (<a> tag) without Javascript. The javascript is going to generate a standard POST request (same as clicking a submit form button) behind the scenes.
There are other workarounds for those with JS disabled, look at what #Craig Stuntz submitted.