Archive for the ‘JQuery’ category

Handy jQuery snippet of the day (sum input fields)

June 19th, 2013

Here is a little handy piece of code I wrote that greatly simplifies summing values across a bunch of text inputs on your page, all you have to do is stick a class on the inputs you want to sum, in my case the class was ‘budget’ and voila, you will have the sum without having to do a bunch of this + that.

var budgetTotal = 0;
$('.budget').each(function (e, s) {
     budgetTotal += parseFloat($(s).val());
});

How to get all items from an HTML table with JQuery

April 9th, 2013

Here is a little snipped that saved me a lot of manual code writing if you are needing to iterate over a set of rows in a table you have on your webpage. Just simply use the “gt(0)” which according to the JQuery API documentation “select all elements at an index greater than index within the matched set.” Then just pair that with tr: in front of it to select all the table rows of your table and voila, you have all your rows. You can then use the .each method to do the iteration. Don’t forget to change #tableId to whatever you called it in your html, enjoy.

$("#tableId tr:gt(0)").each(function () {
    //perform logic here
});

My hack to stop jQuery events from unnecessarily firing.

January 4th, 2013

Recently I created a UI where I had 4 text inputs that will change the calculations after you lose focus of each input, each input has an event I am watching the ‘blur’ event, which is just the lostfocus of the input. You can read more about the jQuery blur event here: jQuery Blur

The problem is that jQuery is throwing these events for each of those inputs because my processing code is setting values in the other inputs, which looks like it tosses the events, so I had to write in a little hack, as seen below:

$("#YourInputId").on('blur', function (evt) {
                var $th = $(this);
                if ($th.hasClass('processing'))
                    return;
                $th.addClass('processing');
               //stuff you want to do or process
                $th.removeClass('processing');
            });

This will cause jQuery to stop its processing and wait till its done to fire off, thus not causing any UI weirdness. I hope this is of help to someone, enjoy.

Having problems setting focus on your input boxes?

December 13th, 2012

I have a html template that contains a table and rows which looks like this below

<td>
    <label class="pull-left" data-link="productname<%= elId %>"><%= ProductName %></label>
    <input class="hidden-phone input-large" id="productname<%= elId %>" type-id="Id" type="hidden" />
    <a id="mobileRef" href="#mobileModal" role="button" class="visible-phone pull-right" data-toggle="modal">Edit...</a>
</td>
<td class="hidden-phone">
    <label data-link="Rate<%= elId %>"><%= Rate %></label>
    <input id="Rate<%= elId %>" type-id="Rate" class="input-small" value="<%= Rate %>" />
</td>
<td class="hidden-phone">
    <label data-link="RateUnit<%= elId %>"><%= RateUnit %></label>
    <select id="unitsSelector<%= elId %>" type-id="RateUnit" class="input-mini" style="width: auto; min-width: 80px;" >
        <option value="<%= RateUnit %>"><%= UnitAbbr %></option>
    </select>
</td>
<td class="hidden-phone">
    <label data-link="Cost<%= elId %>"><%= Cost %></label>
    <input id="Cost<%= elId %>" type-id="Cost" class="input-mini" value="<%= Cost %>" />
</td>
<td class="hidden-phone">
    <label data-link="TotalProduct<%= elId %>"></label>
    <div id="TotalProduct<%= elId %>" type-id="TotalProduct" class="input-mini">0</div>
</td>
<td class="hidden-phone">
    <label data-link="TotalCost<%= elId %>"></label>
    <div id="TotalCost<%= elId %>" type-id="TotalCost" class="input-mini">0</div>
</td>

The problem was that when I set focus using Jquery’s focus() like so:

selectAll: function(id)
{
//this works but gets overridden by something else
$(id.currentTarget).focus();
}

So what I had to do was use the focusin() method outlined here: http://api.jquery.com/focusin/

This seems to set the focus to only the input field and ignores any other focusing that is going on, I hope this helps someone.

How to make a collapsible HTML table using jQuery

October 15th, 2012

I didn’t realize it, but when you are using an HTML table apparently anything inside your <Table> tags have to be either in a <tr> or <td>, it just simply ignores things like divs, so this didn’t allow me to just use the accordion collapsing goodness that Twitter’s bootstrap provides for me, so I had to come up with a way to get that work with tables, so here is the method that works.  First you start off with a simple table like so:

<table id="collapsibleTable">
            <thead>
            <tr>
                <th>Your Heading</th>
            </tr>
            </thead>
            <tr>
            <td>
               <label>Label to Show</label>
               <input id="yourId"></input>
               </td>
            </tr>
        </table>

Notice the label in the <td> item, this is a holder for the information when you aren’t clicked on the row of the table, below I have posted in the Javascript that does the magic using Jquery:

refreshTable: function (element) {
                $('#collapsibleTable').find('label').show();
                $('#collapsibleTable').find('div').hide();
                $('#collapsibleTable').find('input').hide();
                $('#collapsibleTable').find('select').hide();

                $(element).find('input').show();
                $(element).find('div').show();
                $(element).find('select').show();
                $(element).find('label').hide();
            }

As you can see, I use the find() method in JQuery to locate any inputs or labels or divs or even selects in the table and either hide or show them, depending on where you are in the table.  This is a bit of a hack, but it does work, it doesn’t provide the nice transition that bootstrap’s accordion does, but its is a nice way to keep your tables clean, I hope this helps someone, thanks.

JQuery lesson for the day.

August 15th, 2012

Have you ever been deeply nested in some html and need to call out to a parent nested way up many more levels? Well, typically in jQuery you would have had to do something like this $(“#selector).parent().parent()…etc. Well, I thought I would share an interesting little function I found today, the parents() function, I have an example below.

$("#selector").parents("#selectorToFind");

As you can see, all you have to do is feed it the selector, “selectorToFind” and it will traverse up the tree and find the element that I am looking for.

Get Weather Data for your website!!

May 30th, 2012

I have been looking at a few options on how to get live weather data for the web and I came across the Weather Underground’s weather API found HERE.  I have posted the code snippet below that will populate the divs with the according weather data using JQuery, I left out my API key for obvious reasons, but you can get a free one my following my link above and registering as a developer, enjoy!

$.ajax({
                url: "http://api.wunderground.com/api/<Your API Key>/geolookup/conditions/q/KY/Murray.json",
                dataType: "jsonp",
                success: function (parsed_json) {
                    $("#tempValue").val(parsed_json['current_observation']['temp_f']);
                    $('#skyCondValue').append($('<option>', { value: "skyCond" }).text(parsed_json['current_observation']['weather']));
                    $('#humidValue').val(parsed_json['current_observation']['dewpoint_f']);
                    $("#windSpeedVal").val(parsed_json['current_observation']['wind_mph']);
                    $("#windDirVal").append($('<option>', { value: "windDir" }).text(parsed_json['current_observation']['wind_dir']));
                    $('#envInfo').text(parsed_json['current_observation']['temp_f'] + " " + parsed_json['current_observation']['weather'] + " " + parsed_json['current_observation']['dewpoint_f'] + " " +
                    parsed_json['current_observation']['wind_mph'] + " " + parsed_json['current_observation']['wind_dir']);
                }
            });

Setting Input and Selects via JQuery

May 4th, 2012

I thought I would post this quick little blurb about setting your HTML controls from JQuery. Here are the 2 lines that set those property types:

$("#id1").val("Your_String");
$('#id2').append($('<option>', { value: "Your_Value" }).text("Your_String");

And here is the complete Ajax call where I am setting those properties off the returned JSON:

function() {
            $.ajax({
                url: "http://www.yourdomain.com/data.json",
		        dataType: "jsonp",
		        success: function(parsed_json) {
			        var location = parsed_json['location']['city'];
                                $("#id1").val("Your_String");
                                $('#id2').append($('<option>', { value: "Your_Value" }).text("Your_String");
			      		        }
	        });
        }