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 […]
In JavaScript, you can use JSON.stringify to convert an array or values into a JSON formatted string. var output = {} output[0] = "a"; output[1] = "b"; output[2] = "c"; console.log( JSON.stringify(output) ); Output { "0":"a", "1":"b", "2":"c" } 1. jQuery Ajax Request Often times, you need to convert the JavaScript values into JSON before […]
This article will show you how to use jQuery.ajax to send a HTML form request to a Spring REST API and return a JSON response. Tools used : Spring Boot 1.5.1.RELEASE Spring 4.3.6.RELEASE Maven 3 jQuery Bootstrap 3 Note You may interest at this classic Spring MVC Ajax example 1. Project Structure A standard Maven […]
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 […]
This article shows you how to upload files in Spring Boot web application (REST structure), using Ajax requests. Tools used in this article : Spring Boot 1.4.3.RELEASE Spring 4.3.5.RELEASE Thymeleaf jQuery (webjars) Maven Embedded Tomcat 8.5.6 Google Chrome Browser (Network Inspect) 1. Project Structure A standard Maven project structure. 2. Project Dependency Declares an extra […]
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); […]
In this tutorial, we will show you how to create a Spring MVC web project and submit a form via Ajax. Technologies used : Spring 4.2.2.RELEASE Jackson 2.6.3 Logback 1.1.3 jQuery 1.10.2 Maven 3 JDK 1.8 Tomcat 8 or Jetty 9 Eclipse 4.5 Boostrap 3 P.S If the Jackson library is found in the project […]
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 […]
In this tutorial, we show you how to integrate jQuery autocomplete plugin with Spring MVC. Tools and Libraries used : Spring MVC 3.2 jQuery autocomplete plugin – github Maven 3 Eclipse IDE Review the tutorial’s flows : An HTML page, with a textbox. If the user is tying on the textbox, it will fire an […]
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; […]
In this tutorial, we show you how to find a location using an IP address, with the following technologies : Spring MVC frameworks. jQuery (Ajax Request). GeoLite database. Google Map. Review the tutorial’s flows A page with a text input and button. Type an IP address, and clicks on the button. jQuery fires an Ajax […]
See a simple JSF example : <h:form id="signup-form"> <h:inputText id="email" value="#{beanBean.email}" /> </h:form> It will generates following HTML code : <input id="signup-form:email" type="text" /> Uses jQuery selector to get the email id, but failed. <script> jQuery(document).ready(function($) { $(‘#signup-form:email’).checkEmailFormat(); }); </script> Solution This is a well-known problem to integrate JSF and jQuery – the colon “:” […]
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 tutorial with full example, including jQuery selectors, DOM traversing, common practice, event handling (form, browser, mouse ,keyboard), animations effects and Ajax stuff
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 […]
