The functionality of Jquery UI is not compatible with version 1.12

Incorporating jQuery UI into my current project has presented some challenges. Both the jquery-ui.min.css and jquery-ui.min.js files are version 1.12, so I opted for the latest jQuery version, jquery-3.2.1.min.js.

Specifically, I decided to test the datepicker() function, but unfortunately, it did not work as expected. Upon clicking on the input text field, nothing appeared. Below is an excerpt of my code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>jQueryUI</title>
   <link rel="stylesheet" type="text/css" href="jsui/jquery-ui.min.css">
   <script type="text/javascript" src="jsui/jquery-ui.min.js"></script>
   <script type="text/javascript" src="jsui/jquery-3.2.1.min.js"></script>
   <script type="text/javascript" src="js/jquery.form.js"></script>
   <script>
     $(function(){
       $( "#datepicker" ).datepicker();
     });
   </script>
</head>

<body>
<div>
  <input type="text" name="date" id="datepicker" />
</div>

</body>
</html>

Prior attempts using jQuery.min.js version 1.9 also resulted in failure. At this point, I am uncertain about what the issue may be. Can anyone offer assistance?

Answer №1

Ensure that jQuery is loaded before jQuery-ui for proper functionality.

Follow this specific order when including the scripts:

<link rel="stylesheet" type="text/css" href="jsui/jquery-ui.min.css">
<script type="text/javascript" src="jsui/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="jsui/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>

The example below demonstrates using CDNs for loading these libraries.

$(function(){
  $("#datepicker" ).datepicker();
});
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.min.js"></script>

<div>
  <input type="text" name="date" id="datepicker" />
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to deactivate a JavaScript function on a specific webpage using CSS?

I've implemented a JavaScript function that triggers a pop-up alert whenever a user attempts to navigate away from the site by clicking on an external link: $("a[target='_blank']").click( function() { return confirm('Please don&apo ...

substitute tags

Is there a way to change the tagName of a tag using jQuery? For example, if I have an HTML document and I want to replace all 'fieldset' with 'div'. Any suggestions would be appreciated! ...

Reversing text in mongodb

https://i.sstatic.net/Y61ML.png In my node.js and MongoDB 5 project, I am attempting to retrieve data where the field "TOTAL DUE" has a value other than '$0.00'. I have successfully selected records where "TOTAL DUE" equals '$0.00' usi ...

What is the best method for transmitting all parameters via a URL?

$(document).ready(function () { $("#submitButton").click(function () { var name = $("#name").val(); var age = $("#age").val(); var gender = $('input:radio[name=gender]:checked').val(); v ...

Using jQuery to iterate through JSON data obtained from a web service

In this code snippet, I am attempting to retrieve a JSON response from a PHP page and then iterate through it to display the name field of each JSON object. However, for some reason, nothing is being alerted out. <html> <head> <title>A ...

Is there a way to dynamically access BEM-style selectors using CSS modules?

For instance, I have this specific selector in my App.module.css file: .Column--active I want to access this selector from the App.js file in React using CSS modules. After importing all selectors from the CSS file as import styles from './App. ...

I am encountering an issue where the object I am sending with Next.js is appearing as undefined on the receiving page

When transferring data from my question screen to a result screen, I am using an object called footprintsData. Here is the code snippet for sending the data: const footprintsData = { carFootprint: roundedCarFootprint, electricityFootprint: roundedElect ...

Encountering an issue when trying to send data with Axios client to the child component

I'm encountering an issue while attempting to pass data to a child component for rendering. import axios from 'axios'; import React from 'react'; import MovieCard from './MovieCard'; import { useState, useEffect } from ...

In JavaScript, creating a new array of objects by comparing two arrays of nested objects and selecting only the ones with different values

I've been struggling to make this work correctly. I have two arrays containing nested objects, arr1 and arr2. let arr1 =[{ id: 1, rideS: [ { id: 12, station: { id: 23, street: "A ...

What is the best way to verify the existence of an email address?

I'm currently using the jQuery validation plugin and everything is working fine, but I've hit a snag when it comes to checking email addresses. The issue is that the plugin returns either true or false based on whether the email exists or not. Ho ...

I'm experiencing an issue with my API where it is returning invalid JSON data when I make a POST request using

I have a scenario where I am making a post request to my Next.js API for updating an address. The code snippet below shows the function that handles fetching: async function handleSubmit() { const data = { deliveryAddress, landmark, pincode, district, bl ...

Provide net.socket as a parameter

What is the best way to pass the net.socket class as an argument in this scenario? Here's my code snippet: this.server = net.createServer(this.onAccept.bind(this)); this.server.listen(this.port); } Server.prototype.onAccept = function () { // Ho ...

Access a folder in JavaScript using Flask

I need to specify a directory in a script. $images_dir = '{{url_for('.../pictures')}}'; In my flask application directory structure, it looks like this: Root -wep.py -templates -gallery.html -static -pictures The images are stored ...

What is the best way to retrieve the ID of the div where I have placed an element?

Enhance this content with a helpful link: conta.md/rafturi/kae/tester.php. In my project, there are 2 containers represented by div elements. One of the divs is draggable with a white background while the other black div is also draggable and may come fro ...

Utilizing Vue's Getter and Setter to manipulate data within the frontend, rather than relying on the raw values

I am completely new to Vue and finding it difficult to understand why I am facing this issue. Whenever I make a call to my backend in order to fetch some data, the response looks like this: id: Getter & Setter name: Getter & Setter season: Getter ...

Ensure there is a gap between each object when they are arranged in a

Is there a way to customize the layout of elements in the ratings view so that there is automatic spacing between them? I considered using text (white spaces) for this purpose, but it seems like an inefficient solution. Are there any other alternatives to ...

Using JavaScript to bring in npm packages

My understanding of javascript modules is still lacking. I recently embarked on a new project that required a library from npm. https://www.npmjs.com/package/random-color-pair After running npm i random-color-pair This created a "node modules" folder wh ...

Sending Objects Array in POSTMAN using Hapijs: A Step-by-Step Guide

Could you please assist me on how to send a POST request in POSTMAN for the given array of objects and then validate it using Joi in a hapi server? var payload = [{ name: 'TEST Name 1', answer: 'TEST Answer 1', category: &a ...

Are background styles complete without incorporating quotations?

Let's say I want to include a background image, my code might look like this: background: url(/images/button_bg.png) repeat-x scroll left bottom #146BAE However, when I check the code in Firebug, it shows: background: url("/images/button_bg.png") r ...

Having trouble reaching an element within a successful Ajax call

I have encountered an issue where the element is not being recognized when putting an ajax call inside another ajax call. Here is an example of the code: $.ajax({ url: 'controleFatAcoes.php', type: 'post', dataType: 'h ...