JSFiddle - React, Tailwind, and code Playground

by netsi1964

HTML

<link rel="stylesheet" href="http://bootswatch.com/slate/bootstrap.min.css">
<h1>Enter a danish zipcode</h1>
<div class="container">
<label for="zip">Zip</label>
<input type="text" id="zip" />

<label for="City">City</label>
<input type="text" id="City" />
</div>

<div class="container">
    <a href="http://gist.github.com/3347519">http://gist.github.com/3347519</a>
</div>

JavaScript

// http://gist.github.com/3347519
function getCityFromZipCode(sZipcodeSelector, sTargetSelector, sLoadingClass) {
    var sLoadingClass = (sLoadingClass||'loading');
    var $sTargetSelector = jQuery(sTargetSelector);
    var $sZipcodeSelector = jQuery(sZipcodeSelector);
    if ($sTargetSelector.length>0 && $sZipcodeSelector.length>0) {
        var sZipCode = $sZipcodeSelector.val();
        $sTargetSelector.removeClass(sLoadingClass).addClass(sLoadingClass);
        $.ajax({
            url: 'http://geo.oiorest.dk/postnumre/'+sZipCode+'.json?callback=?',
            method: 'get',
            dataType: 'json',
            crossDomain: true,
            success: function(data) {
                $sTargetSelector.val(data.navn);
                $sTargetSelector.removeClass(sLoadingClass);
            }
        });
        return true;
    } else {
        return false;
    }
}

// TEST setup
$(function() {
    $('#zip').on('keyup', function() {
    getCityFromZipCode('#zip', '#City', 'loading') 
    });
});