I have a shoppingcart control that lists the items in cart. Each row has a delete submit button that is wrapped around ajax.beginform that will call the controller, delete the item in cart and render the shoppingcart as partialview. The ajax and deletion works fine in IE and Firefox. In firefox only, after the submit button is clicked and ajax call is made, submit button is no longer visible. In IE it is visible. Following is the html. Why is is behaving wierd in firefox?
<form action="/Order/DeleteShoppingCartItem?ProductID=2"
method="post"
onsubmit="Sys.Mvc.AsyncForm.handleSubmit(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, updateTargetId: 'divTopRight' });">
<td style="vertical-align:middle">
<button type="submit" id="add-item-button" style="font-size:8px">X</button>
</td>
</form>
Are you wrapping your Ajax.BeginForm in a using statement? Are you sure you have your braces set properly? Sounds like you might be losing a form tag because of this. If so, can you post your view code instead?
Using Ajax.Actionlink instead of wrapping a submit button around Ajax.BeginForm solved the issue.
Related
I need an help on How to submit 2 form's POST methods both
with a one single click.
Suppose that I have two seperate forms
I want my secound form to be submited at the time I click on the first form action button.
You need to do this with Javascript
first place a button that is going to submit both forms like this in your html
<button type="submit" class='input_submit' style="margin-right: 15px;" onClick="submitBothForms()">submit both</button>
then your submitBothForm method has to includes these lines
document.forms["first_form_name"].submit();
document.forms["secound_form_name"].submit();
I have noticed that if you add a unobtrusive link in a refreshable partial view such as
<a href="/" data-delete-chapter="#Model.Chapter.ChapterId" class="delete-chapter" >
Delete
</a>
wired up in javascript file in order to do a (less ugly) Jquery popup delete confirmation):
$("[data-delete-chapter]").each(function () {
$(this).click( ...
then upon refresh of the partial view via ajax these javascript handlers dispappear so you end up having to refresh them each ajax call. You can do this with OnSuccess AjaxOption:
or directly in html as data-ajax-success such as my page previous button:
<a data-ajax="true" data-ajax-loading="#chapterAjaxImage" data-ajax-method="GET"
data-ajax-mode="replace" data-ajax-update="#chapterContainer"
href="ScrollChapterPrev/#(Model.VideoId)?pageNumber=#(Model.PageNumber)"
data-ajax-success="afterChapterRefresh()" class="gallery-prev">
<img src="#Url.Content("~/Content/Images/play/chapter-slider-prev.png")" alt="prev" />
</a>
however I feel that having
data-ajax-success="afterChapterRefresh()"
in the multiple places that refreshes my chapter list is not a lot less unobtrusive than making my original delete link use javascript thereby avoid the need to reference a refresh JS function:
<a href="javascript:deleteChapter(10)" class="delete-chapter" >
Delete
</a>
is there a better way or am I as close as unobtrusive that I can get in this special case?
Loading the content via ajax means , you are injecting something to the DOM , after the events ( click or whatever) bounded. So the newly injected elements wont have that event binding.
jQuery on would help. on will work on current elements and future elements
Change this
$("[data-delete-chapter]").each(function () {
$(this).click(function(){
//do something
});
});
to this
$(document).on("click","[data-delete-chapter]"(function(){
//do something
});
Is there any possibility of having a button which will execute and action in a controller without a form ?. Also, i would like do do something like this, but i see that's not possible:
<g:form action="addFavourite">
<td>
<g:submitButton name="${it.area.name}" value="Add" class="button small blue"/><br><br>
</td>
</g:form>
To name the button with a value that comes from a controller isnt working. Any possible alternative for that? It gives me a null-error-code. And i'm 100% sure the value isnt null..
You can create a button outside a form that executes a controller action when it's clicked using the remoteFunction tag
<button type="button" name="myButton"
onclick="${remoteFunction(action:'bookByName', controller: 'book'
params:'\'bookName=\' + this.value')}">Click Here</button>
It kind of depends. If you want a button to submit to a server via a standard POST then no. HTML doesn't even have a button that works without a form. You can fake this with an image link that looks like a button, but really it just submits via a standard anchor tag. And this would perform a GET, not a POST.
However, if you want to use ajax, you could skip the Grails tags (as I often do) and use the HTML BUTTON element. Could even use the remoteFunction to make the ajax call if you want.
UPDATE: Doh! 2 of the same answers. :)
What does "it" stands here for? I think that is the culprit..
<g:submitButton name="${it.area.name}" value="Add" class="button small blue"/>
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.
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.