CODEWITHSUNDEEP
jquerycssdatatables
pranav
pranav

Reputation: 431

Apply css on Datatable element on focusout event

We have a datatable column being rendered as below:

"render": function (data, type, row, meta){

var dropdownVarCodes = {
   source: varCodes
};

$(".varcode").autocomplete(dropdownVarCodes);
if(data == undefined) {
    data = '';
}
prop = '';
if(row.timesheetStatus == "COMPLETE"){
    prop = 'disabled="disabled"';
}
return '<input type="text" name="vCode" class="varcode" value="'+data+'" '+prop+' />';

Now we are trying to color the border red on focusout. We did a focusout event binding for the element as below:

jQuery(document).ready(function() {
....
.........

$(document).on('focusout', '.varcode', function(e) {
   alert($('input.varcode').attr('name'));  // we get this correctly as 'vCode'
   var elem = e.target;   // elem = input.varcode, e = r.Event {type: "focusout", ........
   $(elem).css("border","2px solid red");   //elem = input.varcode
});

.....
........

});

we get the correct element too as can be seen by debugging (commented statements). Still we don't get the colored border for input element on focus out. Any ideas or pointers?

Note: Same code works if we have a input element created elsewhere on the document.

Upvotes: 1

Views: 734

Answers (3)

davidkonrad
davidkonrad

Reputation: 85578

Perhaps you are overcomplicating the task? Here is a working example using chaining :

var table = $('#example').DataTable({
  drawCallback: function() {
    $('#example input.varCode').autocomplete({
      source: tags
    }).focusout(function() {
      $(this).css('border', '2px solid red')
    }) 
  }  
})

demo -> http://jsfiddle.net/nudwjo7c/

I consider the code you are using in render() as "bad practice" (no offense). Separate data and scripting, espcially when you are working with additional plugins that need to work inside the dataTable. Better to initialise those in a drawCallback or initComplete.

To clarify: The only thing you should do in render() is

render: function (data, type, row, meta){
  var prop = row.timesheetStatus == "COMPLETE" ? 'disabled="disabled"' : '';
  return '<input type="text" name="vCode" class="varcode" value="' + data + '" ' + prop + ' />';
}

You actually initialise autocomplete() 1+2+3+4+5 etc times, one time per render() per <input>, so the first input is at the end initialised n times, the number of rows. A huge overhead.

Upvotes: 2

jeremiah.trein
jeremiah.trein

Reputation: 806

Could be that your CSS is overridden. Please check your styles.

jQuery(document).ready(function() {
  $(document).on('focusout', '.varcode', function(e) {
    alert($('input.varcode').attr('name'));  // we get this correctly as 'vCode'
    var elem = e.target;   // elem = input.varcode, e = r.Event {type: "focusout",
      $(elem).css("border","2px solid red");   //elem = input.varcode
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" name="vCode" class="varcode" value="MEOWWWWwwww!!!" />

Upvotes: 0

Sami
Sami

Reputation: 3800

I reckon this works:

    $(document).on('focusout', '.varcode', function(event) {
         $(event.target).css("border","2px solid red");  
     });

Upvotes: 0

Related Questions