Support

Account

Home Forums Front-end Issues Ajax font-end save stopped working?

Solved

Ajax font-end save stopped working?

  • Hey all, I had an ajax save that was working but recently stopped. I haven’t touched the script other than to try to debug and I am stumped.

    Here is the save part of my script.

       // Ajax save
        acf.do_action('ready', $('body'));
    
        $('.acf-form').on('submit', function(e){
            e.preventDefault();
    	console.log("form submit 1");
        });
    
    	acf.add_action('submit', function($form){
    		console.log("form submit step 2");
    		$.ajax({
    			url: window.location.href,
    			method: 'post',
    			data: $form.serialize(),
    			success: function(data) {
    					$("a.save").removeClass("saveActive");
    					$("a.save").addClass("saveComplete");
    					$("a.save i").removeClass('fa-spinner');
    					$("a.save i").addClass('fa-thumbs-up');
    					$("#saveText").html("Saved");
    					
    					setTimeout(function(){
    						$("a.save").removeClass("saveComplete");
    						$("a.save i").removeClass('fa-thumbs-up');
    						$("a.save i").addClass('fa-save');
    						$("#saveText").html("Save");
    					}, 3000);	
    			}
    		});
    	});

    If I take out e.preventDefault(); the form submits and saves the post. If I leave in e.preventDefault(); the add_action(“submit”) doesn’t fire. I obviously don’t want the page to refresh, is there something obvious that I am missing?

    Thank you, I appreciate any help I get.

  • It was working before and now it’s not working I would look for a PHP error happening during the AJAX request that is causing it to fail. Have you updated anything lately? It could be a change in something else causing the issue.

    Turn on error logging and see if there are any errors in the log.

    Are you getting any response from the server? try adding a complete section to your request and see if anything is returned

    
    ......
    complete: function(data) {
      console.log(data);
    }
    
  • Hey John, I was able to solve this by moving the ajax save completely into my own function. Here is the function in case anyone finds this later:

    $('.acf-form').on('submit', function(e){
            e.preventDefault();
    		
    		// define the form data
    		let $form = $(e.target);
    		
    		// submit the form
    		$.ajax({
    			url: window.location.href,
    			method: 'post',
    			data: $form.serialize(),
    			success: function(data) {
    					$("a.save").removeClass("saveActive");
    					$("a.save").addClass("saveComplete");
    					$("a.save i").removeClass('fa-spinner');
    					$("a.save i").addClass('fa-thumbs-up');
    					$("#saveText").html("Saved");
    					
    					setTimeout(function(){
    						$("a.save").removeClass("saveComplete");
    						$("a.save i").removeClass('fa-thumbs-up');
    						$("a.save i").addClass('fa-save');
    						$("#saveText").html("Save");
    					}, 3000);	
    			}
    		});
    		console.log("form submit 1");
    	});

    I don’t know why it stopped working. Something about the e.preventDefault() stopping this:

    acf.add_action('submit', function($form){
    		
        // old ajax code was in here
    		
    	});
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.