Use jQuery in a Django App

This article will discuss a short introduction to jQuery. And we will also learn how to use jQuery in a Django app.

Use jQuery in a Django App

jQuery is, by far, the world’s most popular JavaScript library, being found on over 80% of the world’s 1 million websites. It was invented in 2006 by John Resig, and the popularity of jQuery is driven by a fundamental need in the web development market.

This short article will demonstrate how to connect jQuery with a Django app. In this app, we created a form with a date feature, but there is an issue that we are typing it manually, which is not much user-friendly.

Django jQuery Example 1

We will add a date picker feature to make it more user-friendly where the user can select the date from a calendar by clicking on the input field. It will be a pop-up calendar where we can choose the date, making the application easier to use.

We will need to do the several steps below to achieve it:

  • First is to download jQuery from this website and choose the current version because the older version does not work well with jQuery UI. We will go with the current version of jQuery and download the compressed file.
  • By clicking, we will open up the source code on the browser, save as, and navigate to where we have static asserts.

    Django jQuery Example 2

  • Choose your favorite theme and click on the download button. After reaching the next page, we will download it in the static directory.

    Django jQuery Example 3

  • Open an HTML file where the code is located and write the code somewhere at the bottom. These are all CSS files; generally, we like to put CSS at the top of the page.

    We are using the jquery-3.6.0.min version. If you are reading this article, you might need to change the jQuery version or the jQuery UI.

    Django jQuery Example 4

  • In our case, we will keep it at the bottom where the JS script is located.

    Django jQuery Example 5

  • Now, we will have to create a JS file on the JS folder located in our static directory, write this code in the JS file, and save it. If you want to use jQuery, you can create a separate file to write the jQuery code as we did.

    Django jQuery Example 6

  • Now, we will write a short script in the HTML file where the JS script is written. If you use a separate file, you can specify the name in your script path, as we defined custom.js in our case.

    Django jQuery Example 7

  • Let’s take a look if it is working or not. We can see that we can choose the date from the date picker.

    Django jQuery Example Output

Note: This article was for demonstration purposes, but the code and approach will be the same for using jQuery in Django. You can use jQuery for any purpose.

Write for us
DelftStack articles are written by software geeks like you. If you also would like to contribute to DelftStack by writing paid articles, you can check the write for us page.