Widget:PortionsPerPerson.js

<form name="mctc" id="mctc"> <select class="selectClass" name="foodtype" id="foodtype"> <option value="1:_select_food_category">1: Select food category</option> <option value="beans_and_pulses">Beans and pulses</option> <option value="cheese">Cheese</option> <option value="dried_beans_and_pulses">Dried beans and pulses</option> <option value="drinks">Drinks</option> <option value="eggs">Eggs</option> <option value="fish_canned">Fish (canned)</option> <option value="fish_fresh">Fish (fresh)</option> <option value="grains">Grains</option> <option value="meat">Meat</option> <option value="noodles">Noodles</option> <option value="pasta">Pasta</option> <option value="rice">Rice</option> <option value="salad">Salad</option> <option value="sweets_and_desserts">Sweets and desserts</option> <option value="vegetables">Vegetables</option> </select>
<select class="selectClass" name="food" id="food" title="Select food category first"> <option value="choose"> .</option> <option value="salad">2: Select type of Salad</option> <option data-value="crunchy_lettuce_leaf" value="salad">Crunchy lettuce leaf</option> <option data-value="mange_tout" value="salad">Mange tout</option> <option data-value="mixed_leaf_salad" value="salad">Mixed leaf salad</option> <option data-value="scallions_in_a_salad" value="salad">Scallions (in a salad)</option> <option data-value="spring_onions" value="salad">Spring onions</option> <option data-value="wild_rocket" value="salad">Wild rocket</option> <option value="sweets_and_desserts">2: Select type of Sweets and desserts</option> <option data-value="apple_crumble" value="sweets_and_desserts">Apple crumble</option> <option data-value="cheesecake" value="sweets_and_desserts">Cheesecake</option> <option data-value="chocolate_fudge_cake" value="sweets_and_desserts">Chocolate fudge cake</option> <option data-value="frozen_yogurt" value="sweets_and_desserts">Frozen yogurt</option> <option data-value="ice_cream" value="sweets_and_desserts">Ice cream</option> <option data-value="lemon_meringue_pie" value="sweets_and_desserts">Lemon meringue pie</option> <option data-value="yogurt" value="sweets_and_desserts">Yogurt</option> <option value="vegetables">2: Select type of Vegetables</option> <option data-value="asparagus_any_large_spears" value="vegetables">Asparagus (any large spears)</option> <option data-value="asparagus_baby_spears" value="vegetables">Asparagus (baby spears)</option> <option data-value="beansprouts" value="vegetables">Beansprouts</option> <option data-value="broad_beans" value="vegetables">Broad beans</option> <option data-value="broccoli" value="vegetables">Broccoli</option> <option data-value="brussels_sprouts" value="vegetables">Brussels sprouts</option> <option data-value="cabbage" value="vegetables">Cabbage</option> <option data-value="carrots" value="vegetables">Carrots</option> <option data-value="cassava" value="vegetables">Cassava</option> <option data-value="cauliflower" value="vegetables">Cauliflower</option> <option data-value="celery" value="vegetables">Celery</option> <option data-value="corn_on_the_cob" value="vegetables">Corn on the cob</option> <option data-value="green_leafy_vegetables_any" value="vegetables">Green leafy vegetables (any)</option> <option data-value="green_string_beans_trimmed" value="vegetables">Green string beans (trimmed)</option> <option data-value="jerusalem_artichokes" value="vegetables">Jerusalem artichokes</option> <option data-value="lettuce_leaves_trimmed_and_washed" value="vegetables">Lettuce leaves (trimmed and washed)</option> <option data-value="mange_tout" value="vegetables">Mange tout</option> <option data-value="mushrooms_fresh" value="vegetables">Mushrooms (fresh)</option> <option data-value="peas_fresh" value="vegetables">Peas (fresh)</option> <option data-value="potatoes" value="vegetables">Potatoes</option> <option data-value="runner_beans_trimmed" value="vegetables">Runner beans trimmed</option> <option data-value="salad_leaves_trimmed_and_washed" value="vegetables">Salad leaves (trimmed and washed)</option> <option data-value="spring_greens" value="vegetables">Spring greens</option> <option data-value="sugar_snap_peas_trimmed" value="vegetables">Sugar snap peas (trimmed)</option> <option data-value="sweet_potatoes" value="vegetables">Sweet potatoes</option> <option data-value="sweetcorn_canned,_drained" value="vegetables">Sweetcorn (canned, drained)</option> <option data-value="sweetcorn_fresh" value="vegetables">Sweetcorn (fresh)</option> <option data-value="sweetcorn_frozen" value="vegetables">Sweetcorn (frozen)</option> <option data-value="sweetcorn_whole_cob" value="vegetables">Sweetcorn (whole cob)</option> <option data-value="tenderstem_broccoli" value="vegetables">Tenderstem broccoli</option> <option value="eggs">2: Select type of Eggs</option> <option data-value="chickens_eggs_as_a_meal" value="eggs">Chickens eggs (as a meal)</option> <option data-value="quails_eggs_as_a_light_snack" value="eggs">Quails eggs (as a light snack)</option> <option data-value="quails_eggs_as_an_appetiser" value="eggs">Quails eggs (as an appetiser)</option> <option data-value="quails_eggs_for_a_hearty_breakfast" value="eggs">Quails eggs (for a hearty breakfast)</option> <option value="dried_beans_and_pulses">2: Select type of Dried beans and pulses</option> <option data-value="dried_beans_all_types" value="dried_beans_and_pulses">Dried beans (all types)</option> <option data-value="dried_chick_peas" value="dried_beans_and_pulses">Dried chick peas</option> <option data-value="dried_lentils_all_types" value="dried_beans_and_pulses">Dried lentils (all types)</option> <option value="beans_and_pulses">2: Select type of Beans and pulses</option> <option data-value="baked_beans" value="beans_and_pulses">Baked beans</option> <option data-value="canned_chick_peas" value="beans_and_pulses">Canned chick peas</option> <option data-value="canned_lentils" value="beans_and_pulses">Canned lentils</option> <option data-value="mange_tout" value="beans_and_pulses">Mange tout</option> <option data-value="red_kidney_beans" value="beans_and_pulses">Red kidney beans</option> <option data-value="tofu" value="beans_and_pulses">Tofu</option> <option value="grains">2: Select type of Grains</option> <option data-value="buckwheat" value="grains">Buckwheat</option> <option data-value="bulgar_wheat" value="grains">Bulgar wheat</option> <option data-value="couscous" value="grains">Couscous</option> <option data-value="polenta" value="grains">Polenta</option> <option data-value="quinoa" value="grains">Quinoa</option> <option value="drinks">2: Select type of Drinks</option> <option data-value="coca_cola" value="drinks">Coca Cola</option> <option data-value="fizzy_drink" value="drinks">Fizzy drink</option> <option data-value="fruit_juice" value="drinks">Fruit juice</option> <option data-value="grapefruit_juice" value="drinks">Grapefruit juice</option> <option data-value="milkshake" value="drinks">Milkshake</option> <option data-value="orange_drink" value="drinks">Orange drink</option> <option data-value="orange_juice" value="drinks">Orange juice</option> <option data-value="smoothies" value="drinks">Smoothies</option> <option data-value="soup" value="drinks">Soup</option> <option value="cheese">2: Select type of Cheese</option> <option data-value="cottage_cheese" value="cheese">Cottage cheese</option> <option data-value="hard_cheese_cheddar_etc" value="cheese">Hard cheese (Cheddar etc)</option> <option data-value="soft_cream_cheese" value="cheese">Soft cream cheese</option> <option value="fish_canned">2: Select type of Fish (canned)</option> <option data-value="cod_roe" value="fish_canned">Cod roe</option> <option data-value="pilchards" value="fish_canned">Pilchards</option> <option data-value="salmon" value="fish_canned">Salmon</option> <option data-value="sardines" value="fish_canned">Sardines</option> <option data-value="tuna" value="fish_canned">Tuna</option> <option value="rice">2: Select type of Rice</option> <option data-value="american_aromatic_rice" value="rice">American aromatic rice</option> <option data-value="arborio_rice" value="rice">Arborio rice</option> <option data-value="bahia_rice" value="rice">Bahia rice</option> <option data-value="basmati_rice" value="rice">Basmati rice</option> <option data-value="bomba_rice" value="rice">Bomba rice</option> <option data-value="brown_rice" value="rice">Brown rice</option> <option data-value="camargue_red_rice" value="rice">Camargue red rice</option> <option data-value="carnaroli_rice" value="rice">Carnaroli rice</option> <option data-value="dehra_dun_rice" value="rice">Dehra Dun rice</option> <option data-value="domsiah_rice" value="rice">Domsiah rice</option> <option data-value="indica_rice" value="rice">Indica rice</option> <option data-value="japanese_table_rice" value="rice">Japanese table rice</option> <option data-value="jasmine_rice" value="rice">Jasmine rice</option> <option data-value="long_grain_rice" value="rice">Long grain rice</option> <option data-value="medium_grain_rice" value="rice">Medium grain rice</option> <option data-value="moochi_rice" value="rice">Moochi rice</option> <option data-value="organic_rice" value="rice">Organic rice</option> <option data-value="patna_rice" value="rice">Patna rice</option> <option data-value="plain_white_rice" value="rice">Plain white rice</option> <option data-value="risotto_rice" value="rice">Risotto rice</option> <option data-value="short_grain_rice" value="rice">Short grain rice</option> <option data-value="thai_fragrant_rice" value="rice">Thai fragrant rice</option> <option data-value="vialone_nano_rice" value="rice">Vialone nano rice</option> <option data-value="wild_rice" value="rice">Wild rice</option> <option value="pasta">2: Select type of Pasta</option> <option data-value="dried_egg_noodles" value="pasta">Dried egg noodles</option> <option data-value="dried_pasta_all_types" value="pasta">Dried pasta (all types)</option> <option data-value="fresh_egg_noodles" value="pasta">Fresh egg noodles</option> <option data-value="fresh_pasta_all_types" value="pasta">Fresh pasta (all types)</option> <option value="fish_fresh">2: Select type of Fish (fresh)</option> <option data-value="bass_whole_fish" value="fish_fresh">Bass (whole fish)</option> <option data-value="crayfish_peeled" value="fish_fresh">Crayfish (peeled)</option> <option data-value="dogfish" value="fish_fresh">Dogfish</option> <option data-value="dover_sole" value="fish_fresh">Dover sole</option> <option data-value="gravlax" value="fish_fresh">Gravlax</option> <option data-value="huss" value="fish_fresh">Huss</option> <option data-value="king_prawns_-_large,_in_a_curry_etc" value="fish_fresh">King prawns - large, in a curry etc</option> <option data-value="king_prawns_-_small,_in_a_curry_etc" value="fish_fresh">King prawns - small, in a curry etc</option> <option data-value="oysters" value="fish_fresh">Oysters</option> <option data-value="prawns_peeled" value="fish_fresh">Prawns (peeled)</option> <option data-value="prawns_with_shells" value="fish_fresh">Prawns (with shells)</option> <option data-value="prawns_freshwater_peeled" value="fish_fresh">Prawns freshwater (peeled)</option> <option data-value="rock_salmon" value="fish_fresh">Rock salmon</option> <option data-value="salmon_steaks" value="fish_fresh">Salmon steaks</option> <option data-value="shell_fish_with_shells" value="fish_fresh">Shell fish (with shells)</option> <option data-value="shrimps_with_shells" value="fish_fresh">Shrimps (with shells)</option> <option data-value="skate_wings" value="fish_fresh">Skate wings</option> <option data-value="smoked_salmon" value="fish_fresh">Smoked salmon</option> <option data-value="snapper_whole_fish" value="fish_fresh">Snapper (whole fish)</option> <option data-value="swordfish_steaks" value="fish_fresh">Swordfish steaks</option> <option data-value="trout_whole_fish" value="fish_fresh">Trout (whole fish)</option> <option data-value="tuna_steaks" value="fish_fresh">Tuna steaks</option> <option value="noodles">2: Select type of Noodles</option> <option data-value="dried_egg_noodles" value="noodles">Dried egg noodles</option> <option data-value="fresh_egg_noodles" value="noodles">Fresh egg noodles</option> <option value="meat">2: Select type of Meat</option> <option data-value="beef_joint_-_bone_in" value="meat">Beef joint - Bone in</option> <option data-value="beef_joint_-_boneless" value="meat">Beef joint - Boneless</option> <option data-value="beef_short_ribs" value="meat">Beef short ribs</option> <option data-value="chicken_bone_in" value="meat">Chicken (bone in)</option> <option data-value="chicken,_breasts_etc." value="meat">Chicken, breasts etc.</option> <option data-value="fillet_steak" value="meat">Fillet steak</option> <option data-value="lamb_leg,_off_the_bone" value="meat">Lamb (leg, off the bone)</option> <option data-value="lamb_leg,_on_the_bone" value="meat">Lamb (leg, on the bone)</option> <option data-value="lamb_joint_-_bone_in" value="meat">Lamb joint - Bone in</option> <option data-value="lamb_joint_-_boneless" value="meat">Lamb joint - Boneless</option> <option data-value="pork_joint_-_bone_in" value="meat">Pork joint - Bone in</option> <option data-value="pork_joint_-_boneless" value="meat">Pork joint - Boneless</option> <option data-value="pork_luncheon_meat" value="meat">Pork luncheon meat</option> <option data-value="pork:_bacon_joint" value="meat">Pork: Bacon joint</option> <option data-value="pork:_gammon" value="meat">Pork: Gammon</option> <option data-value="rump_steak" value="meat">Rump steak</option> <option data-value="sirloin_steak" value="meat">Sirloin steak</option> <option data-value="sliced_beef" value="meat">Sliced beef</option> <option data-value="sliced_chicken" value="meat">Sliced chicken</option> <option data-value="sliced_ham" value="meat">Sliced ham</option> <option data-value="sliced_turkey" value="meat">Sliced turkey</option> <option data-value="spam" value="meat">Spam</option> <option data-value="t-bone_steak" value="meat">T-bone steak</option> <option data-value="veal_joint_-_bone_in" value="meat">Veal joint - Bone in</option> <option data-value="veal_joint_-_boneless" value="meat">Veal joint - Boneless</option> <option data-value="venison_joint_-_bone_in" value="meat">Venison joint - Bone in</option> <option data-value="venison_joint_-_boneless" value="meat">Venison joint - Boneless</option> <option data-value="whole_chicken" value="meat">Whole Chicken</option> <option data-value="whole_turkey" value="meat">Whole Turkey</option>

</select>

<select class="selectClass" name="persons" id="persons">

<option value="." selected="selected">.</option> <option value="1">Number of servings (1)</option> <option value="2">Number of servings (2)</option> <option value="3">Number of servings (3)</option> <option value="4">Number of servings (4)</option> <option value="5">Number of servings (5)</option> <option value="6">Number of servings (6)</option> <option value="7">Number of servings (7)</option> <option value="8">Number of servings (8)</option> <option value="9">Number of servings (9)</option> <option value="10">Number of servings (10)</option> <option value="11">Number of servings (11)</option> <option value="12">Number of servings (12)</option> </select> </form>

<style> input, textarea, select, a { outline: none; } .selectClass { width: 300px; font-size: 16px; font-family: Arial; line-height: 24px; margin-top: 4px; margin-bottom: 4px; color: #444; padding: 0px 4px 0px 4px; -webkit-appearance: none; } .red { color:#f44;

} p { font-size: 16px; font-family: Arial; line-height:24px; margin-top:9px; padding:0px 4px 0px 4px; }

</style>

<style> .ui-dialog-title{ font-size: 14px !important; color: #000 !important; background: gold !important; } .ui-dialog-titlebar { background: gold !important; }

.ui-dialog-content { background: #FAF6D0 !important; } </style> <script src="https://www.jerrypank.info/assets/jquery/jquery-2.2.4.min.js"></script> <link rel="stylesheet" href="https://www.jerrypank.info/assets/css/jqueryui/1.12.1/themes/smoothness/jquery-ui.min.css" /> <script src="https://www.jerrypank.info/assets/jquery/jqueryui/1.12.1/jquery-ui.min.js"></script> <script> var jQueryII = jQuery.noConflict(); jQueryII( document ).ready(function() { // define vars for selectors var foodtype =jQueryII('#foodtype'); var food =jQueryII('#food'); var food_v = ; var persons =jQueryII('#persons'); persons.css("background-color", "white");

// setup dialog box jQueryII( "#pppdialog" ).dialog({ autoOpen: false });

// give page time to load, then catch their eye foodtype.delay(1000); // red flash

// once effect is complete, leave highlighted foodtype.css("background-color", "gold"); foodtype.effect("highlight", { color: "red" }, 3000);

foodtype.change(function() { foodtype.css("background-color", "white");

// reset persons to white as we may be starting agian persons.css("background-color", "white"); foodtype.css("background-color", "white");

// switch the value of next dd to match only foodtype items if (jQueryII(this).data('options') == undefined) { jQueryII(this).data('options', jQueryII('#food option').clone()); } var id = jQueryII(this).val(); var options = jQueryII(this).data('options').filter('[value=' + id + ']'); food.html(options);

// setup color to be left after affect food.css("background-color", "gold"); // red flash effect food.effect("highlight", { color: "red" }, 1000); });

food.change(function() { food.css("background-color", "white"); persons.css("background-color", "gold"); persons.effect("highlight", { color: "red" }, 2000); var selected = jQueryII(this).find('option:selected'); food_v = selected.data('value');

jQueryII('#persons option[value="."]').text('3: Select number of servings'); });

persons.change(function() { jQueryII( "#pppdialog" ).dialog({ autoOpen: true, show: { effect: "slide", duration: 500 }, hide: { effect: "fold", duration: 1000 }, position: { my: "left top", at: "left bottom", of: "#food" } });

// re highlight food so it's obvious food.css("background-color", "gold"); // construct params to post var persons_v = persons.val(); var foodtype_v = foodtype.val(); // #NOTE: don't assign var food_v = food.val(); // must be done using food_v = selected.data('value'); as above var portions_url ="https://www.jerrypank.info/cgi-bin/new_portions_per_person.pl"; var portions_calc = portions_url + '?foodtype='+foodtype_v+'&food='+food_v+'&persons='+persons_v; jQueryII.get(portions_calc, function(data) { var servingText = 'Servings'; if (persons_v == 1) { servingText = 'Serving'; } jQueryII("#pppdialog").html( data );

if (food_v == ) { food_v = 'Select'; }; // check for no selection of food dd (which will error) var regex = (/Select/); if (regex.test(food_v)) { jQueryII( "#pppdialog" ).dialog( "option", "title", 'S.N.A.F.U!' ); } else { jQueryII( "#pppdialog" ).dialog( "option", "title", 'Portion: ' + persons_v + ' ' + servingText ); } }); }); }); </script>