Develop Reference

Js scroll to view only when the submit complete

Hello I'm trying to scroll into the div only when the submit finishes with promisses
function submitForm(form) {
console.log("submitForm: ", form);
return Promise.resolve(() => form.submit());
}
async function submitFm (form) {
console.log("submitFm: ", form);
await submitForm(form);
};
submitButton.addEventListener("click", () => {
submitFm(form).then(() => {
console.log("should display after submit is done!");
});
});
The promise is suppose to work like this, does anyone knows what's missing ?
Thanks in advance

The submit() method on a form triggers form submission (and navigation to the result).
As soon as that is triggered, the submit() function finishes.
Then the promise resolves.
Then the then function executes.
Then the browser navigates to the new page.
There is no way for JavaScript running in a web page to directly cause JavaScript to run in the next page the viewport navigates to.
Unloading the current page will kill any JavaScript running in it. The next page, whether it be on the other end of a link, or a form submission or a call to location.reload(), etc. is a blank slate. Any JS in that page runs from scratch.
If you want to cause an effect in it you need to do so by passing a message through something that will persist between page loads.
Examples include a query string on the URL or the Session Storage API.
Then you need JavaScript in the next page to check for that message, act on it, and possibly clean it up so it doesn't effect the next page load.

If you submit a form base on form action, you need to pass the state to the next page. The simpler way is that use an anchor in the URL, URL with a hashtag will scroll to the element that id is the hashtag.
e.g.
<form action="/post/data#id" method="post"></form>
If you submit based on ajax or fetch, you redirect the URL when submitted, you also use hashtags. or you can persistence your data by Storage API, and control the scroll action on the next page.
If you use SPA frameworks like Vue React or others. You can use the router API to handle URL changes on submit. or handle scroll directly when form submits success.

Use jQuery to submit ajax form after all ajax calls are complete

I am using this WordPress plugin as a store locator on my website. On pages that do not have the interactive map, I have a form that that acts as a map search form.
In other words, I have a form with a location field. The user enters the location in the field and clicks the search button. When they click the search button, the page redirects to the page with the map and the location field is filled with the location entered on the previous page:
/* This is the search form on the page that does not have the interactive map */
$('#searchonly #wpsl-search-wrap form').submit(function(e){
e.preventDefault();
var loc = $('#searchonly #wpsl-search-wrap form #wpsl-search-input').val();
localStorage.setItem("loc",loc);
window.location.href = "http://localhost/inform/find-a-doc/";
});
/* This is the page with the interactive map */
jQuery(document).ready(function( $ ) {
var loc = localStorage.getItem("loc");
$('#wpsl-search-wrap form #wpsl-search-input').val(loc);
});
I now need the the search button on the page with the interactive map to automatically be clicked (or the form submitted) on page load.
There are a couple of roadblocks. The first is that I am using a WordPress plugin so editing the actual plugin files isn't an option. The second (this might not be a roadblock, I am not sure) is that the plugin is already running some ajax calls on page load. I would assume this means that the form submit button shouldn't be programatically clicked until the initial ajax is complete.
Here are the individual solutions I have tried. Each line break represents a different solution I have tried:
/* #wpsl-search-btn is the submit button for the form */
$(document).ajaxSuccess(function() {
$("#wpsl-search-btn").submit();
});
$(document).ajaxComplete(function() {
$("#wpsl-search-btn").submit();
});
$("#wpsl-search-btn").submit();
$("#wpsl-search-btn").trigger('submit');
None of those solutions are working and I am receiving no js errors in Chrome's inspector.
I'm not sure if this will help but here is the plugin's main js file.

Take a look at $.Deferred()
https://api.jquery.com/category/deferred-object/
You can bind promises that are executed after a request is processed.

I was able to answer my own question. This is the code that solved my problem:
var loc = localStorage.getItem("loc");
$('#wpsl-search-wrap form #wpsl-search-input').val(loc);
function clickBtn() {
$("#wpsl-search-btn").trigger('click');
}
$(document).one('ajaxComplete', function() {
clickBtn();
});

Fire a Javascript function after submitting a Gravity Form

I have a multi-page form where the url remains the same when moving between pages.
I am trying to change some HTML after the submit button has been clicked.
I can run this in the console and the result is as I want it.
How can I get this run after submit?
I've tried window.onload and document.onload functions but they are not working. I've also tried an onclick function but it seems moving to the next page stops this working?
var confirm = document.getElementById('gform_confirmation_message_14');
if(confirm) {
document.getElementsByClassName("entry-title")[0].innerHTML = "PAYE Worker";
}
Thanks

Perhaps the gform_page_loaded event? From the documentation it:
Fires on multi-page forms when changing pages (i.e. going to the next or previous page).
$(document).on('gform_page_loaded', function(event, form_id, current_page) {
// do stuff
});
There are a bunch of javascript events available, and if not this one, maybe another serves your purpose, e.g. gform_post_render.

I removed the Javascript completely and created a confirmation in Gravity Forms that redirects to a new page upon submission.
Created a title for this new page "PAYE worker"
Problem solved

Using ladda javascript before posting form

I'm trying to use this script for my login form submit button, but it's not working at all...
Script: http://lab.hakim.se/ladda/
Basically, i wan't to be able to show the loading indicator onclick and before it submits. Do any of you guys know how to do this ?.

Did you take a look at the README.md at Github? Try to follow the instructions and get back with specifics if you should not manage to make it work.

You need to catch the submiting form (im gona use coffeescript but you can transform it to its jquery javascript equivalent)
$("myform").on "submit" , (e)->
e.preventDefault()
data = $("myform").serialize()
ladda = Ladda.create($(#).find("submit-button")[0])
// in the version i use i have to use [0] because the ladda does not accept a jquery object, it needs a dom object
ladda.start() //this starts the animation
$.post("path/for/post",
data: data
).always ->
ladda.stop() //this stops the animation on any case fail or success

MVC 3: Communicating between partial view and view via JavaScript

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.