Hey everyone,
I am new here. Regarding my studies I am in a problem with JS and JQM at the moment.
I'm trying to develop an interactive map of a building, showing the floors and some special rooms there. These options are represented by two "controlgroups" with JQM and three buttons each.
I know want to find out which of these buttons are pressed and depending on them show an image below.
Example: Button FLOOR 1 is pressed and then Button RESTROOM – now I want to load an image that shows exactly this.
Due to the fact that I am new in JS and JQM I just got so far:
(I hope you don’t mind if the labels/texts are German)
---------- FIRST CONTROL GROUP ----------
<form>
<fieldset data-role="controlgroup" data-type="horizontal" id="controlgroup_stockwerk">
<!-- <legend>Bitte wählen Sie ihr Stockwerk:</legend> -->
<input name="radio-choice_Stockwerk" id="radio-choice_Stockwerk_NULL" value="Erdgeschoss_NULL" checked="checked" type="radio"> <label for="radio-choice_Stockwerk_NULL">Erdgeschoss NULL</label>
<input name="radio-choice_Stockwerk" id="radio-choice_Stockwerk_EINS" value="Stockwerk_EINS" checked="checked" type="radio"> <label for="radio-choice_Stockwerk_EINS">1. Etage EINS</label>
<input name="radio-choice_Stockwerk" id="radio-choice_Stockwerk_ZWEI" value="Stockwerk_ZWEI" checked="checked" type="radio"> <label for="radio-choice_Stockwerk_ZWEI">2. Etage ZWEI</label>
</fieldset>
</form>
---------- SECOND CONTROL GROUP ----------
<fieldset data-role="controlgroup" data-type="horizontal" id="controlgroup_raumauswahl">
<!-- <legend>Bitte wählen Sie ihr Stockwerk:</legend> -->
<input name="radio-choice_Raumauswahl" id="radio-choice_Raumauswahl_Veranstaltung" value="Veranstaltungsraeume" checked="checked" type="radio"> <label for="radio-choice_Raumauswahl_Veranstaltung" style="background: yellow; color: black">Veranstaltungsräume</label>
<input name="radio-choice_Raumauswahl" id="radio-choice_Raumauswahl_Toiletten" value="Toiletten" checked="checked" type="radio"> <label for="radio-choice_Raumauswahl_Toiletten" style="background: red; color: white">Toiletten</label>
<input name="radio-choice_Raumauswahl" id="radio-choice_Raumauswahl_Essen_Trinken" value="Essen_Trinken" checked="checked" type="radio"> <label for="radio-choice_Raumauswahl_Essen_Trinken" style="background: blue; color: white">Essen & Trinken</label>
</fieldset>
</form>
Both controlgroups ar in a JQM grid.
---------- JAVASCRIPT ----------
First try to load the JS not at document.ready, but only if there was a click on a controlgroup:
$("#controlgroup_stockwerk").click(function(){
$.getScript("script/checkControlGroup_Value_Stockwerk.js");
});
>>>>>>>> seems not to work!!!
Then I want to check the buttons value.
$(document).ready(function() {
var StockwerkValue;
var RaumauswahlValue;
StockwerkValue = $("input[name=radio-choice_Stockwerk]:checked").val();
alert($(this).val()); <!-- just a test -->
RaumauswahlValue = $("input[name=radio-choice_Raumauswahl]:checked").val();
alert($(this).val()); <!-- just a test -->
});
switch (StockwerkValue) {
case "StockwerkValue = "Erdgeschoss_NULL" && RaumauswahlValue = "Veranstaltungsraeume"":
alert("Veranstaltungsräume in NULL"); >>>> SHOW IMAGE !!!
break;
case "StockwerkValue = "Erdgeschoss_EINS && RaumauswahlValue = "Veranstaltungsraeume"":
alert("Veranstaltungsräume in EINS"); >>>> SHOW IMAGE !!!
break;
case "3":
alert("Sie haben ein Dreirad gewonnen");
break;
case "4":
alert("Gehen Sie auf allen Vieren und werden Sie bescheidener");
break;
default:
alert("Sie bleiben leider dumm");
break;
}
Now I want to compare the values of both buttons and make Cases for each combination, e.g. “floor NULL and event rooms” >> “Veranstaltungsräume in NULL”
>>>>>>>> Mistake in my case selection arguments shown, all in all --> nothing works :(
I know that there may be lots of mistakes, but it would be great if you could help me.
If you have any questions or need for information, don’t hesitate to ask :)
The image in the attachment shows my goal maybe a little bit clearer.
Thanks a lot in advance
Best wishes
Frank