I need to change the country code in the URL when I select the country from the dropdown.
Currently I only have 3 countries in the dropdown, but when I switch from SG (testing.com/sg/features) to IE, the resulting URL becomes (testing.com/ie/sg/features). It works fine when I switch from IE(testing.com/ie/features) to SG(testing.com/sg/features) tho.
<form name="form1">
<select class="region regionTopBar" onchange="formChanged(this);" name="country" size="1" style="font-family: inherit; padding: 5px; border:0px; outline:0px;">
<option value="/">International</option>
<option value="sg/">Singapore</option>
<option value="ie/">Ireland</option>
</select>
</form>
<script>
function formChanged(form) {
var formCountryCode = form.options[form.selectedIndex].value;
var formCountryName = form.options[form.selectedIndex].text;
if (formCountryCode !== null) {
if (localStorage) {
localStorage.country = formCountryCode ;
localStorage.currentSite = formCountryName ;
}
if(formCountryCode == "sg/"){
var url = window.location.href.replace("testing.com/", "testing.com/sg/");
location = url;
}
else if(formCountryCode == "ie/"){
var url = window.location.href.replace("testing.com/", "testing.com/ie/");
location = url;
}
//remove country code from URL when International is selected
else {
var thisLocation = window.location.href;
var splitLoc = thisLocation.split('/');
var newLocation = "";
for (let i = 0; i < splitLoc.length; i++){
if (splitLoc[i] !== "sg" && splitLoc[i] !== "ie")
newLocation += splitLoc[i] + '/';
}
newLocation = newLocation.substring(0, newLocation.length - 1);
location = newLocation ;
}
}
}
</script>
Adding if else like this can fix the issue but as the number of countries increase, it is going to be a mess.
else if(formCountryCode == "ie/" && window.location.href.indexOf("sg/") < 1){
var url = window.location.href.replace("testing.com/", "testing.com/ie/");
location = url;
}
else if(formCountryCode == "ie/" && window.location.href.indexOf("sg/") > 0){
var url = window.location.href.replace("testing.com/sg/", "testing.com/ie/");
location = url;
}
So I am looking for a dynamic way to achieve this.
you can leave out the domain and do this for all country codes.
window.location.href = "/" + formCountryCode
as the domain remains unchanged.
if there is a pathname, then you can do
window.location.href = window.location.pathname.replace(/\/.+?\//, "/" + formCountryCode + "/")
if the pathname is / then we can do this
const path = window.location.pathname;
window.location.href = path === "/" ?
"/" + formCountryCode :
path.replace(/\/.+?\//, "/" + formCountryCode + "/");
Related
Over my head with javascript. I'm trying to get the cards to shuffle when clicking next.
Currently, it moves forward with one random shuffle and stops. Back and forward buttons then no longer work at that point.
Please help—many thanks.
When I'm lost and unsure what sample of the code to pinpoint, the captions go up to 499. The sample is also here: https://rrrhhhhhhhhh.github.io/sentences/
Very new to javascript. So any help is greatly appreciated. Very open to better ways to achieve this???
How I have it set up:
HTML:
var r = -1;
var mx = 499; // maximum
var a = new Array();
function AddNumsToDict(){
var m,n,i,j;
i = 0;
j = 0;
while (i <= 499)
{
m = (500 * Math.random()) + 1;
n = Math.floor(m);
for (j=0;j<=499;j++)
{
if (a[j] == (n-1))
{
j = -1;
break;
}
}
if (j != -1)
{
//a.push(n-1);
a[i] = (n-1);
i++;
j=0;
}
}
return;
}
function startup()
{
writit('SENTENCES<br><br><br>Robert Grenier', 'test');
SetCookie("pg", -1);
AddNumsToDict();
}
function SetCookie(sName, sValue)
{
document.cookie = sName + "=" + escape(sValue) + ";"
}
function GetCookie(sName)
{
// cookies are separated by semicolons
var aCookie = document.cookie.split("; ");
for (var i=0; i < aCookie.length; i++)
{
// a name/value pair (a crumb) is separated by an equal sign
var aCrumb = aCookie[i].split("=");
if (sName == aCrumb[0])
return unescape(aCrumb[1]);
}
// a cookie with the requested name does not exist
return null;
}
function doBack(){
//var oPrev = xbElem('prev');
//var oNxt = xbElem('nxt');
//if ((oNxt) && (oPrev))
//{
var num = GetCookie("pg");
if (num == mx){ //maximum
SetCookie("pg",parseInt(num) - 1);
num = GetCookie("pg");
}
// oNxt.disabled = false;
// if (num <= 1){
// oPrev.disabled = true;
// }
if (num >= 1){
num--;
writit(Caption[a[num]], 'test');
SetCookie("pg",num);
}
//}
}
function doNext(){
//var oPrev = xbElem('prev');
//var oNxt = xbElem('nxt');
// if ((oNxt) && (oPrev))
// {
var num = GetCookie("pg");
// if (num > -1){
// oPrev.disabled = false;
// }
// else{
// oPrev.disabled = true;
// }
// if (num >= parseInt(mx)-1){ //maximum - 1
// oNxt.disabled = true;
// }
// else {
// oNxt.disabled = false;
// }
if (num <= parseInt(mx)-2){
num++;
writit(Caption[a[num]],'test');
SetCookie("pg",num);
}
// }
}
function writit(text,id)
{
if (document.getElementById)
{
x = document.getElementById(id);
x.innerHTML = '';
x.innerHTML = text;
}
else if (document.all)
{
x = document.all[id];
x.innerHTML = text;
}
else if (document.layers)
{
x = document.layers[id];
l = (480-(getNumLines(text)*8))/2;
w = (764-(getWidestLine(text)*8))/2;
text2 = '<td id=rel align="center" CLASS="testclass" style="font:12px courier,courier new;padding-left:' + w.toString() + 'px' + ';padding-top:' + l.toString() + 'px' + '">' + text + '</td>';
x.document.open();
x.document.write(text2);
x.document.close();
}
}
function getNumLines(mystr)
{
var a = mystr.split("<br>")
return(a.length);
}
function getWidestLine(mystr)
{
if (mystr.indexOf(" ") != -1)
{
re = / */g;
mystr = mystr.replace(re,"Z");
//alert(mystr);
}
if (mystr.indexOf("<u>") != -1)
{
re = /<u>*/g;
mystr = mystr.replace(re, "");
re = /<\/u>*/g;
mystr = mystr.replace(re, "");
}
if (mystr.indexOf("<br>") != -1)
{
var ss, t;
var lngest;
ss = mystr.split("<br>");
lngest = ss[0].length;
for (t=0; t < ss.length; t++)
{
if (ss[t].length > lngest)
{
lngest = ss[t].length;
}
}
}
else {
lngest = mystr.length;
}
return(lngest);
}
// -->
</script>
<body bgcolor="gainsboro" onload="startup();">
<table bgcolor="white" border height="480px" width="764px" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<table nowrap>
<tr>
<td><img width="700px" height="1px" src="./resources/images/w.gif"></td>
<td>
<div class="testclass" id="test"></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<center>
<form>
<p>
<input type="button" onclick="doBack(); return false" value="Back">
<input type="button" onclick="doNext(); return false" value="Next">
JS:
var _____WB$wombat$assign$function_____ = function(name) {return (self._wb_wombat && self._wb_wombat.local_init && self._wb_wombat.local_init(name)) || self[name]; };
if (!self.__WB_pmw) { self.__WB_pmw = function(obj) { this.__WB_source = obj; return this; } }
{
let window = _____WB$wombat$assign$function_____("window");
let self = _____WB$wombat$assign$function_____("self");
let document = _____WB$wombat$assign$function_____("document");
let location = _____WB$wombat$assign$function_____("location");
let top = _____WB$wombat$assign$function_____("top");
let parent = _____WB$wombat$assign$function_____("parent");
let frames = _____WB$wombat$assign$function_____("frames");
let opener = _____WB$wombat$assign$function_____("opener");
function CaptionArray(len) {
this.length=len
}
Caption = new CaptionArray(499);
Caption[0] = "leaf and the ants as latterly"
Caption[1] = "thought<br>living in<br>Davis would<br>be ok"
Caption[2] = "sure arm today"
Caption[3] = "AMY<br><br>no we<br>both do<br>different<br>songs together"
Caption[4] = "much of anything she doesn't like that at all"
Caption[5] = "SUNG AS LAKE<br><br><br>that never wanted back to come"
Caption[6] = "five sound shut doors"
Caption[7] = "oh<br>my nose is<br>so<br>red<br>Obediah<br>dear"
Caption[8] = "these<br>cubes<br>have been<br>on the floor"
Caption[9] = "sweating importunate"
Caption[10] = "all over noises phone rings"
Caption[11] = "I think this is the water supply for Lake Johnsbury"
Caption[12] = "Paw so greasy"
Caption[13] = "BLACK & WHITE RAIN<br><br><br>clear water grey drops<br><br><br>on windshields in a line<br><br><br>of cars progressing slowly<br><br><br>with windshield wipers wiping"
Caption[14] = "EMILY<br><br>Roger,<br><br>are you<br><br>thinking of me"
Caption[15] = "STICKS<br><br><br>rhythm is inside the sound like another"
Caption[16] = "I think their dog always barks when coming back from the woods"
Caption[17] = "weren't there<br><br>conversations"
Caption[18] = "LOOKING AT FIRE<br><br><u>ashes</u> to ashes<br><br>looking at the fire<br><br>at has been added"
Caption[19] = "a the bank"
}
I have a problem.
$('#value-salary').on('keyup', function(){
if($(this).val() != ""){
var n = parseInt($(this).val().replace(/\D/g,''),10);
$(this).val(n.toLocaleString());
}
});
This allow me to see "." as thousand separator while typing. Before submit I will replace "." with "" and for now it's all ok.
The problem is that the keyup doesn't allow me to insert "," and I need to use this as decimal separator (before sending i will replace , with . but user is not interested in rest api. He want to see "," as decimal separator).
How can i fix this problem? Keypress or keydown are not good solutions...thanks!
you can use autoNumeric.js.
$(".testInput").autoNumeric('init', {
aSep: '.',
aDec: ',',
aForm: true,
vMax: '999999999',
vMin: '-999999999'
});
<input class="testInput" type="text" value="8000"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/autonumeric/1.8.2/autoNumeric.js"></script>
please see more information how to use numeric.
http://www.decorplanit.com/plugin/
You can try this piece of code. It places , as thousand separator and you can use . for your decimal separator. You can easily customize the symbols you want to use for each purpose.
<html>
<head>
<script language="javascript" type="text/javascript">
function thousandSeparator(n, sep) {
var sRegExp = new RegExp('(-?[0-9]+)([0-9]{3})'),
sValue = n + '';
if (sep == undefined) { sep = ','; }
while (sRegExp.test(sValue)) {
sValue = sValue.replace(sRegExp, '$1' + sep + '$2');
}
return sValue;
}
function showSeparator() {
var myValue = document.getElementById("txtInvoicePrice").value;
myValue = thousandSeparator(myValue.replace(/,/g, ""), ',');
document.getElementById("txtInvoicePrice").value = myValue;
}
function removeSeparator() {
var myValue = document.getElementById("txtInvoicePrice").value;
myValue = myValue.replace(',', '');
document.getElementById("txtInvoicePrice").value = myValue;
}
</script>
</head>
<body>
<input type="text" id="txtInvoicePrice" onfocus="javascript:removeSeparator();" onblur="javascript:showSeparator();" />
</body>
</html>
It works for me with javascript code:
<input type="text" name="xxx" onkeyup="ididit(this,this.value.charAt(this.value.length-1))" value=""/>
And:
<script>
function ididit(donde,caracter) {
pat = /[\*,\+,\(,\),\?,\\,\$,\[,\],\^]/
valor = donde.value
largo = valor.length
crtr = true
if(isNaN(caracter) || pat.test(caracter) == true) {
if (pat.test(caracter)==true) {
caracter = "\\" + caracter
}
carcter = new RegExp(caracter,"g")
valor = valor.replace(carcter,"")
donde.value = valor
crtr = false
} else {
var nums = new Array()
cont = 0
for(m=0;m<largo;m++) {
if(valor.charAt(m) == "," || valor.charAt(m) == " ") {
continue;
}else{
nums[cont] = valor.charAt(m)
cont++
}
}
}
var cad1="",cad2="",tres=0
var cad3="",cad4=""
if(largo > 3 && crtr == true) {
if (nums[0]=="$"){
nums.shift()
}
for (k=nums.length-1;k>=0;k--) {
cad1 = nums[k]
cad2 = cad1 + cad2
tres++
if((tres%3) == 0) {
if(k!=0){
cad2 = "," + cad2
}
}
if (k==0) {
cad2 = "$ " + cad2
}
}
donde.value = cad2
} else if (largo <= 3 && crtr == true) {
if (nums[0]=="$"){
nums.shift()
}
for (k=nums.length-1;k>=0;k--) {
cad3 = nums[k]
cad4 = cad3 + cad4
if (k==0) {
cad4 = "$ " + cad4
}
}
donde.value = cad4
}
}
</script>
I have the following script. After a user clicks submits I want to redirect the user to the same page and populate the drop down and input box with parameter values from the url. Unfortunately they are not populating once the redirect completes. I also need to strip off * from the FilterMultiValue parameter so that the textbox has the orginal value entered?
I've checked the parameter values using an alert function and that works?
<script type="text/javascript">
function getUrlParams() {
var paramMap = {};
if (location.search.length == 0) {
return paramMap;
}
var parts = location.search.substring(1).split("&");
for (var i = 0; i < parts.length; i ++) {
var component = parts[i].split("=");
paramMap [decodeURIComponent(component[0])] = decodeURIComponent(component[1]);
}
return paramMap;
}
function RedirectUrl() {
var tb = document.getElementById("tbSearch").value;
var cs = document.getElementById("sfield").value;
var url = "";
if (tb != "") {
url = "FilterName=" + cs + "&FilterMultiValue=*" + tb + "*";
window.location.href = "mypage.aspx?" + url;
var params = getUrlParams();
alert(params.FilterName);
document.getElementById("sfield").value = params.FilterName;
document.getElementById('tbSearch').value = params.FilterMultiValue;
}
else {
return false;
}
}
function ClearUrl() {
window.location.href = "mypage.aspx";
document.getElementById("sfield").value = "";
document.getElementById('tbSearch').value = "";
}
</script>
Search Field:
<select id="sfield">
<option selected value="Title" >Title</option>
<option value="Body">Body</option>
</select>
Search Text:
<input type="text" id="tbSearch" />
<input type="button" id="btnSearch" value="Search" onclick="return RedirectUrl();" />
<input type="button" id="btnClear" value="Clear" onclick="return ClearUrl();" />
window.location.href = "mypage.aspx?" + url;
reloads the page, which will result in all code after that not beeing executed.
What you want to do is to add code for pageload and check if the parameters are given, then populate the textbox.
Something like:
window.addEventListener('load', function(){
var params = getUrlParams();
if(typeof params.FilterName !== 'undefined'){
// removes the first and the last char from the string
var t = params.FilterMultiValue.substr(1, params.FilterMultiValue.length-2);
document.getElementById("sfield").value = params.FilterName;
document.getElementById('tbSearch').value = t;
}
});
i found this javascript that allow you to chose an option and once you click the go button. It will redirect you to another site. I have try modify this so i can use it with a button instead of a radio but it doesn't seem to work. Can any 1 help me out ??
Thank you very much.
here the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script language="JavaScript" type="text/javascript">
//chose which page to go to
function Link() {
if (document.fred.r1[0].checked) {
window.top.location = 'http://kshowonline.com/list';
}
if (document.fred.r1[1].checked) {
window.top.location = 'https://www.google.com/';
}
if (document.fred.r1[2].checked) {
window.top.location = 'https://www.yahoo.com/';
}
if (document.fred.r1[3].checked) {
window.top.location = 'https://nodejs.org/';
}
}
//-->
</script>
</head>
<body onload="f19_GetFormCookie();Link();">
<form title="f19_Include" name="fred">
<INPUT type="radio" name="r1">Baseball
<INPUT type="radio" name="r1">Basketball
<INPUT type="radio" name="r1">Soccer
<INPUT type="radio" name="r1">Fencing
<INPUT type="button" value="GO" onclick="f19_SetFormCookie();Link();">
</form>
<script language="JavaScript" type="text/javascript">
<!--
// A Cookie Script to Store and Retrieve
// the values and states of common form elements
// TEXT BOXES - value
// TEXT AREA - value
// CHECK BOX - checked state
// RADIO BUTTON - checked state
// SELECT LIST - selected Index
// Application Notes and Customising Variables
// Application Notes
// Values and states of each element are stored
// as the page is unloaded or form submitted.
// The storage duration is specified by a customising variable
// Stored values and states of elements included in the cookie
// are re-established as the page is reloaded.
// The number and type of elements included must respect
// the maximum cookie size of 4K.
// The Retrieval is initialised by a <BODY> onload event
// The Storage occurs on a <BODY> onunload event
// e.g.
// <body onload="f19_GetFormCookie();" onunload="f19_SetFormCookie();" >
// To include a form element in the Store and Retrieve
// it must be child nodes of an element with a title of 'f19_Include'
// e.g.
// <span title="f19_Include" >
// <INPUT type="text" size="10" >
// <INPUT type="checkbox >
// </span>
// There may be any number of elements titled 'f19_Include' on a page
// and as many child elements of each 'f19_Include' as required.
// All variable, function etc. names are prefixed with 'f19_'
// to minimise conflicts with other JavaScripts
// Customising Variables
var f19_Days = 1; // The cookie will be available on revisits for a specified number of days
var f19_Cookie = 'My Form2'; // The Cookie name
//-->
</script>
<script language="JavaScript" type="text/javascript">
<!--
// Form Compendium f19_Part2 (12-05-2005)
// Functional Code
// No Need To Change ***************************
var f19_TBAry = new Array();
var f19_RCAry = new Array();
var f19_TAAry = new Array();
var f19_SLAry = new Array();
var f19_TBString, f19_RCString, f19_TAString, f19_SLString;
var f19_, f19_exp, f19_st, f19_len, f19_end, f19_st;
var f19_Exp = new Date(new Date().getTime() + f19_Days * 86400000).toGMTString();
function f19_GetFormCookie() {
f19_TBString = f19_GetCookie(f19_Cookie + 'TB');
f19_RCString = f19_GetCookie(f19_Cookie + 'RC');
f19_SLString = f19_GetCookie(f19_Cookie + 'SL');
f19_TAString = f19_GetCookie(f19_Cookie + 'TA');
f19_ = document.getElementsByTagName('*');
for (f19_0 = 0; f19_0 < f19_.length; f19_0++) {
if (f19_[f19_0].title == 'f19_Include') {
f19_Inc = f19_[f19_0].getElementsByTagName('*');
for (f19_1 = 0; f19_1 < f19_Inc.length; f19_1++) {
if (f19_Inc[f19_1].tagName == 'INPUT') {
if (f19_Inc[f19_1].type == 'text') {
f19_TBAry[f19_TBAry.length] = f19_Inc[f19_1];
}
if (f19_Inc[f19_1].type == 'radio' || f19_Inc[f19_1].type == 'checkbox') {
f19_RCAry[f19_RCAry.length] = f19_Inc[f19_1];
}
}
if (f19_Inc[f19_1].tagName == 'TEXTAREA') {
f19_TAAry[f19_TAAry.length] = f19_Inc[f19_1];
}
if (f19_Inc[f19_1].tagName == 'SELECT') {
f19_SLAry[f19_SLAry.length] = f19_Inc[f19_1];
}
}
}
}
if (f19_TBString) {
for (f19_1 = 0; f19_1 < f19_TBAry.length; f19_1++) {
f19_TBAry[f19_1].value = f19_TBString.split('~^~')[f19_1];
}
}
if (f19_RCString) {
for (f19_2 = 0; f19_2 < f19_RCAry.length; f19_2++) {
f19_RCAry[f19_2].checked = false;
if (f19_RCString.split('~^~')[f19_2] == 'true') {
f19_RCAry[f19_2].checked = true;
}
}
}
if (f19_TAString) {
for (f19_3 = 0; f19_3 < f19_TAAry.length; f19_3++) {
f19_TAAry[f19_3].value = f19_TAString.split('~^~')[f19_3];
}
}
if (f19_SLString) {
for (f19_4 = 0; f19_4 < f19_SLAry.length; f19_4++) {
f19_SLAry[f19_4].selectedIndex = f19_SLString.split('~^~')[f19_4];
}
}
}
function f19_GetCookie(name) {
var f19_st = document.cookie.indexOf(name + "=");
var f19_len = f19_st + name.length + 1;
if ((!f19_st) && (name != document.cookie.substring(0, name.length))) return null;
if (f19_st == -1) return null;
var f19_end = document.cookie.indexOf(";", f19_len);
if (f19_end == -1) f19_end = document.cookie.length;
return decodeURI(document.cookie.substring(f19_len, f19_end));
}
function f19_SetFormCookie(value) {
f19_TBString = '';
for (f19_0 = 0; f19_0 < f19_TBAry.length; f19_0++) {
f19_TBString += f19_TBAry[f19_0].value + '~^~';
}
document.cookie = f19_Cookie + "TB=" + encodeURI(f19_TBString) + ";expires=" + f19_Exp + ";path=/;"
f19_RCString = '';
for (f19_1 = 0; f19_1 < f19_RCAry.length; f19_1++) {
f19_RCString += f19_RCAry[f19_1].checked + '~^~';
}
document.cookie = f19_Cookie + "RC=" + encodeURI(f19_RCString) + ";expires=" + f19_Exp + ";path=/;"
f19_TAString = '';
for (f19_0 = 0; f19_0 < f19_TAAry.length; f19_0++) {
f19_TAString += f19_TAAry[f19_0].value + '~^~';
}
document.cookie = f19_Cookie + "TA=" + encodeURI(f19_TAString) + ";expires=" + f19_Exp + ";path=/;"
f19_SLString = '';
for (f19_1 = 0; f19_1 < f19_SLAry.length; f19_1++) {
f19_SLString += f19_SLAry[f19_1].selectedIndex + '~^~';
}
document.cookie = f19_Cookie + "SL=" + encodeURI(f19_SLString) + ";expires=" + f19_Exp + ";path=/;"
}
//-->
</script>
</body>
</html>
You can use onclick event on radio buttons:
http://www.dyn-web.com/tutorials/forms/radio/onclick-onchange.php
You could modify your code to use Buttons instead RadioButtons.
It should resemble the following:
<button name="b1" onclick="f19_SetFormCookie('Baseball')">Baseball</button>
<button name="b2" onclick="f19_SetFormCookie('Basketball')">Basketball</button>
<button name="b3" onclick="f19_SetFormCookie('Soccer')">Soccer</button>
<button name="b4" onclick="f19_SetFormCookie('Fencing')">Fencing</button>
Then you'll have to modify SetFormCookie function to accept the argument - based on which cookie will be set.
I'm having trouble filtering resulting div's with jQuery via two different inputs. Users can decide to filter by office, specialty or both office and specialty. The filtering is set from data attributes on the div that correspond to the select inputs values.
<div>
<label for="officeSearch">Search by office:</label>
<select name="Office Search" id="officeSearch">
<option value="all"></option>
<option value="communication">Communication</option>
<option value="internal medicine">Internal Medicine</option>
</select>
</div>
<div>
<label for="specialtySearch">Search by specialty:</label>
<select name="Specialty Search" id="specialtySearch">
<option value="all"></option>
<option value="Bone Cancer">Bone Cancer</option>
<option value="Breast Cancer">Breast Cancer</option>
<option value="Oral Cancer">Oral Cancer</option>
</select>
</div>
<div class="module-sm profile" data-office="communication" data-specialty="Oral Cancer">
<p>Person A</p>
</div>
<div class="module-sm profile" data-office="communication" data-specialty="Breast Cancer">
<p>Person B</p>
</div>
<div class="module-sm profile" data-office="internal medicine" data-specialty="Bone Cancer">
<p>Person C</p>
</div>
Here's the jQuery I'm using that fires on change of the selects:
$(document).ready(function() {
$("#officeSearch").on('change', function(){
var selectedOffice = $('#officeSearch').val();
var selectedSpecialty = $('#specialtySearch').val();
var person = $('#filterList .profile').not('.out');
var allPersons = $('#filterList .profile');
var allPersonsOffice = $('#filterList .profile').data('office');
var allPersonsOut = $('#filterList .profile.out');
var office = $('.profile[data-office="' + selectedOffice +'"]');
alert(''+ selectedOffice + ' ' + selectedSpecialty +'');
if (selectedOffice == 'all' && selectedSpecialty == 'all'){
$(allPersons).removeClass('out').fadeIn(500);
}
else {
$(person).not(office).addClass('out').fadeOut(500);
office.removeClass('out').fadeIn(500);
}
});
$("#specialtySearch").on('change', function(){
var selectedOffice = $('#officeSearch').val();
var selectedSpecialty = $('#specialtySearch').val();
var person = $('#filterList .profile').not('.out');
var allPersons = $('#filterList .profile');
var allPersonsOffice = $('#filterList .profile').data('office');
var allPersonsOut = $('#filterList .profile.out');
var specialty = $('.profile[data-specialty="' + selectedSpecialty +'"]');
alert(''+ selectedOffice + ' ' + selectedSpecialty +'');
if (selectedOffice == 'all' && selectedSpecialty == 'all'){
$(allPersons).removeClass('out').fadeIn(500);
}
else {
$(person).not(specialty).addClass('out').fadeOut(500);
specialty.removeClass('out').fadeIn(500);
}
});
});
If it helps, I've made a codepen to demonstrate what I'm trying to do and where I'm at so far.
I've done some searching and have been scratching my head on how to get this working for weeks. Any help making this code more concise or examples to how others have solved this problem are greatly appreciated!
Call a single update from either selection changing.
Create a filter based on the selections (appended).
Hide the ones not in the matches
show the matches.
JSFiddle: http://jsfiddle.net/TrueBlueAussie/2u7NY/
$(document).ready(function () {
var onChange = function () {
var selectedOffice = $('#officeSearch').val();
var selectedSpecialty = $('#specialtySearch').val();
var filter = "#filterList .profile";
var allPersons = $(filter);
if (selectedOffice != "all")
{
filter += '[data-office="' + selectedOffice + '"]'
}
if (selectedSpecialty != "all")
{
filter += '[data-specialty="' + selectedSpecialty + '"]'
}
var $matching = allPersons.filter(filter);
$(allPersons).not($matching).removeClass('out').fadeOut(500);
$matching.removeClass('out').fadeIn(500);
}
$("#officeSearch, #specialtySearch").on('change', onChange );
});
Update: http://jsfiddle.net/TrueBlueAussie/2u7NY/2/
The filter can be made slightly more efficient as "#filterList .profile" is not needed to filter allPersons based on attributes.
I also removed the function variable and placed the function inline on the change event.
$(document).ready(function () {
$("#officeSearch, #specialtySearch").on('change',
function () {
var selectedOffice = $('#officeSearch').val();
var selectedSpecialty = $('#specialtySearch').val();
var allPersons = $("#filterList .profile");
var filter = "";
if (selectedOffice != "all") {
filter = '[data-office="' + selectedOffice + '"]'
}
if (selectedSpecialty != "all") {
filter += '[data-specialty="' + selectedSpecialty + '"]'
}
var $matching = allPersons.filter(filter);
$(allPersons).not($matching).removeClass('out').fadeOut(500);
$matching.removeClass('out').fadeIn(500);
});
});
OK. Try something like this....
var match = function(office, specialty, profile) {
var show = ((office == 'all' || office == $(profile).data('office')) &&
(specialty == 'all' || specialty == $(profile).data('specialty')));
if (show && !$(profile).is(':visible')) {
$(profile).fadeIn();
}
if (!show && $(profile).is(':visible')) {
$(profile).fadeOut();
}
}
var filter = function() {
var selectedOffice = $('#officeSearch').val();
var selectedSpecialty = $('#specialtySearch').val();
$.each($('#filterList .profile'), function(i, profile) {
match(selectedOffice, selectedSpecialty, profile);
});
};
$("#officeSearch").on('change', function(){
filter();
});
$("#specialtySearch").on('change', function(){
filter();
});
working fiddle here.... http://jsfiddle.net/6Q8FF/