CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrapx-editable
Mat Whiteside
Mat Whiteside

Reputation: 561

X-editable: How to add an extra attribute to the input box?

I have a link that has x-editable enabled on it with data-type="text".

I want to add an additional attribute to the input field that is created when the item is being edited.

So at the moment x-editable is producing the following input field:

<input type="text" class="form-control input-sm" style="padding-right: 24px;">

And I want to add a pattern attribute, so it would look like (adding pattern attr ):

<input type="text" class="form-control input-sm" style="padding-right: 24px;" pattern="blah">

How can I add this extra attribute?

Upvotes: 2

Views: 2469

Answers (3)

harshit gupta
harshit gupta

Reputation: 32

You can use the .attr() method from jQuery:

$('.input-sm').attr("pattern","blah")

Upvotes: -1

Jayababu
Jayababu

Reputation: 1621

You can set any value using attr method (We don't have addAttr method as we have for class addClass we just need to use element.attr('AttributeName','AttributeValue')).

If you wish to remove the attribute then you may use the below syntax.

  element.removeAttr('AttributeName')


$('input').attr('pattern','desiredValue');
alert($('input').attr('pattern'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form-control input-sm" style="padding-right: 24px;">

Upvotes: 0

Bourbia Brahim
Bourbia Brahim

Reputation: 14712

Note that every click on the x-editable element you can reach the generated input in the popup by using

$('your element').on("click",function(){
  $(this).next().find(".editable-input input").attr("data-pattern","yep 1!")
});

See below snippet : using inspect you'll see that the pattern attr is present 

$(function() {
    $('#username1').editable();
    
    $('#username1').on("click",function(){
      $(this).next().find(".editable-input input").attr("data-pattern","yep 1!")
    });
    
    $('#username2').editable();
    
    $('#username2').on("click",function(){
      $(this).next().find(".editable-input input").attr("data-pattern","yep 2!")
    });
    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<br><br><br><br><br>
<a href="#" id="username1" data-type="text" data-pk="1" data-title="Enter username">superuser 1</a>
<br><br><br><br>
<a href="#" id="username2" data-type="text" data-pk="2" >superuser 2</a>

Upvotes: 5

Related Questions