Debug School

rakesh kumar
rakesh kumar

Posted on

What is the use of attr in jquery

The .attr() method in jQuery is used to get or set the attributes of HTML elements. It can take one or two parameters:

Attribute name: This is the name of the attribute to get or set.

Value (optional): This is the value to set for the attribute.

Here are some examples of using .attr() with different parameters:

Getting the value of an attribute:

<div id="myDiv" data-value="42">Hello World</div>
Enter fullscreen mode Exit fullscreen mode

// jQuery

var value = $('#myDiv').attr('data-value');
console.log(value); // Output: 42
Enter fullscreen mode Exit fullscreen mode

In this example, we use .attr() with one parameter ('data-value') to get the value of the data-value attribute of the div element.

Setting the value of an attribute:

<button id="myButton">Click me</button>
Enter fullscreen mode Exit fullscreen mode

// jQuery

$('#myButton').attr('disabled', true);
Enter fullscreen mode Exit fullscreen mode

In this example, we use .attr() with two parameters ('disabled' and true) to set the disabled attribute of the button element to true. This will disable the button.

Setting multiple attributes at once:

<img id="myImage" src="image.jpg">
Enter fullscreen mode Exit fullscreen mode 
$('#myImage').attr({
  'src': 'new-image.jpg',
  'alt': 'New image'
});
Enter fullscreen mode Exit fullscreen mode

In this example, we use .attr() with one parameter, which is an object containing the attribute names and values to set. This will change the src and alt attributes of the img element.

Removing an attribute:

<a id="myLink" href="https://example.com">Link</a>

$('#myLink').removeAttr('href');
Enter fullscreen mode Exit fullscreen mode

In this example, we use .removeAttr() to remove the href attribute of the a element. This will turn the link into plain text.

what is the use of attr in jquery after ajax success in laravel
The .attr() method in jQuery can also be used to set attributes after a successful Ajax call in Laravel. Here is an example of how you can use .attr() with different parameters after an Ajax call:

<button id="myButton">Click me</button>
Enter fullscreen mode Exit fullscreen mode 
$(document).ready(function() {
    $('#myButton').click(function() {
        $.ajax({
            url: '/some-url',
            type: 'GET',
            success: function(response) {
                // Set the disabled attribute of the button to true
                $('#myButton').attr('disabled', true);

                // Set the text of the button to 'Success'
                $('#myButton').text('Success');

                // Set the class of the button to 'btn-success'
                $('#myButton').attr('class', 'btn-success');
            }
        });
    });
});
Enter fullscreen mode Exit fullscreen mode

In this example, we make an Ajax call when the button is clicked. If the Ajax call is successful, we use .attr() to set the disabled attribute of the button to true, change the text of the button to 'Success', and change the class of the button to 'btn-success'. These changes will be reflected in the HTML after the Ajax call is complete.

Note that you can also use .prop() instead of .attr() to set the disabled property of the button to true, as shown in the previous examples.

Top comments (0)