I have a page that lists users (List.vbhtml), and each user has an 'Edit' link. The edit link makes an Ajax request:
#Ajax.ActionLink("Edit", "Edit", "Player", New With {.id = currentItem.PlayerId}, New AjaxOptions() with { .UpdateTargetId="edit"})
The Edit method in my controller returns a partial view (_Edit) which contains a form. After the form has been submitted, I want to hide the edit form (not a problem), and then reload the list of users. This is what I am struggling with.
How do I let the parent view (List.vbhtml) know I should reload the list (which would be done using a Ajax Get request)?
I can't do this from the Edit partial view, because the Edit partial view shouldn't know about the List view, only the other way around (List view knows about the partial view).
My current solution is to raise a custom event when the edit is complete in _Edit.vbhtml, and capture it in List.vbhtml:
_Edit.vbhtml:
//let anyone listening know the edit is complete
$(document).trigger('PersonEditComplete');
List.vbhtml
//when player edit is complete, reload the player list
$(document).bind('PersonEditComplete', function () {
Player.List.Reload();
});
Thanks
You can use jQuery .ajaxComplete() event handler. You have to check if the XHR method is GET or POST. Get will be after loading user edit form, POST would be after subbmiting it.
So if ajaxComplete fires after POST call then you should refresh users list via Ajax.
Related
I am building an app where a user can submit a form using ajax and the form will submit and upon success will go back to the previous page and then load two more pages. Here is a little bit more info before I get to my code snippet
I have a list of items and want to add another item. I have a button that will open up an add item form. When I submit the form with AJAX and upon success I want to :
Go back to the list of items in history mainView.router.back() to refresh with newest item and then
Go to the item page mainView.router.loadPage() and then
Go to a task for that item automatically which is another page mainView.router.loadPage()
I want all these three actions done at once one after the other. Going back will prevent the user from using the back button and getting back at the form that has already been submitted, going to the item page will be there in case the user does not want to perform the default action of starting a task for the item. I have successfully tested and can perform any ONE of these actions, but cannot figure out how to call the router functions one after the other simultaneously.
...
var item_id = data.newItem.id;
mainView.router.back({
url: page.view.history[page.view.history.length - 2],
force: true,
ignoreCache: true
});
mainView.router.loadPage('http://app.myapp. com/item.php?id='+item_id);
mainView.router.loadPage('http://app.myapp.com/start-item-task.php?id='+item_id);
...
I'm working on a project with the following setup for a form submission which creates a POST that downloads a file
app ->
.setHandler 'eventForForm'
controller.submitForm()
controller ->
formView = newFormView
collection = collectionToUse
header ->
event: 'click': 'buttonClick'
buttonClick ->
triggerCallback to app for submit form
headerDom
<div>Button to Submit</div>
newFormView
init ->
submitForm()
submitForm ->
$form = $('<form></form>')
#code that adds it to the page with data required and css
$form.submit()
$form.remove() #remove it from dom
Everything works okay...Events are triggered, data is correct, and the form is submitted and the file is downloaded.
However after the .submit() event it doesn't really do a full page refresh just clears out all the data populated in the dom (the page is blank). But it hasn't navigated away from the page and it doesn't do a page refresh (which corrects the data missing as the views are then repopulated.
Not sure whats really going on as the setup of the views and event handlers seems correct.
Marionette.js version -> 1.8.0, jquery -> version 1.8.3
If you want a page refresh why dont you just add a
window.location.reload()
call to the end of your submitForm function?
I am working on Spring MVC. I have a page having list of items in table. I need jquery to pick up the radio selected and then user can click on view or edit or delete. According to the button clicked, ajax block invokes proper action with the form object serialized and the id goes to the action for processing.
Everything went fine till here.
Then, when the action returns back to ajax success: block
$.ajax({
type : "post",
data : str,
url : newUrl ,
async : false,
success : function(data) { <----- here
I need to redirect to page action has in its view object. Instead, as we know, its ajax, so I need to show the result in some div on that page itself. But I need to go to the page directed by spring action. Please help me do this.
In short, I don't want to show the details on a pop up but another page.
Thanks.
get url of page directed by page action and use following statement to redirect page
window.location = pathReturned;
above statement will simply redirect users' browser window. So if you may require to persist state of the page.
I am trying to perform an action on link click.In this case I want to call a method by clicking the anchor and not change the current site.
So You are on a site which is the news archive and now I want to delete a several post by clicking "delete Post".
After hours of looking for it on the WWW i dind't find anything whitout making use of a form.
is there any way to call a method by clicking and anchor?
Your view:
Delete this post
Your controller:
public function delete_post($post_id)
{
$this->load->model('my_model');
$this->my_model->delete_post($post_id);
}
I need a terse, clean way to implement this in asp.net mvc (+/- jquery or js)?
User clicks an element in webform A;
Webform B pops up;
User interracts with webform B;
On closing webform B, probably by a submit button, the source element in webform a is updated with a value from webform B
Thanks.
With ASP.NET MVC, I'd probably render a DIV on the page, initially hidden, perhaps via AJAX if the contents depend on values selected on the initial page. I'd use the jQuery UI dialog plugin to popup the dialog. The dialog could contain a form that submits back to the server. You could also use the onclose handler for the dialog to both copy values from the inputs in the dialog for use on the rest of the page. If you populated the dialog via AJAX you could have the server generate the HTML -- say by rendering a partial view and returning it -- or return json and generate the dialog on the fly in the browser.
I've resorted to using cookies. I've found this to be the only reliable way to do this. I'm using GrayBox for my dialog, so I have a function in the dialog that looks like this:
function selectValue(id, name) {
SetCookie("_someuniqueprefix_RetID", id);
SetCookie("_someuniqueprefix_RetValue", name);
parent.parent.GB_CURRENT.hide();
}
Then in my calling page I am launching the dialog which displays a partial in the GrayBox:
$(function() {
var selectUrl = '/_somecontroller/Select';
// attach a method to the chooseButton to go and get a list of
// contact persons to select from
$("#chooseButton").click(function() {
GB_showCenter('Select My thing', selectUrl, 500, 620, function() {
var id = GetCookie("_someuniqueprefix_RetID");
var value = GetCookie("_someuniqueprefix_RetValue");
DeleteCookie("_someuniqueprefix_RetID", "/", "");
DeleteCookie("_someuniqueprefix_RetValue", "/", "");
$("#MyID").val(id);
$("#MyName").val(value);
});
});
});
Also you'll need to grab a function off the web for SetCookie and GetCookie
Hope that helps
You can use javascript from the popup window to call functions on the opener via window.opener. So your popup could call a function on the parent page to pass the data back when the user clicks the submit button.
I'm not sure what your requirements are, but IMO using ajax for this sounds like overkill. If all you need is some form data from the popup webform passed to the opener webform, then there's no need to make a call to the server.