Coder Legion - Recent posts tagged jquery

How to get full path of uploaded file in html using JavaScript

Sun, 29 Mar 2026 01:52:58 +0000

We know java Script refers to a client side scripting language. In case we consider you are trying to get the users system folder path. Basically you can’t do this. It is barely allowed to fetch the directory structure or path.

Photo by Rachel Vine

Step 01 - Absolute path of a file
Step 02 - JavaScript to get the full path of file:
Step 03 - Store the value of the JavaScript variable image Path in the MySQL database
Conclusion

Absolute path of a file:

If you wish to get the absolute path of a file you can choose the jQuery attr() method. In addition, in the web page a file such as image, pdf, docs is display by giving its path to src attribute of an element. Now, you need to control that element’s id or class. After that usage the .attr() method to catch the src value.

Code:

var absolutePath=$("elementId").attr("src");

In case you are able to catch absolute path as:

/dir1/pdf/grapes.pdf

Later on, you need to add the domain URL before of it because ‘/’ explains the root directory for the domain.

JavaScript to get the full path of file:

Try this code:

Next step set this JavaScript function within the head tags. The forms on submit value set the function name as well.


    
    function getPath() {
        var inputName = document.getElementById('file1');
        var imgPath;

        imgPath = inputName.value;
        alert(imgPath);
    }

...

Store the value of the JavaScript variable image Path in the MySQL database:


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    
    
    
    This is a test
    
    function getPath() {
    var Form = document.forms['frm_upload'];
    var inputName = Form.elements['file1'].value;

    var imgPath = inputName;
    Form.elements['file_src'].value = imgPath;
    }
    
    

    
    " onSubmit="getPath();">
    

    
    
    
    <?php
        echo stripslashes($_POST["file_src"]);
    ?>

Conclusion

Hope it helped.

Typeerror: $(...).autocomplete is not a function

Wed, 14 Jan 2026 12:41:10 +0000

Have you ever come across an error message that goes something like "Typeerror: $(...).autocomplete is not a function"? It can be quite a head-scratcher, especially if you're new to coding. But don't sweat it - we've all been there. This error typically pops up when you're working with jQuery UI,and it indicates that the autocomplete method isn't being recognized or found. This might be due to a variety of reasons, like a missing library or a loading sequence issue which can be solved by re-arranging the loading sequence correctly. Let's dive into this error and find ways to fix it.

What is jQuery UI?

jQuery UI is a comprehensive set of components designed for user interface interactions, effects, widgets, and themes. It is built using the jQuery JavaScript Library. It's all about making web development fast and easy. Whether you're building highly interactive web applications or just need to add a date picker to a form control, jQuery UI is the perfect choice. It provides a powerful platform that helps you to design a user-friendly and interactive web interface. Its rich set of features includes autocomplete, drag and drop, modal functionality, and slider among others. Plus, it's compatible with a wide range of browsers, making your life as a developer a whole lot easier!

What causes that error to occur?

Firstly, this error may occur when the jQuery UI library isn't correctly linked or simply missing from your project. The autocomplete functionality is a part of the jQuery UI, not the basic jQuery library. Hence, if jQuery UI isn't correctly integrated, the autocomplete method won't be available, leading to this error.

Secondly, the loading sequence of your scripts also plays a significant role. The jQuery core library must be loaded before the jQuery UI library because jQuery UI is essentially an extension of the core jQuery library. If the jQuery UI script is loaded first, it won't find the jQuery object it needs to extend, and thus, you'll encounter the "Typeerror: $(...).autocomplete is not a function" error.

Tip When you see this error, it's basically the script's way of telling you, "Hey, I can't find the autocomplete function to use here. Please check if you've linked all necessary libraries and the order they're loaded in.

The scenario of producing that error

Let's say you have an input element for vegetable names and you are using the autocomplete method from the jQuery UI, so when the user starts to enter characters, the input suggests names that include those characters.

First, you will need to include the scripts for jQuery and jQuery UI, then include the input, and lastly include another script element to use the autocomplete method. So the code for example will be like this:

<!DOCTYPE html>




