Menu icon Foundation
Will Using Earlier Version of jQuery Cause Problems in Foundation 5?

My contact form will not work properly if I use Foundation 5's standard jQuery version 2.1.1, but it will work if I use jQuery version 1.10.1, which I have placed in my app.js file.

Does this mean that version 1.10.1 is now overriding version 2.1.1 completely, and if so, is using an earlier version of jQuery likely to cause problems anywhere else in Foundation 5?

If it is likely to cause problems, is it possible to load version 1.10.1 separately, so that it is only used by the contact form on the relevant page, therefore leaving version 2.1.1 to operate for the rest of Foundation 5 purposes?

Would version 1.10.1 need moving out of app.js into its own file, to stop it overriding version 2.1.1? I can't think how it can remain in the app.js file but not load for all jQuery purposes. Could I perhaps add a class to it, in the same way CSS classes can be applied selectively?

Thanks very much in advance.

jqueryjavascriptv2.1.1v1.10.1app.jsFoundation 5

My contact form will not work properly if I use Foundation 5's standard jQuery version 2.1.1, but it will work if I use jQuery version 1.10.1, which I have placed in my app.js file.

Does this mean that version 1.10.1 is now overriding version 2.1.1 completely, and if so, is using an earlier version of jQuery likely to cause problems anywhere else in Foundation 5?

If it is likely to cause problems, is it possible to load version 1.10.1 separately, so that it is only used by the contact form on the relevant page, therefore leaving version 2.1.1 to operate for the rest of Foundation 5 purposes?

Would version 1.10.1 need moving out of app.js into its own file, to stop it overriding version 2.1.1? I can't think how it can remain in the app.js file but not load for all jQuery purposes. Could I perhaps add a class to it, in the same way CSS classes can be applied selectively?

Thanks very much in advance.

David Sutoyo almost 5 years ago

You would need to load jQuery 1.10.1 with no-conflict mode to avoid overwriting 2.1.1, but in my experience using just 1.10.1 works with most of F5's components. For my WordPress work, I just use the jQuery bundled with WordPress (which is 1.11.1), and I don't load the file bundled with Foundation.

I created a page to test different versions of jQuery against Foundation's Kitchen sink:

http://davidsutoyo.com/labs/foundation-tests/

Hope this helps.

Michael almost 5 years ago

Hello, and thank you both for your replies.

The problem I was having with my contact form was that with 2.1.1 the error and success messages wouldn't display in their dedicated div (everything else worked, such as sending e-mails). I saw a similar problem reported on a WordPress forum and they said they solved it by using an earlier version of jQuery. I tried a slightly earlier version and it nearly worked - this time it actually used the error and success div, but inserted the whole of the php code into it instead. So, I tried version 1.10.1 and my contact form then worked perfectly.

I have no idea why it worked that way, but it would be nice to find out where the problem occurred and fix it so that my contact form works with 2.1.1. I presume it is something in the script for my contact form that pre-dates 2.1.1, but I have absolutely no idea whatsoever how to even approach looking into this!

I'm very much a beginner with all this, but I was wondering if it would be possible to make only my contact form use 1.10.1, then let everything else use Foundation 5's 2.1.1. Is that what a no-conflict loading is for? I can't see what actually makes my contact form use a particular version of jQuery. It has this to identify it:

<form id="ajax-contact" method="post" action="mailer.php">

Then in my app.js file I have the form's code, which I think identifies itself with this line:

 var form = $('#ajax-contact');

I'm not sure how it decides where to find the jQuery file though. My earlier (successfully working) version of jQuery 1.10.1 is directly above my contact form script, in app.js. I presume this overrides 2.1.1 otherwise my contact form wouldn't work.

As it happens, I don't think that there are any problems using 1.10.1, judging by David's jQuery test page, but it would be nice to use 2.1.1 as intended for Foundation 5.

Michael almost 5 years ago

This is the script that I am using for my contact form:

 $(function() {

  // Get the form.
  var form = $('#ajax-contact');

  // Get the messages div.
  var formMessages = $('#form-messages');

  // Set up an event listener for the contact form.
  $(form).submit(function(e) {
    // Stop the browser from submitting the form.
    e.preventDefault();

    // Serialize the form data.
    var formData = $(form).serialize();

    // Submit the form using AJAX.
    $.ajax({
      type: 'POST',
      url: $(form).attr('action'),
      data: formData
    })
    .done(function(response) {
      // Make sure that the formMessages div has the 'success' class.
      $(formMessages).removeClass('error');
      $(formMessages).addClass('success');

      // Set the message text.
      $(formMessages).text(response);

      // Clear the form.
      $('#name').val('');
      $('#email').val('');
      $('#message').val('');
    })
    .fail(function(data) {
      // Make sure that the formMessages div has the 'error' class.
      $(formMessages).removeClass('success');
      $(formMessages).addClass('error');

      // Set the message text.
      if (data.responseText !== '') {
        $(formMessages).text(data.responseText);
      } else {
        $(formMessages).text('Oops! An error occured and your message could not be sent.');
      }
    });

  });

});

Dave Ward almost 5 years ago

If mailer.php is returning HTML responses, you just need to switch from using .text() to .html().

Michael almost 5 years ago

Thank you. I'm not entirely sure what that means, but I presume it applies to the 'Set the message text' section at the end of the script. I'll experiment with that and see what happens.

Incidentally, the intermediate version of jQuery that I tried, which nearly worked, was version 1.11.1. That was the one that returned a whole load of php code and inserted it into the error/success div, rather than just the success message.

Thanks again for your help.