JQuery : HOWTO bind click action to RADIO BUTTON

We have RADIO buttons with name=”ethnicity” and CHECKBOX with name=”ethnicity_chk”,
We want : when user click by any RADIO checkbox should be UNCHECKED :

1
2
3
4
5
6
7
8
$(document).ready(function(){
    $('input:radio[name=ethnicity]').bind('click', function(){
                    //alert('!!!!');
                    //$('#ethnic_chk').removeAttr('checked');
                    $('#ethnicity_chk').attr('checked', false);
                }
                )
)}

How to check checkbox with JQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    //
    $("#genderMale").click(
        function() {           
         $("#genderMale").attr('checked', false);
         $("#genderFemale").attr('checked', true);
         }
         );
    //
    $("#genderFemale").click(
        function() {           
         $("#genderMale").attr('checked', false);
         $("#genderFemale").attr('checked', true);
         }
         );

Java AJAX

AJAX & Java source is here

/*
 * Возвращает новый XMLHttpRequest объект или false, если браузер его не поддерживает
 */
function newXMLHttpRequest() {

  var xmlreq = false;

  if (window.XMLHttpRequest) {

    // Создадим XMLHttpRequest объект для не-Microsoft браузеров
    xmlreq = new XMLHttpRequest();

  } else if (window.ActiveXObject) {

    // Создадим XMLHttpRequest с помощью MS ActiveX
    try {
      // Попробуем создать XMLHttpRequest для поздних версий
      // Internet Explorer

      xmlreq = new ActiveXObject("Msxml2.XMLHTTP");

    } catch (e1) {

      // Не удалось создать требуемый ActiveXObject

      try {
        // Пробуем вариант, который поддержат более старые версии
        //  Internet Explorer

        xmlreq = new ActiveXObject("Microsoft.XMLHTTP");

      } catch (e2) {

        // Не в состоянии создать XMLHttpRequest с помощью ActiveX
      }
    }
  }

  return xmlreq;
}

YUI – howto use AUTOCOMPLETE

YUI is Yahoo User Interface LIBrary

Original source is here.

I need Autocomplete for input text, named Country

* You should of couse, have YOU library on your server (in situation it is placed in /include/yui/ folder ) !

1. Insert links & JS libs :

<link rel="stylesheet" type="text/css" href="./include/yui/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="/include/yui/build/button/assets/skins/sam/button.css" />
<script type="text/javascript" src="/include/yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="/include/yui/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="/include/yui/build/element/element-min.js"></script>
<script type="text/javascript" src="/include/yui/build/button/button-min.js"></script>
<script type="text/javascript" src="/include/yui/build/calendar/calendar-min.js"></script>
<script type="text/javascript" src="/include/yui/build/tabview/tabview-min.js"></script>

<!-- // YUI AUTOCOMPLETE // -->
<link rel="stylesheet" type="text/css" href="/include/yui/build/autocomplete/assets/skins/sam/autocomplete.css" />
<script type="text/javascript" src="/include/yui/build/animation/animation-min.js"></script>
<script type="text/javascript" src="/include/yui/build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="/include/yui/build/autocomplete/autocomplete-min.js"></script>

<!-- // COUNTRY : start //-->
<style type="text/css">
#myAutoComplete {
 width: 100%; /* set width here or else widget will expand to fit its container */
 padding-bottom: 2em;
}
#myInput {
 width: 100%; /* set width here or else widget will expand to fit its container */
}
</style>

2. Insert into HTML page input text with container (for autocomplete)

Country
 <input name="country_code" type="hidden" id="country_code" tabindex="80" value="{country_code}" size="20" maxlength="2" readonly="yes" />
<div id="myAutoComplete"><input type="text" id="myInput"><div id="myContainer"></div></div>

3. Prepare data for country

if (typeof _2M == "undefined" || !_2M ) {
 var _2M = {};
}
_2M.Data = {
    arrayCountryCodes: [
        ["Afghanistan", "AF"],
        ["Aland Islands", "AX"],
        ["Albania", "AL"],
        ["Algeria", "DZ"],
        ["American Samoa", "AS"],
        ["Andorra", "AD"],
    ]
};

4. Add avaScript code for AUTOCOMPLETE can work : we have hidden field, in which we should get country code(!, and in visible Input text we should get full country name (e.g. Austria or Finland)

<SCRIPT type="text/JavaScript">

///*
YAHOO.example.BasicLocal = function() {
 // Use a LocalDataSource
 var oDS = new YAHOO.util.LocalDataSource(_2MData.arrayCountryCodes);
 // Optional to define fields for single-dimensional array
 oDS.responseSchema = {fields : ["country", "code"]};

 // Instantiate AutoCompletes
 var oConfigs = {
 prehighlightClassName: "yui-ac-prehighlight",
 useShadow: true,
 queryDelay: 0,
 minQueryLength: 0,
 animVert: 0
 }
 
 // Instantiate the AutoComplete
 var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS, oConfigs );
 oAC.prehighlightClassName = "yui-ac-prehighlight";
 oAC.useShadow = true;
 
 oAC.resultTypeList = false;
 oAC.formatResult = function(oResultData, sQuery, sResultMatch) {
 return (oResultData.country);
 };

 // Define an event handler to populate a hidden form field
 // when an item gets selected and populate the input field
 var myHiddenField = YAHOO.util.Dom.get("country_code");
 var myHandler = function(sType, aArgs) {
 var myAC = aArgs[0]; // reference back to the AC instance
 var elLI = aArgs[1]; // reference to the selected LI element
 var oData = aArgs[2]; // object literal of selected item's result data
 
 // update hidden form field with the selected item's ID
 myHiddenField.value = oData.code;
 
 //myAC.getInputEl().value = oData.fname + " " + oData.lname + (oData.nname ? " (" + oData.nname + ")" : "");
 //myAC.getInputEl().value = "";
 };
 oAC.itemSelectEvent.subscribe(myHandler);
 
 return {
 oDS: oDS,
 oAC: oAC
 };
}();
</script>