jQuery UI





Vegetable Name



const vegetables = ["Broccoli", "Spinach", "Kale", "Carrots", "Peas", "Bell peppers", "Sweet potatoes", "Garlic", "Onions", "Beetroot"];

$(function() {
$("#vegetableName").autocomplete({
source: vegetables
})
});

All seems fine so far, but when you load this HTML document you will get our "Typeerror: $(...).autocomplete is not a function" error and that's because of the order of these two lines:

The solutions

Solution 1: Load the libraries in the correct order

The order in which you load your libraries matters. The jQuery UI components are built on the jQuery library, so the jQuery library like the parent. Therefore, your HTML script tags should first include the jQuery library ( the parent ) and then the jQuery UI ( the sibling). The scripts are loaded sequentially, so the order should be like:

Solution 2: Check for conflicts

JavaScript libraries, other than jQuery, might use the "$" variable, just like jQuery does. This can cause conflicts with jQuery. By using "jQuery.noConflict()", you hand back control of the "$" variable to whichever library first implemented it. After you do this, "$" will no longer represent "jQuery": instead, you'll need to use the full word "jQuery" to call any jQuery functionality.

Solution 3: Re-initialize the widget

Sometimes, you might have all the scripts properly loaded and in the correct order, but the page itself doesn't load correctly, or some other script interferes with the initialization of the autocomplete widget. In such a case, re-initializing the widget after the page has fully loaded might help. You can do this by placing your autocomplete initialization code inside a "$(document).ready()" function, which ensures that the entire page (DOM) is fully loaded before the script runs.

Solution 4: Check the jQuery version

The jQuery Autocomplete function is a feature of jQuery UI, not the jQuery core library. Ensure that you're using a version of jQuery that supports the autocomplete function. For example, if you're using jQuery 1.3.2, the autocomplete function may not work because it was introduced in jQuery UI 1.8, which requires at least jQuery 1.4.2 to function correctly.

Conclusion

In conclusion, troubleshooting jQuery's autocomplete function might seem a little daunting at first, but with a systematic approach, you can resolve most issues easily. Remember to check the order of script loading, look out for conflicts, check the jQuery version, and don't forget to re-initialize the widget if needed. Keep these tips in your coding toolkit and you're sure to have a smoother journey navigating the world of jQuery. Happy coding, folks

How to get radio button value in jquery

Wed, 14 Jan 2026 12:36:24 +0000

How to Get Radio Button Value in jQuery ?

Radio buttons are an input element that allows users to select only one item from a list. When working with forms and user interactions, retrieving the selected value of a radio button is a regular operation. This article will show you how to use jQuery to get the value of a radio button.

What does it mean by Retrieving Radio Buttons Value in jQuery?

Retrieving radio button values with jQuery refers to the process of finding out and gathering an option of choice from a group of radio buttons in a web form using the jQuery library, a useful tool for simplifying JavaScript code. Radio buttons are typically used when users must choose a single option from a list of options.
Developers may use jQuery to write code that monitors for user input with these radio buttons. When a user clicks a radio button to make a selection, jQuery assists in determining which button was pressed and retrieving the value associated with it. This value can be used to process form submissions, update web content, or trigger particular actions based on the user's selection.

Syntax:

Syntax for jQuery code

$(selector).action();

$: Represents the jQuery library symbol, providing access to its functions.
selector: Identifies the HTML element(s) to be targeted, similar to how CSS selectors work.
action(): Denotes the specific jQuery action to be performed on the selected element(s), such as modifying content, applying styles, or handling events.

Getting the Values of Radio Buttons:

To get the value of a radio button using jQuery, you can use the following methods:

1. Getting Radio Selected Value Using Class

In this method, you'll give the radio buttons a class and then use that class to target the selected radio button.

