This article uses jQuery to call a function after a page is loaded. Table of contents: 1. $(document).ready() 2. jQuery call a function after page loaded 3. References P.S Tested with jQuery 3.7.1 1. $(document).ready() In jQuery, the code inside the $(document).ready() method will run once when the Document Object Model (DOM) is ready, equivalent …
In jQuery, we can remove an item from an array with the $.grep() function. Table of contents: 1. Remove one number from the array with $.grep() 2. Remove two numbers from array with $.grep() and $.inArray() 3. References P.S Tested with jQuery 3.7.1 1. Remove one number from the array with $.grep() The $.grep() is …
In jQuery, we select an element by id using the # symbol and select elements by class name using the . symbol. Table of contents: 1. Select an element by ID 2. Select elements by Class Name 3. HTML example 4. References 1. Select an element by ID To select an element by ID, we …
A simple jQuery Ajax example to show you how to submit a multipart form, using Javascript FormData and $.ajax() 1. HTML A HTML form for multiple file uploads and an extra field. <!DOCTYPE html> <html> <body> <h1>jQuery Ajax submit Multipart form</h1> <form method="POST" enctype="multipart/form-data" id="fileUploadForm"> <input type="text" name="extraField"/><br/><br/> <input type="file" name="files"/><br/><br/> <input type="file" name="files"/><br/><br/> <input …
Review a jQuery Ajax form submit. $(document).ready(function () { $("#hostingForm").submit(function (e) { e.preventDefault(e); var data = {} data["id"] = $("#id").val(); data["domain"] = $("#domain").val(); data["name"] = $("#name").val(); //… $.ajax({ type: "POST", contentType: "application/json", url: "{{home}}/hosting/update", data: JSON.stringify(data), dataType: ‘json’, timeout: 600000, success: function (data) { console.log("SUCCESS: ", data); }, error: function (e) { console.log("ERROR: ", e); …
Review a Javascript code snippet to call a function which declared inside jQuery code : <script> //javascript function submitSearchForm() { updateErrorMessage("Please enter a website url"); } //jquery jQuery(document).ready(function($) { function updateErrorMessage(msg) { $(‘#error’).html(msg).hide().fadeIn(500); } } ); </script> But, browser console shows the updateErrorMessage function is not defined. Uncaught ReferenceError: updateErrorMessage is not defined Solution To …
Review a simple jQuery example to loop over a JavaScript array object. var json = [ {"id":"1","tagName":"apple"}, {"id":"2","tagName":"orange"}, {"id":"3","tagName":"banana"}, {"id":"4","tagName":"watermelon"}, {"id":"5","tagName":"pineapple"} ]; $.each(json, function(idx, obj) { alert(obj.tagName); }); Above code snippet is working fine, prompts the “apple”, “orange” … as expected. Problem : JSON string Review below example, declares a JSON string (enclosed with single …
There is no direct way to iterate over a Java List with jQuery, see the following case study : Spring controller @RequestMapping(value = "/", method = RequestMethod.GET) public ModelAndView getPages() { List<String> list = new ArrayList<String>(); list.add("List A"); list.add("List B"); list.add("List C"); list.add("List D"); list.add("List E"); ModelAndView model = new ModelAndView("somepage"); model.addObject("list", list); return model; …
Twitter, provides many APIs to deal with Tweets. In this example we are going to learn how to use jQuery to get last tweet of a user. Twitter API Get the last tweet of user (change “username” in the url with Twitter username you want) http://search.twitter.com/search.json?q=from:username&rpp=1 For example, get last tweet from twitter’s user “mkyong”. …
The requirement : We need to show a collapsable content when we clicked ‘Show’ button, and hide the collapsable content when we clicked ‘Hide’ button. The solution : Create a custom jQuery plugin. Demo : Clicks on the “show” button. Note Here’s the alternative solution – jQuery toggle() function. 1. Collapsable content Below is an …
The requirement : We need to show a collapsable content when we clicked ‘Show’ button, and hide the collapsable content when we clicked ‘Hide’ button. The solution : jQuery toggle() function. Demo : Clicks on the “show” button. 1. Collapsable Content Below is an example of HTML for collapsable content: <section class="round-border"> <h2>Use jQuery toggle …
A simple jQuery example to show you how to implement a watermark text effect on an input field. 1. Code Snippets An email input field and css watermark class. <style type="text/css"> input.watermark { color: #999; } //light silver color </style> <label>Email : </lable> <input id="email" type="text" /> jQuery to apply the watermark effect on email …
Demo : Try clicks on the tab When I developing my foodshaker.com. There is requirement for me to create a multi tab navigation to hide and show tab content. In order to develop a lightweight multitab, I decided to use jQuery and CSS to facilitate it. 1. Explanation Below is an example of navigation: <div> …
The “maxlength” attribute is not supported in textArea, but you can use JavaScript to limit the length of textArea dynamically. HTML 5 The textArea “maxlength” attribute is supported in HTML 5, the problem is not all browsers support HTML 5, especially, the old IE. jQuery Example A jQuery example to implement the “maxlength” effect on …
The mousemove() event is fire when the mouse moves inside the matched element, and keep fire the event for every single pixel mouse moves around the matched element. For example, a big 300 x 200 div box with an id of “bigbigbox”. <style type="text/css"> #bigbigbox{ margin:16px 16px 16px 48px; border:1px groove blue; background-color : #BBBBBB; …
jQuery show() and hide() are the most common used effect. show() – Display the matched elements. hide() – Hide the matched elements. Both methods are support duration as parameter : slow, fast, or exact milliseconds. If this parameter is omitted, the default 400 milliseconds is apply. Try it yourself <html> <head> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <style …
Both jQuery after() and insertAfter() methods are doing the same task, add a text or html content after the matched elements. The major difference is in the syntax. For example, <div class="greyBox">I’m a ipman</div> <div class="greyBox">I’m a ipman 2</div> 1. $(‘selector’).after(‘new content’); $(‘.greyBox’).after("<div class=’redBox’>Iron man</div>"); 2. $(‘new content’).insertAfter(‘selector’); $("<div class=’redBox’>Iron man</div>").insertAfter(‘.greyBox’); Result Both methods above …
Both jQuery append() and appendTo() methods are doing the same task, add a text or html content after the content of the matched elements. The major difference is in the syntax. For example, <div class="box">I’m a big box</div> <div class="box">I’m a big box 2</div> 1. $(‘selector’).append(‘new text’); $(‘.box’).append("<div class=’newbox’>I’m new box by prepend</div>"); 2. $(‘new …
jQuery text() is used to get the contents of all the matched elements; While text(‘new text’) is used to replace or set the text contents of all the matched elements. For example, <div class="TClass">TEXT 1</div> <div class="Tlass">TEXT 2</div> 1. $(‘.TClass’).text() This will combine all the contents of the matched elements, get “TEXT 1 TEXT 2” …
jQuery wrap() is used to wrap HTML element around each of the matched elements. For example, <div class="innerBox">Ip man vs Iron man</div> <div class="innerBox">Ip man 2 vs Iron man 2</div> Wrap it with a div tag that contains a class name of ‘wrapBox’. $(‘.innerBox’).wrap("<div class=’wrapBox’></div>"); The new contents will become : <div class=’wrapBox’> <div class="innerBox">Ip …
jQuery comes with three handy methods to create the sliding effect easily. slideUp() – Hide the matched elements with slide up effect. slideDown() – Display the matched elements with slide down effect. slideToggle() – If the matched element is displayed, it will hide with a slide up effect; if hidden, it will display with a …
Both jQuery prepend() and prependTo() methods are doing the same task, add a text or html content before the content of the matched elements. The major difference is in the syntax. For example, <div class="box">I’m a big box</div> <div class="box">I’m a big box 2</div> 1. $(‘selector’).prepend(‘new text’); $(‘.box’).prepend("<div class=’newbox’>I’m new box by prepend</div>"); 2. $(‘new …
jQuery comes with three handy methods to create the fading effect easily. fadeIn() – Display the matched elements with fade in effect. fadeOut() – Hide the matched elements with fade out / transparent effect. fadeTo() – Fading the matched elements to certain opacity. Above three methods are support duration as parameter : slow, fast, or …
Both jQuery mouseup() and mousedown() events are self-explanatory, to verify the mouse button is pressed or released. Try it yourself <html> <head> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <style type="text/css"> #mouseup, #mousedown{ float:left; padding:8px; margin:8px; border:1px solid red; width:200px; height:150px; background-color:#999999; } </style> </head> <body> <h1>jQuery mouseup() and mousedown() examples</h1> <div id="mouseup"> <h2>mouseup</h2> Fire when mouse over this …
jQuery resize() event is fire when the size of the browser is changed, and this event is only bind to $(window). $(window).resize(function () { $(‘#msg’).text(‘Browser (Width : ‘ + $(window).width() + ‘ , Height :’ + $(window).height() + ‘ )’); }); To get the browser’s width and height details, use $(window).width() and $(window).height(). Try it …
jQuery comes with five common form events to handle the form elements’ action. 1. focus() Fire when an element is on focus. $("input,select,textarea").focus(function () { //do something }); 2. blur() Fire when an element is loses focus. $("input,select,textarea").blur(function () { //do something }); 3. change() Fire when an element value is changed, e.g update checkbox, …
The toggleClass() method means if matched elements do not have the class name, then add it; if matched elements already have the class name, then remove it. Let see an example, a simple ‘p’ tag. <p>This is paragraph</p> Call $(‘p’).toggleClass(‘highlight’), it will add a highlight class to the ‘p’ tag. <p class="highlight">This is paragraph</p> Call …
jQuery html() is used to get the html contents of the first element of the matched elements; While html(‘new html content’) is used to replace or set the html contents of all the matched elements. For example, two div elements that contains same class name “AClass”. <div class="AClass">ABC 1</div> <div class="AClass">ABC 2</div> 1. $(‘.AClass’).html() This …
jQuery click() and dblclick() events are the most common used mouse events : click() – Fire when mouse single click on the matched element. dblclick() – Fire when mouse double clicks on the matched element. Try it yourself <html> <head> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <style type="text/css"> #singleClick, #doubleClick{ float:left; padding:8px; margin:16px; border:1px solid blue; width:150px; height:150px; …
jQuery comes with three keyboard events to capture the keyboard activities – keyup(), keydown() and keypress(). keyup() – Fire when user releases a key on the keyboard. keydown() – Fire when user presses a key on the keyboard. keypress() – Fire when user presses a key on the keyboard. In general statement, the keydown() is …
jQuery comes with a hover() mouse event to allow attach two event handlers to the matched elements, executed when the mouse enters and leaves the matched elements. $("#id").hover(A, B); A – function to call when the mouse enters the matched element. B – function to call when the mouse leaves the matched element. This is …
In jQuery, both mouseover() and mouseenter() events are fire when the mouse enters the matched element. The only different is in the way of the “event bubbling” handle in child element, let’s see two scenarios : 1. NO child element If the matched elements have no child element, both mouseover() and mouseenter() events are work …
A simple select / drop down box, with a id=”country”. <select id="country"> <option value="None">– Select –</option> <option value="China">China</option> <option value="United State">United State</option> <option value="Malaysia">Malaysia</option> </select> 1. To display the selected drop down box value. $(‘#country’).val(); 2. To set a drop down box value to ‘China’. $("#country").val("China"); 3. To set a drop down box value to …
Often times, users like to press a few times on the submit button to make sure the button is surely clicked, and causing the double form submission issue. The common solution is disables the submit button after user clicked on it. 1. Enable / Disable submit button 1.1 To disable a submit button, you just …
Delicious, the best bookmark website, provides many APIs to let developers to deal with the bookmarks’ data. Here’s an example to use jQuery to retrieve the total number bookmark count of a given URL. Delicious API To get a total number of bookmark, use this http://feeds.delicious.com/v2/json/urlinfo/data?url=xxx.com&callback=? jQuery Ajax jQuery, comes with an easy but powerful …
To check if jQuery library is loaded, use the following JavaScript code : if (typeof jQuery != ‘undefined’) { alert("jQuery library is loaded!"); }else{ alert("jQuery library is not found!"); } Alternative? In some blogs and forum mention about the following alternative code : if (jQuery) { alert("jQuery library is loaded!"); } else { alert("jQuery library …
jQuery filter function is a useful feature to extract your elements from a set of the matched elements, by using the matched selector or the function’s test. 1. filter(selector) In a set of matched elements, get the elements that are match the filter() selector only. For example, $("div").filter("#div1").css(‘background-color’, ‘blue’); Matched all the div elements, and …
jQuery comes with a trigger() function to execute the event handlers that attached to elements. For instance, A single click event bind to a button with an Id of “button1”. $("#button1").bind("click", (function () { alert("Button 1 is clicked!"); })); A single click event bind to a button with an Id of “button2”. and a trigger …
jQuery bind() function is used to attach an event handler to elements, while the unbind() is used to detached an existing event handler from elements. Examples Simple html code for the demonstration. <div id="BoxId"> Mouseover Me, Click Me or Double Click Me </div> <span></span> 1. bind() jQuery has full supports of the JavaScript event types …
Both jQuery empty() and remove() are used to remove the matched elements, just the former is used to remove the child of the matched elements; while the latter is used to remove all the matched elements totally. Example 2 div tags – “BBox” is a child element to “ABox”. <div class="ABox"> I’m a A box …