How to get the children of the $(this) selector? I have a layout similar to this: <div id="..."><img src="..."></div> and would like to use a jQuery selector to select the child img inside the div on click. To get the div, I've got this selector: $(this) How can I get the child img using a selector? Answer: The jQuery constructor accepts a 2nd parameter called context which can be used to override the context of the selection. jQuery("img", this); Which is the same as using .find() like this: jQuery(this).find("img"); If the imgs you desire

Is there an “exists” function for jQuery? How can I check the existence of an element in jQuery? The current code that I have is this: if ($(selector).length>0) { // Do something } Is there is a more elegant way to approach this? Perhaps a plugin or a function? Answer: Yes! jQuery.fn.exists = function(){ return this.length > 0; } if ($(selector).exists()) { // Do something } This is in response to: Herding Code podcast with Jeff Atwood http://stackoverflow.com/questions/31044/is-there-an-exists-function-for-jquery

How can I know which radio button is selected via jQuery? I have two radio buttons and want to post the value of the selected one. How can I get the value with jQuery? I can get all of them like this: $("form :radio") How do I know which one is selected? Answer: To get the value of the selected radioName item of a form with id myForm: $('input[name=radioName]:checked', '#myForm').val() Here's an example: $('#myForm input').on('change', function() { alert($('input[name=radioName]:checked', '#myForm').val()); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="myForm"> <input type="radio" name="radioName"

How can I upload files asynchronously? I would like to upload a file asynchronously with jQuery. This is my HTML: <span>File</span> <input type="file" id="file" name="file" size="10"/> <input id="uploadbutton" type="button" value="Upload"/> And here my Jquery code: $(document).ready(function () { $("#uploadbutton").click(function () { var filename = $("#file").val(); $.ajax({ type: "POST", url: "addFile.do", enctype: 'multipart/form-data', data: { file: filename }, success: function () { alert("Data Uploaded: "); } }); }); }); Instead of the file being uploaded, I am only getting the filename. What can I do to

event.preventDefault() vs. return false When I want to prevent other event handlers from executing after a certain event is fired, I can use one of two techniques. I'll use jQuery in the examples, but this applies to plain-JS as well: 1. event.preventDefault() $('a').click(function (e) { // custom handling here e.preventDefault(); }); 2. return false $('a').click(function () { // custom handling here return false; }); Is there any significant difference between those two methods of stopping event propagation? For me, return false; is simpler, shorter and probably less

How do I return the response from an asynchronous call? I have a function foo which makes an Ajax request. How can I return the response from foo? I tried to return the value from the success callback as well as assigning the response to a local variable inside the function and return that one, but none of those ways actually return the response. function foo() { var result; $.ajax({ url: '...', success: function(response) { result = response; // return response; // <- I tried that one as