Menu icon Foundation
Reveal + Ajax form post = Ajax doesn't work

UPDATE: Nevermind... I figured it out. Solution posted here:

http://stackoverflow.com/questions/41728558/how-to-make-foundation-6-ajax-post-not-close-reveal-modal-and-refresh-page

Leaving this here on the off-chance that someone else runs into a similar issue.

---

I know this topic exists here and in multiple places across the web (StackOverflow, etc.), but I've not been able to make this work, so I'm posting my particular situation in hopes that someone has an answer.

I'm working on a WordPress site that has an accordion. Each accordion item contains a post, and a uniquely-ID'd modal containing a form to allow users to post comments about that particular post to their own wall. The flow goes: user opens accordion item, clicks modal trigger, modal opens, they fill out form and submit, and their comment appears under their userID on their wall and other places on the site.

The issue I'm having is that the form post, done via Ajax to a PHP file on the server, does not work. Ideally, the person posts, but the modal stays open and the page doesn't refresh. What's happening instead is that when the user submits the form, the modal closes, the page refreshes, and the post action fails.

I've tried including event.preventDefault() in the jQuery .post() action, to no avail.

I've tried return false in the .post() action, to no avail.

I've tried event.stopPropagation(), to no avail.

Here's the most recent version of the jQuery .post() action, for what it's worth:

// .testform is the class applied to the form, a clone of which loads
// in each accordion item prepopulated with data from the post

$('.testform').on('submit',function(event) {
	event.preventDefault();
	var posturl = '/wp-content/themes/CustomTheme/assets/functions/postnotes.php';
	$.post( posturl, $( this ).serialize(), function(data) {
		console.log(data);
	});
});

So, to sum up, I need:

  • The form to .post() to the server for processing
  • The modal to stay open
  • The page to NOT refresh

Hints, clues, full-on assistance... anything appreciated.

AJAXrevealformpostaccordion

UPDATE: Nevermind... I figured it out. Solution posted here:

http://stackoverflow.com/questions/41728558/how-to-make-foundation-6-ajax-post-not-close-reveal-modal-and-refresh-page

Leaving this here on the off-chance that someone else runs into a similar issue.

---

I know this topic exists here and in multiple places across the web (StackOverflow, etc.), but I've not been able to make this work, so I'm posting my particular situation in hopes that someone has an answer.

I'm working on a WordPress site that has an accordion. Each accordion item contains a post, and a uniquely-ID'd modal containing a form to allow users to post comments about that particular post to their own wall. The flow goes: user opens accordion item, clicks modal trigger, modal opens, they fill out form and submit, and their comment appears under their userID on their wall and other places on the site.

The issue I'm having is that the form post, done via Ajax to a PHP file on the server, does not work. Ideally, the person posts, but the modal stays open and the page doesn't refresh. What's happening instead is that when the user submits the form, the modal closes, the page refreshes, and the post action fails.

I've tried including event.preventDefault() in the jQuery .post() action, to no avail.

I've tried return false in the .post() action, to no avail.

I've tried event.stopPropagation(), to no avail.

Here's the most recent version of the jQuery .post() action, for what it's worth:

// .testform is the class applied to the form, a clone of which loads
// in each accordion item prepopulated with data from the post

$('.testform').on('submit',function(event) {
	event.preventDefault();
	var posturl = '/wp-content/themes/CustomTheme/assets/functions/postnotes.php';
	$.post( posturl, $( this ).serialize(), function(data) {
		console.log(data);
	});
});

So, to sum up, I need:

  • The form to .post() to the server for processing
  • The modal to stay open
  • The page to NOT refresh

Hints, clues, full-on assistance... anything appreciated.

This post has been closed. No new replies can be added.