Foundation and Ajax

Hi, I’ve added some ajax capabilities to my webapp coded in jsp and servlets. I implemented foundation zurb 6.6.1 for my jsp pages. I had to add a jquery external in order to get ajax to work

script src=“https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”>

now I wondering, Is there a better method?, I mean, didn’t foundation come with jquery? why ajax won’t work without an additional jquery library? Can these two libraries conflict with each other?

by the way, here’s my ajax function:

$(document).ready(function() {
	$("button").click(function(){
		$.ajax({
			url : '../ChrisAjax',
			data : {
				userName : $('#userName').val()
			},
			success : function(responseText) {
				$('#ajaxGetUserServletResponse').append(responseText);
			}
		});
	});
});

AJAX is a concept. jQuery is a library. jQuery/$.ajax is a function / method to do AJAX requests. Foundation requires jQuery but does not ship with it. This is also mentioned inthe docs.

https://get.foundation/sites/docs/javascript.html#installing

Thanks Daniel for the explanation. However as a newbie I’m a bit confused now. I got foundation from a file (link on homepage) Foundation-6.6.1-CSS-project.zip and started editing it adding my implementation to other frameworks. Everything was working fine even thought NO jquery library have been added. Then I added the Ajax function mentioned above and it didn’t work until that link to the jquery was added, but foundation was perflectly fine. Now I was just worried of conflicts…

The app.js file already contains jQuery 3.3.1 so you don’t have to include it.

Make sure that you load all js files right before </body> and load the app.js file and then your additional code.

Can you provide a small repository with the code so we can reproduce this?

I just dediced to go with native/pure javascript code for ajax:

var xhr = new XMLHttpRequest();
xhr.open(‘GET’, ‘…/ChrisAjax?userName=TEST’);
xhr.onload = function() {
if (xhr.status === 200) {
alert('User’s name is ’ + xhr.responseText);
}
else {
alert('Request failed. Returned status of ’ + xhr.status);
}
};
xhr.send();

I get the same result and I don’t have to bother for more jquery libraries. Thanks anyway Daniel.

I checked and indeed jquery is shipped with the app.js
I wish Foundation went with plain / vanilla javascript though, that would boost the overall performance enormously

This is planned for Foundation 7.

1 Like

Wow, this is awesome news! Can’t wait for it to be released :slight_smile: