Check whether a function exists
1 2 3 if (typeof functionName == 'function' ) { }
Reference:
Validation using RegExp
Example, to validate a Year :
1 2 3 4 5 var year = 2012 ;var myRegex = /^\d{4}$/ ;if (myRegex.test (year)) { alert ('Is a valid year' ); }
/^
indicate a beginning of the pattern
$/
indicate an ending of the pattern
\d
refer to integer
{4}
exactly 4 occurance must matched
Reference:
Get total row in a table
1 var totalRows = document .getElementById ('tableId' ).getElementsByTagName ('tr' ).length ;
Reference:
Replace text with submatch (parenthesis)
Change a text abc_123 to abc_321
1 2 3 var str = "abc_123" ;var new_str = str.replace (/([A-Za-z]+)_\d+/ , "$1_321" );document .write (new_str);
OR using callback function
1 2 3 4 5 6 var str = "abc_efg" ;var new_str = str.replace (/([A-Za-z]+)_([A-Za-z]+)/ , function (s, p1, p2 ) { return [p1, p2].join ('-' ); }); document .write (new_str);
[A-Za-z]
- only match alphabet excluding underscore (_)
(.....)
- keep the text inside the parenthesis into a variable ($1
in this case as it is the first parenthesis, if second then use $2
)
\d
- match only integer
+
- one or more occurance
References:
Change element’s ID
1 document .getElementById ('originalId' ).id = "newId" ;
Reference:
For each row in table
1 2 3 4 5 6 7 8 9 var rows = document .getElementById ('tableName' ).rows ;for (rowIndex in rows) { if (/^\d+$/ .test (rowIndex)) { } }
NOTE
if(/^\d+$/.test(rowIndex))
is to get only the integer index, because in document.getElementById('tableName').rows
there are extra 3 attributes: length
, item
and namedItem
. I just want to ignore this 3 attributes. Since the indexes are all integer, so I use regular expression to filter it.
Reference:
Remove DOM element attribute
1 document .getElementById ('elementId' ).removeAttribute ('class' );
Reference:
Binding event on future (i.e. add row) using jQuery
If you have an Add Row function, the normal binding doesn’t affected. i.e.
1 2 3 4 5 6 $(function ( ) { $('.row-div' ).click (function ( ) { alert ('added a new row' ); }); });
The example above doesn’t work because it already binded when the page loaded, thus the elements after added doesn’t bind. In order for this to work, use delegate
1 2 3 4 5 6 $(function ( ) { $('.parent-element' ).delegate ('.row-div' , 'click' , function ( ) { alert ('added a new row' ); }); });
Reference:
Disable a hyperlink and resume it back when is needed using jQuery
Disable: This cannot be done by disabled
attribute
1 2 3 4 5 6 $(function ( ) { $('a#hyperlink' ).click (function (e ) { e.preventDefault (); }); });
Resume: There is no way to resume this, but you can hack on it.
1 2 3 4 5 $(function ( ) { $('a#hyperlink' ).click (function ( ) { window .location .href = $(this ).attr ('href' ); }); });
References:
Select second child element using jQuery
1 2 3 4 <div id ="main-div" > <div > Some text here</div > <div > Some <em > description</em > here</div > </div >
Let say you want to access the second div
1 2 var contentHtml = $('div#main-div' ).children ().eq (1 ).html ();alert (contentHtml);
Output will be:
1 Some <em > description</em > here
Note: eq(1)
the digit inside the eq
is refer to index which is start with 0
Reference:
Remove all inside a DOM element using jQuery
1 2 3 4 5 $('#foo' ).html ('' ); $('#foo' ).empty ();
References:
Access the content of style using jQuery
1 2 3 4 5 $('#foo' ).css ('height' , '100px' ); var height = $('#foo' ).css ('height' );
Reference:
Select elements with :not
operator using jQuery
Let say we have an html
1 2 3 4 5 6 7 <ul > <li class ="foo" > I don't want this</li > <li class ="bar" > I don't want this as well</li > <li > I just want this</li > <li > this</li > <li > and this</li > </ul >
In jQuery
1 2 3 4 5 $(function ( ) { $('ul li:not([class=foo]):not([class=bar])' ).each (function (index ) { }); });
Reference:
Store $.ajax result to global variable
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 function foo (arg1, arg2 ) { var bar; $.ajax ({ type : 'POST' , url : '/path/to/action.php' , data : { param1 : arg1, param2 : arg2 }, success : function (data ) { bar = data.bar ; }, complete : function (jqXHR, textStatus ) { alert (textStatus); }, error : function (jqXHR, textStatus, errorThrown ) { alert (errorThrown); }, async : false }); return bar; }
By setting async
to false
, so it won’t continue to run until the request is completed.
Reference:
Get selected text from dropdown list
1 $('#dropdown :selected' ).text ();
Reference:
jQuery - add a wrapper to element
Initial
1 <div class ="inner" > Some content</div >
Add a wrapper via jQuery
1 $('.inner' ).wrapAll ($('<div></div>' ).addClass ('outer' ));
Page rendered
1 2 3 <div class ="outer" > <div class ="inner" > Some content</div > </div >
Reference:
Match certain text via RegEx
Example to retrive the element name from HTML text.
1 2 3 4 5 6 var str = '<input class="required" type="text" value="" required="required" placeholder="First Name" name="first_name">' ; var result = str.match (/name="(\w+)"/ );
Reference:
Remove next element
In jQuery
1 $('#foo' ).next ().remove ();
In pure JavaScript
1 2 3 4 5 6 var fooObject = document .getElementById ('foo' );var nextElement = fooObject.nextSibling ;fooObject.parentNode .removeChild (nextElement);
Reference:
Access class variable inside callback function
Example here:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function Foo ( ) { this .username = 'mr foo' ; this .loadSomeDataFromServer = function (url ) { $.ajax ({ url : url, success : function (data ) { var text = 'Dear ' + this .username + '\n' ; text += data; alert (text); } }); } }
You’re not able to get the actual value from this.username
, as the word this
is refer to the success function , in order to use the variable, create a that
variable
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 function Foo ( ) { var that = this ; this .username = 'mr foo' ; this .loadSomeDataFromServer = function (url ) { $.ajax ({ url : url, success : function (data ) { var text = 'Dear ' + that.username + '\n' ; text += data; alert (text); } }); } }
Reference:
jQuery ajax request from other domain
There are no error, textStatus is 0
, finally I solved it using jsonp
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 $.ajax ({ url : 'http://otherdomain.com/api.php' , type : 'GET' , dataType : 'jsonp' , data : { param1 : 'foo' , param2 : 'bar' }, success : function (data ) { console .log (data); }, complete : function (jqXHR, textStatus ) { alert (textStatus); }, error : function (jqXHR, textStatus, errorThrown ) { alert (errorThrown); } });
Reference:
jQuery check if method exists
1 2 3 4 if (!!$.prototype.functionName ) { $('#dom-id' ).functionName (); }
Reference:
Trigger dropdown on change event by jQuery
1 $('#dropdown' ).change ();
Reference:
jQuery check is dropdown contain a value
1 2 3 if ($('#dropdown > option[value="foo"]' ).length > 0 ) { alert ('The dropdown menu contains a "Foo" value' ); }
Reference:
Get image width & height
1 2 3 4 5 6 7 8 9 10 11 function getImgSize (imgSrc ) { var newImg = new Image (); newImg.onload = function ( ) { var height = newImg.height ; var width = newImg.width ; console .log ('The image size is ' +width+' x ' +height); } newImg.src = imgSrc; }
Reference:
Prepend zero in front like sprintf
in PHP
i.e. get the result like sprintf('%03d' 3)
1 2 3 var someInteger = 3 ;('0' + someInteger).slice (-3 );
Reference:
1 2 $('#myfile' ).wrap ('<form>' ).closest ('form' ).get (0 ).reset (); $('#myfile' ).unwrap ();
Reference:
delegate & datepicker on text field
1 2 3 4 5 $('#wrapper' ).delegate ('#birthday' , 'focusin' , function ( ) { $(this ).datepicker ({ dateFormat : 'yy-mm-dd' }); });
Reference:
Get query string
1 2 3 4 5 function queryString (key ) { return unescape (window .location .search .replace (new RegExp ("^(?:.*[&\\?]" + escape (key).replace (/[\.\+\*]/g , "\\$&" ) + "(?:\\=([^&]*))?)?.*$" , "i" ), "$1" )); } var token = queryString ('token' );
Reference:
Trigger window resize event on page load
1 $(window ).trigger ('resize' );
Reference:
jQuery where condition
e.g.
1 2 3 4 var arr = [ { a : 'abc' , b : 'efg' , c : 'hij' }, { a : 'klm' , b : 'nop' , c : 'qrs' } ]
Now want to find the json which contain a
attr is klm
1 2 3 filtered = jQuery.grep (arr, function (e ) { return e.a == 'klm' ; });
The result will be
1 [{ a : 'klm' , b : 'nop' , c : 'qrs' }]
Reference:
DataTable
Reload table with new params
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 function getFilters ( ) { let data = { q : $('#q' ).val (), }; let status = $('#status' ).select2 ('val' ); if (status) { data.status = status; } return data; } ... 'ajax' : { 'url' : '/path/to/data-table' , 'type' : 'GET' , 'data' : function (d ) { Object .assign (d, getFilters ()); return d; }, 'beforeSend' : function (request ) { }, 'error' : function ( ) { } },
Must use function (d) { ... return d; }
Reference:
Bootstrap 2
Autocomplete with Ajax
1 2 3 4 5 6 7 8 9 10 11 12 13 14 $(function ( ) { $('#textboxid' ).typeahead ({ minLength : 1 , source : function (query, process ) { return $.getJSON ('/path/to/ajax/source' , {query : query}, function (data ) { var compiledData = []; $.each (data, function ( ) { compiledData.push (this .name ); }); return process (compiledData); }); }, }); });
Where the data source is
1 2 3 4 5 6 [ { 'id': 1 , 'name': 'Foo'} , { 'id': 2 , 'name': 'Bar'} , { 'id': 3 , 'name': 'FooBar'} , ... ]
Reference:
Bootstrap 3
Callback event on navbar show/hide
1 2 3 4 5 6 $('.navbar-collapse' ).on ('shown.bs.collapse' , function ( ) { alert ('shown' ); }); $('.navbar-collapse' ).on ('hidden.bs.collapse' , function ( ) { alert ('hidden' ); });
There are 4 events
1 2 3 4 show.bs .collapse shown.bs .collapse hide.bs .collapse hidden.bs .collapse
Reference:
Bootstrap 4
When open 1st modal, it’s scrollable;
When open 2nd modal, it’s scrollable;
When close the 2nd modal, the 1st modal become not scrollable.
Here’s the fix
1 2 3 4 5 $('body' ).on ('hidden.bs.modal' , '.modal' , function (e ) { if ($('.modal:visible' ).length ) { $('body' ).addClass ('modal-open' ); } });
Reference:
CK editor
Remove the control at the bottom bar (i.e. body
)
1 CKEDITOR .config .removePlugins = 'elementspath' ;
Reference:
1 2 3 4 5 CKEDITOR .config .toolbar =[ { name : 'basicstyles' , items : [ 'Bold' ,'Italic' ,'Underline' ] }, { name : 'paragraph' , items : [ 'NumberedList' ,'BulletedList' ] } ]
Reference:
Edit html source code
1 2 3 4 5 CKEDITOR .config .toolbar =[ ... { name : 'document' , items : [ 'Source' ] } ]
tinyMCE
Add in custom button with input textbox
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 tinymce.init ({ toolbar1 : 'undo redo .... insertcontent' , setup : function (editor ) { editor.addButton ('insertcontent' , { tooltip : 'Insert content' , text : 'Content' , icon : false , onclick : function (e ) { editor.windowManager .open ({ title : 'Insert Content' , body : [ { type : 'textbox' , size : 150 , height : '100px' , name : 'content' , label : 'Content' } ], onsubmit : function (e ) { tinyMCE.activeEditor .insertContent (e.data .content ); } }); } }); }, });
Gulp
Elixir copy files except some files
Copy all js files except for app.js & bootstrap.js
1 mix.copy (['resources/assets/js/*.js' , '!resources/assets/js/app.js' , '!resources/assets/js/bootstrap.js' ], 'public/assets/js' );
Reference: