Jump to content

Multiple selection

shage

By shage
in Javascript Help

 Share

Recommended Posts

shage Regular Member

shage

Posted
Posted 

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.1/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.1/build/paginator/assets/skins/sam/paginator.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.1/build/datatable/assets/skins/sam/datatable.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/connection/connection-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/json/json-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/element/element-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/paginator/paginator-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/datatable/datatable-min.js"></script>
<script src="YUI/2.6.0/build/button/button-min.js" type="text/javascript"></script>


<!--begin custom header content for this example-->
<style type="text/css">
    #toolbar
{
	width:800px;
	height:100px;
}
#paginated {
        text-align: center;
    }
    #paginated table {
        margin-left:auto; margin-right:auto;
    }
    #paginated, #paginated .yui-dt-loading {
        text-align: center; background-color: transparent;
    }
</style>

<!--end custom header content for this example-->

<!--<link href="YUI/2.6.0/build/fonts/fonts-min.css" rel="stylesheet" type="text/css">
<link href="YUI/2.6.0/build/button/assets/skins/sam/button.css" rel="stylesheet" type="text/css">-->


<!--<body class="yui-skin-sam">-->

<div id="contentcontainer" class="content fix"> 
<div id="contentborder">
<div id="maincontent" class="fullwidth">
<div class="copy fix">
<span style="font-family:Georgia, 'Times New Roman', Times, serif"><p>In  1835, Santiago  do Iguape had 959* households: groups of people living together in the same  domestic space.  This search engine lets  you examine how the race, sex, and marital status of the head of household  shaped other characteristics of the group that lived there.  Choose any of the following variables encoded  by the census taker to see the characteristics of households that meet your  queries.<br>
      <em>* this total excludes the households identified as headed by slaves</em></p>
<p><strong>How to Search:</strong></p>
<p>You may choose to limit your search by any of the filters  below, choosing as many or as few as you wish. [in development]  </p>
After all the households matching your search criteria display, click the column headings to further sort your responses. 
</span>
</div>
<p> </p>
<hr>
<p> </p>
<div id="toolbar" align="center">

    <fieldset style="width:100px;text-align:left;float:left;position:relative;">
<legend>Sex</legend>
<input type="checkbox" name="chkMale" id="chkMale" value="male">Male<br>
<input type="checkbox" name="chkFeMale" id="chkFeMale" value="female">Female
</fieldset>

<fieldset style="width:100px;text-align:left;float:left;position:relative;">
<legend>Racial Category</legend>
<input type="checkbox" name="chkBranco" id="chkBranco" value="branco">Branco<br>
<input type="checkbox" name="chkPardo" id="chkPardo" value="pardo">Pardo<br>
<input type="checkbox" name="chkPreto" id="chkPreto" value="preto">Preto<br>
<input type="checkbox" name="chkCabra" id="chkCabra" value="cabra">Cabra<br>
</fieldset>

	<fieldset style="width:100px;text-align:left;float:left;position:relative;">
<legend>Civil Satus</legend>
<input type="checkbox" name="chkFree" id="chkFree" value="free">Free<br>
<input type="checkbox" name="chkFreed" id="chkFreed" value="freed">Freed<br>
</fieldset>

  	<fieldset style="width:100px;text-align:left;float:left;position:relative;">
<legend>Marital Status</legend>
<input type="checkbox" name="chkSingle" id="chkSingle" value="single">Single<br>
<input type="checkbox" name="chkMarried" id="chkMarried" value="married">Married<br>
<input type="checkbox" name="chkWidow" id="chkWidow" value="widow(ed)">Widow(ed)<br>
</fieldset>

<label for="filter">Filter by Name:</label> <input type="text" id="filter" value="">
</div>

<p> </p>
<!-- Form buttons rendered here -->
<!--Datatable rendered here-->
<div id="paginated" class="yui-skin-sam"></div>

<!--BEGIN SOURCE CODE FOR TABLE =============================== -->

<script type="text/javascript">
YAHOO.util.Event.addListener(window, "load", function() {
    
var Ex = YAHOO.namespace('example');

    Ex.dataSource = new YAHOO.util.DataSource("iguape_json.php?",{
        responseType : YAHOO.util.DataSource.TYPE_JSON,
        responseSchema : {
            resultsList: "records",
		fields: ["name","age","nSlaves","nKids","nIndividuals","race","sex","marital","civil","family","occupation"]
        },

        doBeforeCallback : function (req,raw,res,cb) {
            // This is the filter function
            var data     = res.results || [],
                filtered = [],
			filtered_new = [],
                i,l;

           	if (req) {
                if(req.indexOf(":")!=-1)
			{
				var aReq=req.split(":");
				var caption=aReq[0].toLowerCase();
				req=aReq[1].toLowerCase();
			}

			if(caption=="sex")
			{
				if(YAHOO.util.Dom.get("chkMale").checked && YAHOO.util.Dom.get("chkFeMale").checked)
				{
					req="";
				}
				else if(YAHOO.util.Dom.get("chkMale").checked==false && YAHOO.util.Dom.get("chkFeMale").checked==false)
				{
					req="";
				}
				else if(YAHOO.util.Dom.get("chkMale").checked)
				{
					req="male";
				}
				else if(YAHOO.util.Dom.get("chkFeMale").checked)
				{
					req="female";
				}
			}
                if(caption=="civil")
			{
				if(YAHOO.util.Dom.get("chkFree").checked && YAHOO.util.Dom.get("chkFreed").checked)
				{
					req="";
				}
				else if(YAHOO.util.Dom.get("chkFree").checked==false && YAHOO.util.Dom.get("chkFreed").checked==false)
				{
					req="";
				}
				else if(YAHOO.util.Dom.get("chkFree").checked)
				{
					req="free";
				}
				else if(YAHOO.util.Dom.get("chkFreed").checked)
				{
					req="freed";
				}
			}
			if(caption=="race")
			{
				if(YAHOO.util.Dom.get("chkBranco").checked && YAHOO.util.Dom.get("chkPardo").checked && YAHOO.util.Dom.get("chkPreto").checked && YAHOO.util.Dom.get("chkCabra").checked)
				{
					req="";
				}
				else if(YAHOO.util.Dom.get("chkBranco").checked==false && YAHOO.util.Dom.get("chkPardo").checked==false && YAHOO.util.Dom.get("chkPreto").checked==false && YAHOO.util.Dom.get("chkCabra").checked==false)
				{
					req="";
				}
				else if(YAHOO.util.Dom.get("chkBranco").checked)
				{
					req="branco";
				}
				else if(YAHOO.util.Dom.get("chkPardo").checked)
				{
					req="pardo";
				}
				else if(YAHOO.util.Dom.get("chkPreto").checked)
				{
					req="preto";
				}
				else if(YAHOO.util.Dom.get("chkCabra").checked)
				{
					req="cabra";
				}
			}

if(caption=="marital")
			{
				if(YAHOO.util.Dom.get("chkSingle").checked && YAHOO.util.Dom.get("chkMarried").checked && YAHOO.util.Dom.get("chkWidow").checked)
				{
					req="";
				}
				else if(YAHOO.util.Dom.get("chkSingle").checked==false && YAHOO.util.Dom.get("chkMarried").checked==false && YAHOO.util.Dom.get("chkWidow").checked==false)
				{
					req="";
				}
				else if(YAHOO.util.Dom.get("chkMarried").checked)
				{
					req="married";
				}
				else if(YAHOO.util.Dom.get("chkSingle").checked)
				{
					req="single";
				}
				else if(YAHOO.util.Dom.get("chkWidow").checked)
				{
					req="widow(ed)";
				}
			}

			if(req)
			{
				req = req.toLowerCase();

				if(caption!="sex" && YAHOO.util.Dom.get("chkMale").checked==true && YAHOO.util.Dom.get("chkFeMale").checked==false)
				{
					for (i = 0, l = data.length; i < l; ++i) 
					{
						if (data[i].sex.toLowerCase()=="male") 
						{
							filtered.push(data[i]);
						}
					}
					data=filtered;
					if(filtered_new)
					{
						filtered=filtered_new;
					}
					else
					{
						filtered_new=filtered;
						filtered=[];
					}
				}
				if(caption!="sex" && YAHOO.util.Dom.get("chkFeMale").checked==true && YAHOO.util.Dom.get("chkMale").checked==false)
				{
					for (i = 0, l = data.length; i < l; ++i) 
					{
						if (data[i].sex.toLowerCase()=="female") 
						{
							filtered.push(data[i]);
						}
					}
					data=filtered;
					if(filtered_new)
					{
						filtered=filtered_new;
					}
					else
					{
						filtered_new=filtered;
						filtered=[];
					}
				}
				if(caption!="race" && YAHOO.util.Dom.get("chkBranco").checked==true && YAHOO.util.Dom.get("chkPardo").checked==false && YAHOO.util.Dom.get("chkPreto").checked==false && YAHOO.util.Dom.get("chkCabra").checked==false)
				{
					for (i = 0, l = data.length; i < l; ++i) 
					{
						if (data[i].race.toLowerCase()=="branco") 
						{
							filtered.push(data[i]);
						}
					}
					data=filtered;
					if(filtered_new)
					{
						filtered=filtered_new;
					}
					else
					{
						filtered_new=filtered;
						filtered=[];
					}
				}
				if(caption!="race" && YAHOO.util.Dom.get("chkBranco").checked==false && YAHOO.util.Dom.get("chkPardo").checked==true && YAHOO.util.Dom.get("chkPreto").checked==false && YAHOO.util.Dom.get("chkCabra").checked==false)
				{
					for (i = 0, l = data.length; i < l; ++i) 
					{
						if (data[i].race.toLowerCase()=="pardo") 
						{
							filtered.push(data[i]);
						}
					}
					data=filtered;
					if(filtered_new)
					{
						filtered=filtered_new;
					}
					else
					{
						filtered_new=filtered;
						filtered=[];
					}
				}                    
									if(caption!="race" && YAHOO.util.Dom.get("chkBranco").checked==false && YAHOO.util.Dom.get("chkPardo").checked==false && YAHOO.util.Dom.get("chkPreto").checked==false && YAHOO.util.Dom.get("chkCabra").checked==true)
				{
					for (i = 0, l = data.length; i < l; ++i) 
					{
						if (data[i].race.toLowerCase()=="cabra") 
						{
							filtered.push(data[i]);
						}
					}
					data=filtered;
					if(filtered_new)
					{
						filtered=filtered_new;
					}
					else
					{
						filtered_new=filtered;
						filtered=[];
					}
				} 

				if(caption=="name")
				{

					for (i = 0, l = data.length; i < l; ++i) {
					if (data[i].name.toLowerCase().indexOf(req)!=-1) {
						filtered.push(data[i]);
					}
				}
				}
			if(caption=="civil")
				{
					for (i = 0, l = data.length; i < l; ++i) 
					{
						if (data[i].civil.toLowerCase()==req) 
						{
							filtered.push(data[i]);
						}
					}
				}
       if(caption=="marital")
				{

					for (i = 0, l = data.length; i < l; ++i) 
					{
						if (data[i].marital.toLowerCase()==req) 
						{
							filtered.push(data[i]);
						}
					}
				}
				if(caption=="sex")
				{

					for (i = 0, l = data.length; i < l; ++i) 
					{
						if (data[i].sex.toLowerCase()==req) 
						{
							filtered.push(data[i]);
						}
					}
				}
                    	if(caption=="race")
				{

					for (i = 0, l = data.length; i < l; ++i) 
					{
						if (data[i].race.toLowerCase()==req) 
						{
							filtered.push(data[i]);
						}
					}
				}

				res.results = filtered;
			}
            }

            return res;
        }
    });

    Ex.cols = [
        {key:"name", label:"Name",sortable:true,width:108},
            {key:"age", label:"Age",formatter:YAHOO.widget.DataTable.formatNumber,sortable:true,width:40},
		{key:"nSlaves", label:"N Slaves",formatter:YAHOO.widget.DataTable.formatNumber,sortable:true,width:40},
		{key:"nKids", label:"N Kids",formatter:YAHOO.widget.DataTable.formatNumber,sortable:true,width:40},
		{key:"nIndividuals", label:"N Individuals",formatter:YAHOO.widget.DataTable.formatNumber,sortable:true,width:60},
            {key:"race", label:"Racial Category",sortable:true,width:110},
		{key:"sex", label:"Sex",sortable:true,width:40},
		{key:"marital", label:"Marital Status",sortable:true,width:80},
		{key:"civil", label:"Civil Status",sortable:true,width:40},
		{key:"family", label:"Family Structure",sortable:true,width:80},
		{key:"occupation", label:"Occupation",sortable:true,width:100}
    ];

    Ex.paginator = new YAHOO.widget.Paginator({
        rowsPerPage   : 10,
        pageLinks     : 10
    });

    Ex.conf = {
        paginator : Ex.paginator,
        sortedBy: {key:'name', dir:YAHOO.widget.DataTable.CLASS_ASC}
    };

    Ex.dataTable = new YAHOO.widget.DataTable('paginated',Ex.cols,Ex.dataSource,Ex.conf);

    Ex.filterTimeout = null;
    Ex.updateFilter  = function (control, caption) {
	// Reset timeout
        Ex.filterTimeout = null;

        // Reset sort
        var sKey = Ex.dataTable.getState();
            sKey.sortedBy = {key:'name', dir:YAHOO.widget.DataTable.CLASS_ASC};

	var val="";
	if(control)
	{
		val= YAHOO.util.Dom.get(control).value;
	}
	var passValue=caption+":"+val;

        // Get filtered data
        Ex.dataSource.sendRequest(passValue,{
            success : Ex.dataTable.onDataReturnInitializeTable,
            failure : Ex.dataTable.onDataReturnInitializeTable,
            scope   : Ex.dataTable,
            argument: caption
        });
    };

    YAHOO.util.Event.on('filter','keyup',function (e) {
        clearTimeout(Ex.filterTimeout);
        setTimeout(Ex.updateFilter('filter', 'name'),600);
    });
YAHOO.util.Event.on('condition','change',function (e) {
        clearTimeout(Ex.filterTimeout);
        setTimeout(Ex.updateFilter('condition', 'civil'),600);
    });
YAHOO.util.Event.on('civil','change',function (e) {
        clearTimeout(Ex.filterTimeout);
        setTimeout(Ex.updateFilter('civil', 'marital'),600);
    });

//Sex Area

YAHOO.util.Event.on('chkMale','change',function (e) {
        clearTimeout(Ex.filterTimeout);
		setTimeout(Ex.updateFilter('chkMale', 'sex'),600);

    });
YAHOO.util.Event.on('chkFeMale','change',function (e) {
       clearTimeout(Ex.filterTimeout);
	setTimeout(Ex.updateFilter('chkFeMale', 'sex'),600);
});


// RACE AREA

YAHOO.util.Event.on('chkBranco','change',function (e) {
        clearTimeout(Ex.filterTimeout);
        setTimeout(Ex.updateFilter('chkBranco', 'race'),600);
    });

YAHOO.util.Event.on('chkPardo','change',function (e) {
        clearTimeout(Ex.filterTimeout);
        setTimeout(Ex.updateFilter('chkPardo', 'race'),600);
    });

YAHOO.util.Event.on('chkPreto','change',function (e) {
        clearTimeout(Ex.filterTimeout);
        setTimeout(Ex.updateFilter('chkPreto', 'race'),600);
    });

YAHOO.util.Event.on('chkCabra','change',function (e) {
        clearTimeout(Ex.filterTimeout);
        setTimeout(Ex.updateFilter('chkCabra', 'race'),600);
    });
    
    // Civil AREA

YAHOO.util.Event.on('chkFree','change',function (e) {
        clearTimeout(Ex.filterTimeout);
        setTimeout(Ex.updateFilter('chkFree', 'civil'),600);
    });

YAHOO.util.Event.on('chkFreed','change',function (e) {
        clearTimeout(Ex.filterTimeout);
        setTimeout(Ex.updateFilter('chkFreed', 'civil'),600);
    });
    
        // Marraige AREA

YAHOO.util.Event.on('chkSingle','change',function (e) {
        clearTimeout(Ex.filterTimeout);
        setTimeout(Ex.updateFilter('chkSingle', 'marital'),600);
    });

YAHOO.util.Event.on('chkMarried','change',function (e) {
        clearTimeout(Ex.filterTimeout);
        setTimeout(Ex.updateFilter('chkMarried', 'marital'),600);
    });
    	YAHOO.util.Event.on('chkWidow','change',function (e) {
        clearTimeout(Ex.filterTimeout);
        setTimeout(Ex.updateFilter('chkWidow', 'marital'),600);
    });

});

</script>

<div class="copy fix">
<p>Original Source for the Database:
</p>
<p>
Arquivo Público do Estado da Bahia, Salvador. “Relação de Fogos e Moradores da Freguesia de Santiago Maior do Iguape, da comarca da Vila da Cachoeira,” Seção Provincial e Colonial, maço 6175-1.
</p>
</div>


</div>



	<?php //include (THEME_LIB . '/_contentfooter.php'); ?>
	<div class="clear"></div>
</div>
</div>

 

This is what i have for my code, for some reason i cant get it to allow multiple selections for say marriage or race and output all that is checked, thanks

 

example site is

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.