HTML:
Add the class="fruit-radio" attribute to each radio button.
```
 Apple

 Banana

 Orange
```
jQuery:
Then use the class selector .fruit-radio in the script.
```
$(document).ready(function() {

    $(".fruit-radio").on("click", function() {

        var selectedFruit = $(".fruit-radio:checked").val();

        console.log("Selected fruit using class: " + selectedFruit);

    });

});
```
- Each radio button in the group has the class "fruit-radio" applied to it.
- The.fruit-radio:checked selector is used to target the radio button with the class "fruit-radio" that is presently checked.
- The .val() method retrieves the value of the selected radio button.
This is how the output is shown on the webpage:

2. Getting Radio Selected Value Using Attribute Name with Value

In this approach, you'll target the radio buttons using the [name="fruit"] attribute selector and choose the checked one with :checked.

HTML:
Add the name="fruit" attribute to each radio button.
```
 Apple

 Banana

 Orange
```
jQuery:
1. $(document).ready(function() { Ensures the code executes after the document is fully loaded.
2. $("[name='fruit']").on("click", function() { Sets up a click event listener for the radio buttons with the name attribute set to "fruit".
3. var selectedFruit = $("[name='fruit']:checked").val(); Retrieves the value of the clicked radio button that is currently checked (selected).
4. console.log("Selected fruit: " + selectedFruit); Logs the selected fruit value to the console.
```
$(document).ready(function() {

    $("[name='fruit']").on("click", function() {

        var selectedFruit = $("[name='fruit']:checked").val();

        console.log("Selected fruit using attribute name with value: " + selectedFruit);

    });

});
```
- The attribute selector [name="fruit"] targets all elements with the attribute name set to "fruit".
- The :checked selector narrows down the selection to the radio button that is currently checked.
- The .val() method retrieves the value of the selected radio button.

Tip If you're working with more complex forms, consider using labels and CSS classes to make your code more organized and readable.

3. Getting Radio Selected Value Using Attribute Type and Value

In this method, you'll use the [type="radio"] attribute selector to target the radio buttons and :checked to select the checked one.

HTML:
Add the type="radio" attribute to each radio button.
```
 Apple

 Banana

 Orange
```
jQuery:
```
$(document).ready(function() {

    $("[type='radio']").on("click", function() {

        var selectedFruit = $("[type='radio']:checked").val();

        console.log("Selected fruit using attribute type & value: " + selectedFruit);

    });

});
```
- The attribute selector [type="radio"] targets all radio button elements on the page.
- The :checked selector filters the selection to the radio button that is currently checked.
- The .val() method retrieves the value of the selected radio button.
In each of the three methods, the code listens for a click event on the radio buttons with the name "fruit." When a radio button is pressed, the value of the selected fruit is obtained using the proper process. The output is logged to the console, indicating the method's chosen fruit.
Using these three approaches, you may pick the way that best matches your coding style and project needs while still accomplishing the same purpose of getting the selected radio button value.

Caution Ensure that your radio buttons have unique values within the same group to avoid confusion when retrieving values using jQuery.

Some Alternative Approches

There are some alternative approaches for capturing the selected value of radio buttons using jQuery:

1. Using the .change() Event

The '.change()' event is triggered when the value of an input element changes, typically when a user interacts with it. It is specifically designed for capturing changes in input elements, making it an ideal choice for radio buttons.

$(document).ready(function() {

    $(".fruit-radio").on("change", function() {

        var selectedFruit = $(".fruit-radio:checked").val();

        console.log("Selected fruit using .change() event: " + selectedFruit);

    });
});

2. Using the .click() Event

The .click() event is triggered when an element is clicked. It's a common way to handle user interactions.

$(document).ready(function() {

    $(".fruit-radio").click(function() {

        var selectedFruit = $(".fruit-radio:checked").val();

        console.log("Selected fruit using class: " + selectedFruit);

    });

});

However, for radio buttons, using the .click() event might not be the most optimal choice, as it won't cover all scenarios, such as keyboard navigation.

In simple words, this article will explain to you how to use jQuery to understand and capture your radio button selections. Websites get smarter and more engaging as a result of this.

References

Here are some reference links related to jQuery:

jQuery Official Website
https://jquery.com/
jQuery Attributes
https://api.jquery.com/category/attributes/

How to solve this problem "Uncaught TypeError: $(...).datetimepicker is not a function"

Wed, 14 Jan 2026 12:32:14 +0000

How to solve this problem "Uncaught TypeError: $(...).datetimepicker is not a function".

When we use the datetimepicker from http://eonasdan.github.io/bootstrap-datetimepicker/ , we often find the below error.
"Uncaught TypeError: $(...).datetimepicker is not a function"
The reason of this error is the mistake of importing the datepicker plugin or formatting. We can fix it very easily. From now I’ll explain about it.

2. What is the problem

The datetimepicker is a jQuery plugin that provides a user-friendly way to select dates and times in web applications. It enhances the standard HTML input fields for date and time by adding a calendar and time picker functionality.
With the datetimepicker plugin, users can easily select dates from a calendar and choose the time using a dropdown or a spinner. It offers various customization options, such as date and time format, minimum and maximum date limits, localization, and more.
The plugin is commonly used in web forms, booking systems, event management applications, and any other scenario where date and time selection is required.
The problem raised here is that errors occur in the process of using datetimepicker.
"Uncaught TypeError: $(...).datetimepicker is not a function"

3. What is the cause of the problem

The error message "$(...).datetimepicker is not a function," typically occurs when the jQuery datetimepicker plugin is not properly loaded or initialized.

4. How did you reach this problem

There are several ways you can encounter the error message "$(...).datetimepicker is not a function." Here are a few common scenarios:

Missing or incorrect script inclusion:

If you haven't included the necessary JavaScript files for the datetimepicker plugin or if the file paths are incorrect, the plugin won't be loaded properly. Make sure you have included the jQuery library and the datetimepicker plugin script in your HTML file, and verify that the file paths are accurate.

Script loading order:

The datetimepicker plugin relies on the jQuery library, so it needs to be loaded after jQuery. If you have included the datetimepicker script before jQuery, it can result in the error. Ensure that you have included the jQuery library before the datetimepicker plugin script.

Conflicts with other libraries or plugins:

If there are conflicts between the datetimepicker plugin and other JavaScript libraries or plugins you are using, it can cause the error. Conflicts occur when multiple libraries define the same function name. To avoid conflicts, you can try using the jQuery.noConflict() method or check if there are any conflicting scripts in your code.

Incorrect initialization:

If you haven't properly initialized the datetimepicker plugin on the desired element(s), you may encounter this error. Make sure you are calling the .datetimepicker() function on the appropriate element(s) in your JavaScript code.
By reviewing these potential causes and troubleshooting steps, you should be able to identify and resolve the issue with the datetimepicker plugin.

5. How to solve $(...).datetimepicker is not a function issue?

Here are a few steps you can take to troubleshoot and resolve the issue:

Make sure you have included the necessary dependencies:

Ensure that you have included the jQuery library and the datetimepicker plugin in your HTML file. You can do this by adding the following script tags to your HTML file:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="path/to/datetimepicker.js"></script>

Replace "path/to/datetimepicker.js" with the actual path to the datetimepicker plugin file on your server.

Check the order of script inclusion:

Ensure that you have included the jQuery library before the datetimepicker plugin. The datetimepicker plugin relies on jQuery, so it needs to be loaded after jQuery.
Verify the plugin initialization: After including the necessary scripts, make sure you are initializing the datetimepicker plugin correctly. You can do this by calling the .datetimepicker() function on the appropriate element(s) in your JavaScript code. For example:

$(document).ready(function() {
     $('#datetimepicker').datetimepicker();
 });

Replace #datetimepicker with the ID or class of the element you want to attach the datetimepicker to.

Check for conflicts:

Ensure that there are no conflicts with other JavaScript libraries or plugins you might be using. Conflicts can occur if multiple libraries define the same function name. You can try using the jQuery.noConflict() method to avoid conflicts.
If you've followed these steps and the issue persists, please provide more details about your code and any error messages you're receiving, so I can assist you further.

Why I'm Still Using jQuery in 2025 (Never gonna give you up)

Fri, 07 Nov 2025 02:22:24 +0000

While grinding through the monumental JuggleBee upgrade, one of the recurring debates was: what do we modernize, and what do we leave the heck alone? Plenty got a shiny new coat of paint (see my earlier posts for all the juicy details), but one area I deliberately left untouched was the frontend JavaScript. These days, jQuery is seen as a relic of a bygone era — a noble steed well past its sell-by date. Hotwire now ships as the Rails 8 default, and heavyweight contenders like React and Vue have taken over the frontend spotlight.

Why I Kept It

So why didn’t I replace it with Hotwire or Stimulus when doing the big Rails 8 overhaul?

Because honestly... it still slaps.

Sure, jQuery has fallen out of favour, and yes, I could’ve followed the modern path. But here’s the reality:

It still works. Flawlessly.
The architecture is solid. It keeps behaviour modular and scoped. No random scripts firing across unrelated pages.
It’s expressive and readable. You can look at the markup and know exactly which components will be applied.
Rewriting it would’ve cost me weeks — and yielded very little gain for the effort.

It’s easy to chase shiny new frameworks. But this setup? It’s already solved the very problems frameworks like Stimulus are trying to address — just in our own way, before they existed.

"Technical debt isn't defined by age. It's defined by pain."

This jQuery-based framework causes me zero pain. It’s clean, consistent, and extendable. And I’m not paying a complexity tax for keeping it around.

A Beautiful Framework

Back in the yonder years, when development on JuggleBee first commenced, jQuery was king. "Write less, do more" as the slogan proudly declared. These were the days before Turbo, pre-SPAs, when frameworks like React were still internal tools being tinkered on at Facebook. Even then, I liked my code clean, purposeful, and targeted. Every function should do its job — and only its job — exactly where it’s meant to. The typical jQuery spaghetti of the time grated on me.

Take this scenario: I’ve got a lovely Select2 dropdown on the listings page to filter by category. All good. But why is that whole library still being pulled in and initialized on the About Us page, which has no dropdowns in sight? This was a symptom of how jQuery scripts were commonly written — everything ran everywhere. I wanted modularity, not mayhem. And so, the “Behaviour Framework” was born.

So what exactly did we build?

In essence, it's a lightweight, declarative behaviour system — think of it like a primitive version of Stimulus or Alpine. Components declare themselves in the markup, and a central engine takes care of the wiring when the DOM loads. This means zero manual JS in our views, and zero unnecessary script execution across unrelated pages.

Let me show you how it works...

At the heart of it all is the Behaviour class. Its role is simple but powerful: register UI components and apply them only when needed — and only on the elements that require them. Here's a high-level look at how it works under the hood:

// Note: classes didnt exist so the "Class" we're calling below is a custom implementation
Framework.Behaviour = new Class({
  filters: {},
  addFilter:function(name, instantiator){
    this.filters[name] = instantiator;
  },
  addFilters:function(filters){
    for (const filter in filters){
      this.addFilter(filter, filters[filter]);
    }
  },
  apply:function(wrapper){
    this._scan(wrapper, $.proxy(this._apply, this));
  },
  unapply:function(wrapper){
    this._scan(wrapper, function(target, behaviourClassName){
      var behaviourResult = target.data('getBehaviourResult')(behaviourClassName);
      if (typeof behaviourResult.deinit === 'function'){
        behaviourResult.deinit();
      }
    });
  },
  // rest of the implentation ...
});

This allows us to define small, focused components — like a date picker — in total isolation. No global bleed. No script soup. Just self-contained behaviour.

One of the earliest components we wrote using this system was actually said date picker. At the time, we were using Bootstrap and jQuery UI plugins — each with their own quirks. So we wrapped them up into their own isolated modules, making them easier to configure and reuse across different forms, pages, and even admin views.

Here’s what the class for that looked like:

Component.DatePicker = new Class({
    options: {
        startDate: '04/07/2015',
        format: 'dd/mm/yyyy',
        todayHighlight: false,
        weekStart: 0
    },
    init:function(element, options){
        this.setOptions(options);
        element.datepicker(this.options);
    }
});

Once defined, we simply register our component with the behaviour system so it knows how to wire it up when the time comes:

var App = {
  behaviour: new Framework.Behaviour
};

App.behaviour.addFilters({
  'Component.DatePicker': {
    setup: function (element, options) {
      return new Component.DatePicker(element, options);
    }
  }
)

$(function(){
  var body = $('body');
  App.behaviour.apply(body);
})

Now comes the beauty of it — in your HAML or HTML, you declare the behaviour directly in your markup using a data-behaviour attribute. When the page loads, only the relevant components are instantiated, and only for the elements that need them.

  = listing.input :start_date,
    as: :string,
    label: 'Start Date',
    placeholder: "e.g. #{example}",
    input_html: { value: (localize(date, format: '%d/%m/%Y')),
      data: {behaviour: 'Component.DatePicker', 'options-component.datepicker' => '{"startDate" : "' + example + '"}'}

And just like that, our behaviours are neatly attached, scoped, and easy to manage.

It’s clean. It’s obvious. And it means onboarding a new team member doesn’t require a 2-hour walkthrough of where the JavaScript magic lives — it’s all in the markup and component files.

This approach meant zero wasted cycles, faster page loads, and a far more maintainable codebase. Behaviourally-aware pages, declarative setup, and modular control over every UI component. In today’s parlance, it’s not far off what Stimulus or Vue’s component system offers — just built years earlier and tailored to our exact needs.

This is the short version — enough to give you a taste of how it all works. In a follow-up post, I’ll take a deep dive into the full implementation, including sibling systems like the EventBus, Trigger logic, Adapters, and more.

Credit where it’s due: this wasn’t a solo effort. The framework was shaped with the brilliant Paul Schwarz, and together we built something that — dare I say — still holds up surprisingly well in 2025.

jQuery Isn’t Dead. It’s Just Retired.

Do I recommend jQuery for new apps in 2025? Of course not.
But for apps that already have it — and especially those with a system like this layered on top — there's no real reason to tear it out just to chase trends.

This is the kind of code you keep because it works — not in spite of it.

Coming Up Next

In Part 2, I’ll take you on a deep dive into the guts of the Behaviour framework: how components are hydrated, how the EventBus enables decoupled comms between modules, how Trigger handles custom DOM events, and more.

It’s a little old-school, sure — but it's also still slick as hell.

Coder Legion - Recent posts tagged jquery

How to get full path of uploaded file in html using JavaScript

Photo by Rachel Vine

TABLE OF CONTENTS

Absolute path of a file:

JavaScript to get the full path of file:

Store the value of the JavaScript variable image Path in the MySQL database:

Conclusion

Typeerror: $(...).autocomplete is not a function

What is jQuery UI?

What causes that error to occur?

The scenario of producing that error

The solutions

Solution 1: Load the libraries in the correct order

Solution 2: Check for conflicts

Solution 3: Re-initialize the widget

Solution 4: Check the jQuery version

Conclusion

How to get radio button value in jquery

How to Get Radio Button Value in jQuery ?

Table of Contents:

What does it mean by Retrieving Radio Buttons Value in jQuery?

Syntax:

Getting the Values of Radio Buttons:

1. Getting Radio Selected Value Using Class

2. Getting Radio Selected Value Using Attribute Name with Value

3. Getting Radio Selected Value Using Attribute Type and Value

Some Alternative Approches

1. Using the .change() Event

2. Using the .click() Event

References

How to solve this problem "Uncaught TypeError: $(...).datetimepicker is not a function"

How to solve this problem "Uncaught TypeError: $(...).datetimepicker is not a function".

2. What is the problem

3. What is the cause of the problem

4. How did you reach this problem

Missing or incorrect script inclusion:

Script loading order:

Conflicts with other libraries or plugins:

Incorrect initialization:

5. How to solve $(...).datetimepicker is not a function issue?

Make sure you have included the necessary dependencies:

Check the order of script inclusion:

Check for conflicts:

Why I'm Still Using jQuery in 2025 (Never gonna give you up)

Why I Kept It

A Beautiful Framework

jQuery Isn’t Dead. It’s Just Retired.

Coming Up Next