Menu icon Foundation
ZURB Template JS ordering - Abide events stop working

When using the ZURB Template, I've gotten into the habit of breaking my javascript into smaller files similar to how the building-blocks work. In fact, for now, I keep my component javascript under the js/building-blocks directory. For this discussion, I'm focused on a component that manages a registration form. Within the form-register.js, I setup some events for the form as folows: 

$("#register-form").on("formvalid.zf.abide", function(ev, el) {
	console.log("Form is valid ");
	$.ajax({
		url: "http://localhost:3000/users",
		data: $("#register-form").serialize(),
		method: "POST"
	}).done(function(data){
		window.location.href = "emailsent.html";
	}).fail(function(jqXHR, textStatus, errorThrown){
		console.log("Error: " + textStatus);
	});
});

$("#register-form").on("submit", function(ev) {
	ev.preventDefault();
	return false;
})

This code does not work, even though it is shown exactly like this in the Abide documentation. After a lot of tinkering, I believe I discovered that the call to $(document).foundation() in app.js seems to be affecting this. If I copy the code above and put it in app.js AFTER $(document).foundation(), then the code works as expected. Or, alternatively, in config.yml, I moved app.js ahead of form-register.js, and it worked that way too. So it seems that the call to $(document).foundation() is the culprit.

It appears that app.js is purposely put at the end of the list in config.yml, therefore, what's the right solution here? Is it in fact important that app.js (and the call to foundation() ) be at the end of the included javascript, or is it irrelevant?

 

I decided to move app.js ahead of form-register.js in the config.yml file, and sure eno

foundation 6abideconfig.ymljavascript ordering

When using the ZURB Template, I've gotten into the habit of breaking my javascript into smaller files similar to how the building-blocks work. In fact, for now, I keep my component javascript under the js/building-blocks directory. For this discussion, I'm focused on a component that manages a registration form. Within the form-register.js, I setup some events for the form as folows: 

$("#register-form").on("formvalid.zf.abide", function(ev, el) {
	console.log("Form is valid ");
	$.ajax({
		url: "http://localhost:3000/users",
		data: $("#register-form").serialize(),
		method: "POST"
	}).done(function(data){
		window.location.href = "emailsent.html";
	}).fail(function(jqXHR, textStatus, errorThrown){
		console.log("Error: " + textStatus);
	});
});

$("#register-form").on("submit", function(ev) {
	ev.preventDefault();
	return false;
})

This code does not work, even though it is shown exactly like this in the Abide documentation. After a lot of tinkering, I believe I discovered that the call to $(document).foundation() in app.js seems to be affecting this. If I copy the code above and put it in app.js AFTER $(document).foundation(), then the code works as expected. Or, alternatively, in config.yml, I moved app.js ahead of form-register.js, and it worked that way too. So it seems that the call to $(document).foundation() is the culprit.

It appears that app.js is purposely put at the end of the list in config.yml, therefore, what's the right solution here? Is it in fact important that app.js (and the call to foundation() ) be at the end of the included javascript, or is it irrelevant?

 

I decided to move app.js ahead of form-register.js in the config.yml file, and sure eno