Jquery clashing with Elementor /wp-content/themes/sydney/js/scripts.js

I’m trying to place a form into a Sydney page using Elementor’s HTML widget:

(edit: I don’t now how to post snippets of code here properly so I’ve put a backslash in front of every “<”, which means the code shows ok but the formatting/indenting is messed up)

\<!DOCTYPE html>
\<html lang="en">
\<head>
 \<script src="contact/jquery-3.4.1.slim.min.js">\</script>
		\<script>
		\$(document).ready(function (e){
			\$("#frmContact").on('submit',(function(e){
				e.preventDefault();
				\$("#mail-status").hide();
				\$('#send-message').hide();
				\$('#loader-icon').show();
				\$.ajax({
					url: "contact/contact.php",
					type: "POST",
					dataType:'json',
					data: {
					"name":$('input[name="name"]').val(),
					"email":$('input[name="email"]').val(),
					"phone":$('input[name="phone"]').val(),
					"message":$('textarea[name="message"]').val(),
					"g-recaptcha-response":$('textarea[id="g-recaptcha-response"]').val()},				
					success: function(response){
					\$("#mail-status").show();
					\$('#loader-icon').hide();
					if(response.type == "error") {
						\$('#send-message').show();
						\$("#mail-status").attr("class","error");				
					} else if(response.type == "message"){
						grecaptcha.reset();
						\$('#send-message').hide();
						\$("#mail-status").attr("class","success");							
					}
					\$("#mail-status").html(response.text);	
					},
					error: function(){} 
				});
			}));
		});
		\</script>
		\<style>
		    #mail-status {
			    display:none; 
			    color: rgb(255, 0, 0);
		        }
		    input, textarea, button {
                width: 24%;
                border: 1px solid #f2f2f2;   
                border-radius: 4px;
                }
            label { color: white;}
		\</style>
	\</head>
    \<body >
        \<div class="container">
            \<script src='https://www.google.com/recaptcha/api.js'>\</script>
                \<form method="post" id="frmContact" >
                    \<label for="name">Your Name:\</label>\<br>
                    \<input id="name" name="name" type="text" maxlength="50">\<br>\<br>
                    \<label for="email">Email Address:\</label>\<br>
                    \<input id="email" name="email" type="text" maxlength="50">\<br>\<br>
                    \<label for="telephone">Telephone:\</label>\<br>
                    \<input id="phone" name="phone" type="text" maxlength="20">\<br>\<br>
                    \<label for="message">Message:\</label>\<br>
                    \<textarea id="message" name="message" rows="10" maxlength="6000">\</textarea>\<br>\<br>
					\<div class="g-recaptcha" data-sitekey="6LfptqMUAAAAAOZ2p31Z0nta8DVgXMb_n_G99Ock">\</div>	\<br>		
					\<button type="Submit" id="send-message" style="clear:both;">Send Message\</button>
                \</form>
					\<br>\<div id="mail-status">\</div>			
				\<div id="loader-icon" style="display:none; text-align:center; ">\<img src="contact/loader.gif" />\</div>
       \</div>
    \</body>
\</html>

but when I do, the page won’t load into a browser. Elementor’s editor won’t load, either. The reason appears to be this line:

    <script src="contact/jquery-3.4.1.slim.min.js"></script>

In my Firefox browser I get the following errors:

jQuery.Deferred exception: o.css(…).animate is not a function fade@http://s733208747.websitehome.co.uk/wp-content/themes/sydney/js/scripts.js?ver=5.2.1:4:3205 animate@http://s733208747.websitehome.co.uk/wp-content/themes/sydney/js/scripts.js?ver=5.2.1:4:7274 start@http://s733208747.websitehome.co.uk/wp-content/themes/sydney/js/scripts.js?ver=5.2.1:4:6546 r@http://s733208747.websitehome.co.uk/wp-content/themes/sydney/js/scripts.js?ver=5.2.1:4:1196 n@http://s733208747.websitehome.co.uk/wp-content/themes/sydney/js/scripts.js?ver=5.2.1:4:5179 t.fn[e]/<@http://s733208747.websitehome.co.uk/wp-content/themes/sydney/js/scripts.js?ver=5.2.1:4:7629 each@http://s733208747.websitehome.co.uk/contact/jquery-3.4.1.slim.min.js:2:2981 each@http://s733208747.websitehome.co.uk/contact/jquery-3.4.1.slim.min.js:2:1623 t.fn[e]@http://s733208747.websitehome.co.uk/wp-content/themes/sydney/js/scripts.js?ver=5.2.1:4:7533 @http://s733208747.websitehome.co.uk/wp-content/themes/sydney/js/main.min.js?ver=20180716:1:994 @http://s733208747.websitehome.co.uk/wp-content/themes/sydney/js/main.min.js?ver=20180716:1:1550 e@http://s733208747.websitehome.co.uk/contact/jquery-3.4.1.slim.min.js:2:29657 l/</t<@http://s733208747.websitehome.co.uk/contact/jquery-3.4.1.slim.min.js:2:29959

Everything loads fine when I remove the line, but without it the form won’t function, presumably because Elementor doesn’t support ajax.

I’ve tried earlier versions of jquery, and the page will load into a browser, but Elementor’s editor still won’t load.

Any ideas? Is there a way of calling my php code using a javascript function already built into Elementor?

Hello,

It looks like this issue requires close inspection, this goes beyond our support policy. As an option, you can contact Codeable for this kind of service, or find a reputable freelancer on Upwork. Hope for your understanding.

Kind Regards, Roman.
aThemes Support

Thanks for the reply.

May I rephrase my question?

Is it possible to use Jquery from within the Sydney theme? If so, how (ie, what .js library should I be loading)?

Hello, please check this link:
https://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/

Kind Regards, Roman.
aThemes Support

Thanks. It’s worked for all the jquery calls in my doce except ajax, which is my main requirement (I could use standard javascript for the rest)

Hello, you are welcome.

But as I mentioned above, this goes beyond our support policy, unfortunately.

Kind Regards, Roman.
aThemes Support