I have several buttons that I want to trigger a block of HML code based on which button is clicked. I want to capture the clicked button id and use it in my switch case statement. I am new and trying to teach myself.
Do I need to enclose my group of buttns in a script. Where do I place the HTML code for my case statement. here is my related cod3.
<button type="button" id = "seahawks" onClick="GetStadium(this.id)"> </button>
<button type="button" id = "buccaneers" onClick="GetStadium(this.id)"> </button>
<button type="button" id = "titans" onClick="GetStadium(this.id)"> </button>
<button type="button" id = "commanders" onClick="GetStadium(this.id)"> </button>
<script>
function GetStadium(team) {
Switch (team) {
case "seahawks":
Code for seahawks here. Should this HTML code be in a div or something else?
break;
case 'buccaneers';
break;
case 'titans';
break;}}
I am expecting a mapped image f the stadium seating chart to appear.
<button type="button" id = "seahawks" onClick="GetStadium(this.id)"> </button>
<button type="button" id = "buccaneers" onClick="GetStadium(this.id)"> </button>
<button type="button" id = "titans" onClick="GetStadium(this.id)"> </button>
<button type="button" id = "commanders" onClick="GetStadium(this.id)"> </button>
<script>
function GetStadium(team) {
Switch (team) {
case "seahawks":
Code for seahawks here. Should this HTML code be in a div or something else?
break;
case 'buccaneers';
break;
case 'titans';
break;}}
<P style="text-align:center; font-family:times new roman;font-size:50px; color:purple"><b>RAVENS S TADIUM SEATING CHART</b></p>
<p style="text-align:center; font-family:times new roman;font-size:20px; color:black>" <b>CLICK ON SECTION IN SEATING CHART TO SEE YOUR VIEW FROM THAT SECTION </b></p>
<center>
<img clas="contain" src="https://static.wixstatic.com/media/785ee8_aaeb22067b9c43088809130df1ac153b~mv2.jpg" alt="Ravens Stadium" usemap="#ravens" </img>
< /center>
<map name="ravens">
<area target="_blank" alt="Sect 100" title="Sect 100" href="https://www.youtube.com/watch?v=977dYY_k0HA" coords="781,300,852,300,843,424,782,425" shape="poly">
<area target="_blank" alt="Sect 101" title="Sect 101" href="https://www.youtube.com/watch?v=977dYY_k0HA" coords="856,302,915,305,908,424,852,421" shape="poly">
<area target="_blank" alt="Sect 102" title="Sect 102" href="https://www.youtube.com/watch?v=977dYY_k0HA" coords="924,305,980,307,966,429,918,427" shape="poly">
<area target="_blank" alt="Sect 103" title="Sect 103" href="https://www.youtube.com/watch?v=977dYY_k0HA" oords="992,311,1052,316,1034,439,979,434" shape="poly">
Related
How can I toggle background color on multiple buttons.( reference images )
I have set of buttons. Once user click on any button it change the background color and if click again on same button other button the first clicked button reset to original color and change the 2nd click button.
code
<span class="input-group-btn">
<button
class="btn btn-sm btn-primary mr-2"
(click)="selectToday('approved')"
>
Select Today
</button>
<button
class="btn btn-sm btn-primary mr-2"
(click)="selectWeek('approved')"
>
To Current Week
</button>
<button
class="btn btn-sm btn-primary mr-2"
(click)="selectMonth('approved')"
>
To Current Month
</button>
<button
class="btn btn-sm btn-primary mr-2"
(click)="AllTime('approved')"
>
All Time
</button>
</span>
Can anyone give me clue how to bind the class with each other
image
You can make it dynamic like this:
Working Demo
TS:
selected = null
buttons = ["Selecct Today", "Current Week", "Current Week", "All Time"];
Template:
<ng-container *ngFor="let btn of buttons;let i=index">
<button [style.background-color]="selected == i ? 'green' : 'red'" (click)=" selected == i? selected = null:selected = i">
{{btn}}
</button>
</ng-container>
To change the color of next button on deselection of already selected btn, try this:
<ng-container *ngFor="let btn of buttons;let i=index">
<button [style.background-color]="selected == i ? 'green' : 'red'" (click)=" selected == i? selected = i + 1:selected = i">
{{btn}}
</button>
</ng-container>
You can use radio button and customize it's display style instead of using Button directly. I am sure i will solve your problem. Just refer to this link:
Convert Radio button to Button
Give an index or id to each button and give the index on click
(click)="enableDisableRule(2)"
in your ts, save the index:
enableDisableRule(selectedIndex:number){
...
if(this.selectedIndex = selectedIndex){
this.selectedIndex = null;
} else{
this.selectedIndex = selectedIndex;
}
}
And in your html, update you button acording to selectedIndex:
[style.background-color]="selectedIndex === 2 ? 'green' : 'red'"
Or something in this spirit.
I'm new to aurelia. I'm looking to find the best method for adding classes on click events.
I simply want to click approve or request information, and then add a class to the corresponding "contact card". This class would change the background color.
I know it's probably simple, but I thought I'd look here for the best method.
Here's an image to what I've got:
Apologies for the wait, work has been a bit busy.
This is my first time posting on S.O., so I apologize for any expectations I'm not meeting.
<div class="col-sm-4">
<button class="btn btn-success col-sm-12" click.delegate="goodBoi()">
approve contact
</button>
</div>
<div class="col-sm-4">
<button class="btn btn col-sm-12" click.delegate="requestContact()">
request information
</button>
</div>
</div>
the element to be changed is named "list-group-item", containing the
contact's details(code shown above).
<template>
<div class="contact-list">
<ul class="list-group">
<li repeat.for="contact of contacts" class="list-group-item ${contact.id === $parent.selectedId ? 'active' : ''}">
<a route-href="route: contacts; params.bind: {id:contact.id}" click.delegate="$parent.select(contact)">
<h4>${contact.firstName} ${contact.lastName}</h4>
<p>${contact.company}</p>
<p>${contact.email}</p>
<h6>${contact.approval}</h6>
</a>
<a route-href="route: contacts; params.bind: {id:contact.id}">
<p>${contact.phoneNumber}</p>
</a>
</li>
</ul>
</div>
goodBoi() {
let result = confirm("Are you sure you want to confirm this contact?");
if (result === true) {
var standingShell = document.getElementsByClassName("list-group-item");
//im hoping here I would add a class to the new variable//
this.contact.approval = 'approved';
this.save();
}
}
//confirms contact, changing color of approved contact//
//same thing here, just plan to give it a different color//
requestContact() {
let contactRequestText = "request sent to contact";
this.routeConfig.navModel.setTitle(this.contact.approval = contactRequestText);
this.ea.publish(new ContactUpdated(this.contact));
}
There are many ways to set a CSS-class using Aurelia. Following I prepared an example gist:
Template:
<template>
<h1>${message}</h1>
<div class="form-group ${clicked ? 'red' : 'blue'}" style="width: 100px; height: 100px;">
</div>
<div class="form-group">
<button click.delegate="save()">
Click me
</button>
</div>
</template>
And the code class:
#autoinject
export class App {
#bindable clicked = false;
save(){
this.clicked = true;
}
}
https://gist.run/?id=425993b04a977466fa685758389aa2b4
But there are other, cleaner ways:
using ref in a custom element.
custom attributes.
Include jQuery for using e.g. $('#myelement').addClass()
I'm porting my application from JSP to Thymeleaf and i'm finding some problems when trying to use classappend
I have a div element which comes out if the operation was finished, in goor or bad way, so I usually add a $css value in my controller to append to the div class.
I cannot do it in Thymeleaf... I'm trying in this way
<div th:classappend="${css != null} ? alert alert-${css} alert-dismissible"
th:text="${msg != null} ? ${msg}">
<button title="close" type="button" class="close"
data-dismiss="alert" aria-label="Close" aria-hidden="true">
x</button>
<strong th:text="${msg}"></strong>
</div>
${css} may be danger or success or any other Bootstrap text class...
I'm getting
Could not parse as expression: \"${css != null} ? alert alert-${css} alert-dismissible\
What's wrong with it?
It's your string concatenation:
<div th:classappend="*{css} ? 'alert alert-'+${css}+' alert-dismissable' : ''" th:text="*{msg} ? ${msg}: ''">
<button title="close" type="button" class="close"
data-dismiss="alert" aria-label="Close" aria-hidden="true">x</button>
<strong th:text="${msg}"></strong>
</div>
Ok, I have this somewhat complex piece of HTML that I have to integrate with. It is a button with a drop down (using aria) and I had to pass in a currency list and be able to select one of the dropdown elements (currency values) and update the button text with the selected value. I write a tiny bit of js and that works well. I use thymeleaf to pass in values to populate and that works well. I also need to read the values that were set from the post to the spring mvc controller but I always get a empty string for the value that I set via js.
here is the javascript
$(".currencyDropdown li a").click(function () {
var selText = $(this).text().trim();
var button = $("#currencyButton");
button.text(selText);
console.log("currency selected is:" + selText);
});
here is the html
<div class="col-sm-9 col-sm-offset-3 col-xs-12 form-row">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle field-small"
type="button"
id="currencyButton"
name="currencyButton"
th:field="${pals.selectedCurrency}"
data-toggle="dropdown"
th:inline="text">
[[${pals.selectedCurrency}]]
<i class="fa fa-caret-down"></i>
</button>
<ul id="currencyDropdown"
class="dropdown-menu currencyDropdown"
role="menu"
aria-labelledby="currencyButton">
<li role="presentation"
th:each="currency:${pals.currencyList}">
<a role="menuitem"
tabindex="-1"
href="#"
th:inline="text">
[[${currency}]]
</a>
</li>
</ul>
</div>
What I am trying to read back in the spring mvc controller is the pals.selectedCurrency value and it is always empty. Something I am missing? I was playing around and tried setting value and field. In reality I want to read the inline text that my js inserts.
I think you must add a th:fragment on you button and change the text of the button via ajax from backing bean from server, not from javascript. It's something like this :
<form th:action="#{/PersonEdit/save(contract=${param.contract})}" th:object="${personBean}"
method="POST" th:if="${param.contract != null}">
... other form components
<div class="form-group">
<label class="col-sm-4 control-label"
th:text="#{person.edit.policy.tfoms}"></label>
<div class="col-sm-8">
<select class="form-control" th:field="*{tfoms}"
onchange="loadInsuranceCompanies()">
<option th:each="t : ${tfomses}"
th:value="${t.uidtfoms}"
th:text="${t.shortName}"
th:selected="${personBean.tfoms != null
and personBean.tfoms.equals(t)}"></option>
</select>
</div>
</div>
<div th:class="${#fields.hasErrors('insuranceCompany')}
? 'form-group has-error' : 'form-group'">
<label class="col-sm-4 control-label"
th:text="#{person.edit.policy.ic}"></label>
<div class="col-sm-8" id="insuranceCompaniesContent">
<select class="form-control" id="insuranceCompany"
name="insuranceCompany"
th:fragment="insuranceCompany">
<option th:each="i : ${insuranceCompanies}"
th:value="${i.uidinsurancecompany}"
th:text="${i.shortName}"
th:selected="${personBean.insuranceCompany != null
and personBean.insuranceCompany.equals(i)}"></option>
</select>
<div th:if="${#fields.hasErrors('insuranceCompany')}"
th:each="err : ${#fields.errors('insuranceCompany')}">
<span class="text-danger" th:text="${err}"></span><br/>
</div>
</div>
</div>
In my case I refreshing one dropdown via another.Then refresh this fragment via ajax on item selection
function loadInsuranceCompanies() {
var url = [[#{/PersonEdit/insuranceCompanies}]];
if ($('#tfoms').val() !== '') {
url = url + '/' + $('#tfoms').val();
}
$("#insuranceCompaniesContent").load(url);
}
I think the trouble can be because you using not a standard select as a dropdown.
Ok, I figured out a relatively simple answer to it. I have to use the html that was provided because of look and feel considerations from the customer.
so what I did was add a hidden input and set that from the java script.
$(".currencyDropdown li a").click(function () {
var selText = $(this).text().trim();
$("#currencyButton").text(selText);
$("#currencySelected").val(selText);
console.log("currency selected is:" + selText);
});
<input type="hidden"
id="currencySelected"
th:field="${pals.selectedCurrency}"/>
<button class="btn btn-default dropdown-toggle field-small"
type="button"
id="currencyButton"
data-toggle="dropdown"
th:inline="text">
[[${pals.selectedCurrency}]]
<i class="fa fa-caret-down"></i>
</button>
<ul id="currencyDropdown"
class="dropdown-menu currencyDropdown"
role="menu"
aria-labelledby="currencyButton">
<li role="presentation"
th:each="currency:${pals.currencyList}">
<a role="menuitem"
tabindex="-1"
href="#"
th:inline="text">
[[${currency}]]
</a>
</li>
</ul>
I see the correct values that were selected for my dropdown on the spring mvc controller and now I can get on with the rest of the stuff.
I want to show only first 2 things which are present in an array instead of all and then b y clicking on button next 2 names comes up till the last, Can you help me in correcting the code of knoctout js .
<div class="slide">
<button type="button" onclick="alert('Hello world!')" style="margin-top: -50px;margin-bottom: 1px;margin-left: 1020px;padding-right:5px;">Read more</button>
<ul data-bind="foreach:EventBE.WhoElseAttends">
<li >
<span data-bind="text:FirstName"></span>
<span data-bind="text:LastName"></span>,
<span data-bind="text:Company"></span>
</li>
</ul>
<span data-bind="if:EventBE.WhoElseAttends.length <0">No Attendees</span>
</div>
In Javascript
EventBE.displayCount = ko.observable(2);
EventBE.readMore = function() { EventBE.displayCount(EventBE.displayCount() + 2); };
In HTML
<button type="button" data-bind"click: EventBE.readMore,
visible: EventBE.displayCount() < EventBE.WhoElseAttends.length">Read More</button>
<ul data-bind="foreach:EventBE.WhoElseAttends.slice(0, EventBE.displayCount())">
This is just an example, you may also need to use a subscriber to reset displayCount when WhoElseAttends changes.
If your WhoElseAttends is observableArray, you need to fix EventBE.WhoElseAttends.length to EventBE.WhoElseAttends().length