jQuery validation with Bootstrap classes, has-error

 

$.validator.setDefaults({
    errorElement: "span",
    errorClass: "help-block",
    highlight: function (element, errorClass, validClass) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function (element, errorClass, validClass) {
         $(element)
                      .closest('.form-group')
                      .removeClass('has-error')
                      .addClass('has-success');
 }, errorPlacement: function (error, element) {

if (element.parent('.input-group').length || element.prop('type') === 'checkbox' || element.prop('type') === 'radio') { 
error.insertAfter(element.parent()); } 
else { 
error.insertAfter(element); } 
} 
});

 

References:

https://stackoverflow.com/questions/18754020/bootstrap-3-with-jquery-validation-plugin

https://stackoverflow.com/questions/22483317/jquery-validate-doesnt-add-success-class

Use jQuery to select current menu item in css

 This tip is great for use with Joomla and mmenu.

@micha149 has shown me this jQuery snippet which will catch all absolute and relative URLs.

var url = window.location.href;  // Will only work if string in href matches with location 
$('.menu a[href="'+ url +'"]').addClass('active'); 
 // Will also work for relative and absolute hrefs

$('.menu a').filter(function() { 
return this.href == url; 
}).addClass('better-active');

 

 

http://www.paulund.co.uk/use-jquery-to-highlight-active-menu-item

Datatables.net – Update Ajax Interval, Reload Data, Refresh Table

 

“Also, many of the legacy plug-ins have been integrated directly into DataTables 1.10’s core API (for example fnReloadAjax‘s functionality is provided by ajax.reload()DT now.”

source: http://www.datatables.net/plug-ins/api/

 

 Working example: 

var table = $(‘#tabl1′).DataTable( {
“ajax”: ‘api/q/’ + json,
“pageLength”: 15,
“columns”: [
{ “data”: “a” },
{ “data”: “b” },
{ “data”: “c” },
{ “data”: “d” }
]
});

setInterval( function () {
table.ajax.reload();
}, 3000 );

 

 

 

 

 

Notes:

 

Check your declerations

Actually, the confusion here is over the difference between $().dataTable() which you are using and returns a jQuery object and the old DataTables API, and $().DataTable() which returns the new API instance.

This is noted in the manual and FAQs – but I’m very interested to hear any suggestions you might have about how I can improve the documentation?

Allan

 

http://datatables.net/reference/api/ajax.reload

ajax.reload()

Since: 1.10

Reload the table data from the Ajax data source

Description

In an environment where the data shown in the table can be updated at the server-side, it is often useful to be able to reload the table, showing the latest data. This method provides exactly that ability, making an Ajax request to the already defined URL (use ajax.url( )DT if you need to alter the URL).

Type

function ajax.reload( callback, resetPaging )

Parameters:
  Name Type Optional Description
1 callback

functionJS

Yes – default:null

Function which is executed when the data as been reloaded and the table fully redrawn. The function is given a single parameter – the JSON data returned by the server, and expects no return.

2 resetPaging

functionJS

Yes – default:true

Reset (default action or true) or hold the current paging position (false). A full re-sort and re-filter is performed when this method is called, which is why the pagination reset is the default action.

Returns:

DataTables.Api instance

Examples

Reload the table data every 30 seconds:

var table = $('#example').DataTable( { ajax: "data.json" } ); setInterval( function () { table.ajax.reload(); }, 30000 );

Use the callback to update an external elements:

var table = $('#example').DataTable(); table.ajax.reload( function ( json ) { $('#myInput').val( json.lastInput ); } );

Related

The following options are directly related and may also be useful in your application development.

 
 

How to swap CSS class names without touching the CSS codes

 

This technique might be very useful for this that deal with templates where the CSS themes may be overridden but you wish to keep certain classes references even when the template undergoes versioning.

 

http://stackoverflow.com/questions/3452778/jquery-change-class-name

 

 You can set the class (regardless of what it was) by using .attr(), like this:

$("#td_id").attr('class','newClass');

If you want to add a class, use .addclass() instead, like this:

$("#td_id").addClass('newClass');

Or a short way to swap classes using .toggleClass():

$("#td_id").toggleClass('change_me newClass');

Here’s the full list of jQuery methods specifically for the class attribute.

 

 

Apply to entire document when you do not have an ID selector

 

$(document).ready(function(){ $('.blue').removeClass('blue').addClass('green');});