Showing details on button click in jquery - javascript

I've three items in my page, each of them has its own button.
What I am trying to do is whenever a button is clicked, the details of the selected buttons should be shown inside .
I am completely new to this kind of programming situation.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<!------first item--->
<div class="parentofitem">
<div class="item_name">
Item 1
</div>
<div class="item_price">
100
</div>
<div class="quantity">
<input type="number" value="1" max="10"/>
</div>
<div class="addbut">
<button class = "btn btn-default addwork" id="add1">ADD</button>
</div>
</div>
<!------second item--->
<div class="parentofitem">
<div class="item_name">
Item 2
</div>
<div class="item_price">
180
</div>
<div class="quantity">
<input type="number" value="1" max="10"/>
</div>
<div class="addbut">
<button class = "btn btn-default addwork" id="add2">ADD</button>
</div>
</div>
<!------Third item--->
<div class="parentofitem">
<div class="item_name">
Item 3
</div>
<div class="item_price">
280
</div>
<div class="quantity">
<input type="number" value="1" max="10"/>
</div>
<div class="addbut">
<button class = "btn btn-default addwork" id="add3">ADD</button>
</div>
</div>
</div>
<aside>
<div>Seleted items and there details should be shown here</div>
</aside>

Here is a reusable code that you can use to slove your issue , it also calculate the price , with a litle bit of styling it will look better :)
item1={
button:$(".addwork1"),
name:$(".item_name1"),
price:$(".item_price1"),
quantity:$(".quantity1 >input"),
result:$(".result1")
}
item2={
button:$(".addwork2"),
name:$(".item_name2"),
price:$(".item_price2"),
quantity:$(".quantity2 >input"),
result:$(".result2")
}
item3={
button:$(".addwork3"),
name:$(".item_name3"),
price:$(".item_price3"),
quantity:$(".quantity3 >input"),
result:$(".result3")
}
function getresult(data){
data.button.on("click",()=>{
data.result.text("The :" + data.name.text() +
" The total price: "+ (data.price.text() * data.quantity.val()) +
" Quantity: " + data.quantity.val() )
})
}
getresult(item1);
getresult(item2);
getresult(item3);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<!------first item--->
<div class="parentofitem">
<div class="item_name1">
Item 1
</div>
<div class="item_price1">
100
</div>
<div class="quantity1">
<input type="number" value="1" max="10"/>
</div>
<div class="addbut">
<button class = "btn btn-default addwork1" id="add1">ADD</button>
<div class="result1"></div>
</div>
</div>
<!------second item--->
<div class="parentofitem">
<div class="item_name2">
Item 2
</div>
<div class="item_price2">
180
</div>
<div class="quantity2">
<input type="number" value="1" max="10"/>
</div>
<div class="addbut">
<button class = "btn btn-default addwork2" id="add2">ADD</button>
<div class="result2"></div>
</div>
</div>
<!------Third item--->
<div class="parentofitem">
<div class="item_name3">
Item 3
</div>
<div class="item_price3">
280
</div>
<div class="quantity3">
<input type="number" value="1" max="10"/>
</div>
<div class="addbut">
<button class = "btn btn-default addwork3" id="add3">ADD</button>
<div class="result3"></div>
</div>
</div>
</div>

Related

How to hide database record on click of button using jquery

I have a view where I am fetching database records in form of bootstrap card. In the each card I have checkboxes which are associated with a database column.
On checking the checkboxes and clicking of the save button I want to hide the card with that record in which I enter that value
How can I achieve this? I tried with the class name of the card but it is hiding all the cards.
$('.insert').click(function() {
var rId = $(this).data('rid');
$.post("#Url.Action("
SetCleaningStatus ", "
HouseKeeping ")", {
id: rId,
InvChk: $('input[data-invchkid=' + rId + ']:checked').length,
ClnChk: $('input[data-cleanid=' + rId + ']:checked').length,
NewLin: $('input[data-nlid=' + rId + ']:checked').length,
DpClean: $('input[data-dcid=' + rId + ']:checked').length
});
$('.Resbook').hide();
});
#model IEnumerable
<RoomTypeView>
<div class="row">
#foreach (var item in Model)
{
<div class="col-3">
<div class="card border rounded DropShadow Resbook">
<div class="card-body">
Room #Html.DisplayFor(modelItem => item.RoomNo)
<button type="button" class="btn btn-default insert" data-rid="#item.RoomId">Save</button><br />
#Html.DisplayFor(modelItem => item.GuestName)<br />
<div class="row">
<div class="col-7 text-center">
#if (item.Status.HasFlag(EnumHkStatus.Cleaning))
{
<input type="checkbox" data-Cleanid="#item.RoomId" name="cstatus" class="form-check-input" />
<label>Cleaning</label>
<br />
}
#if (item.Status.HasFlag(EnumHkStatus.InventoryCheck))
{
<input type="checkbox" data-InvChkid="#item.RoomId" name="cstatus" class="form-check-input" />
<label>Inventory Check</label>
}
</div>
<div class="col-5">
#if (item.NewLinen == null)
{
<input type="checkbox" data-nlid="#item.RoomId" class="form-check-input" />
<label>New Linen</label>
<br />
}
#if (item.DeepCleaning == null)
{
<input type="checkbox" data-dcid="#item.RoomId" class="form-check-input" />
<label>Deep Cleaning</label>
}
</div>
</div>
<div class="row">
<div class="col-8">
<div class="inventory my-1">
<textarea class="form-control breakage" placeholder="Enter Breakage Note" rows="1"></textarea>
</div>
</div>
<div class="col-4">
<button type="button" class="btn btn-default breakage" data-brid="#item.ReservationID">
<i class="fa fa-file-invoice" style="color:red;"></i>
</button>
</div>
</div>
<div class="row">
<div class="col-8">
<div class="comments my-1">
<textarea class="form-control inventoryms" placeholder="Enter Inventory Missing" rows="1"></textarea>
</div>
</div>
<div class="col-4">
<button type="button" class="btn btn-default invmissing" data-invmid="#item.ReservationID">
<i class="fa fa-file-invoice" style="color:red;"></i>
</button>
</div>
</div>
#Html.DisplayFor(modelItem => item.Comments)
</div>
</div>
</div>
}
</div>
This $('.Resbook').hide(); is hiding all the cards. How to overcome this? How can I can use that rId to hide that particular card?
it is hiding all the cards
You need to ensure only the related card is hidden. The .insert button is within a .card so you can find the .card it's within using .closest and then use relative finds.
var card = $(this).closest(".card");
$('input[data-invchkid=' + rId + ']:checked', card)
or
card.find('input[data-invchkid=' + rId + ']:checked')
As the .card is also .Resbook (<div class='card Resbook'>) you can use .Resbook instead of .card, eg:
var card = $(this).closest(".Resbook");
$(card).hide();
Giving:
$('.insert').click(function() {
var card = $(this).closest(".card");
var rId = $(this).data('rid');
$.post("#Url.Action("
SetCleaningStatus ", "
HouseKeeping ")", {
id: rId,
InvChk: $('input[data-invchkid=' + rId + ']:checked', card).length,
ClnChk: $('input[data-cleanid=' + rId + ']:checked', card).length,
NewLin: $('input[data-nlid=' + rId + ']:checked', card).length,
DpClean: $('input[data-dcid=' + rId + ']:checked', card).length
});
$(card).hide();
});
Example snippet showing use of .closest() using OPs structure:
$(".insert").click(function() {
$(this).closest(".card").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-3">
<div class="card Resbook">
<div class="card-body">
Room 1
<button type="button" class="btn btn-default insert" data-rid="#item.RoomId">Save</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-3">
<div class="card Resbook">
<div class="card-body">
Room 2
<button type="button" class="btn btn-default insert" data-rid="#item.RoomId">Save</button>
</div>
</div>
</div>
</div>
In the case where the button is not inside the hierarchy of the card to be used, they can be linked together via their data-rid= values.
Add the .data-rid to the .card so that they match:
<div class='card' data-rid='#item.RoomId'/>
then match the two with
$("button").click(function() {
var rid = $(this).data("rid");
var card = $(".card[data-rid=" + rid + "]")
Example snippet:
$(".external-insert").click(function() {
var rid = $(this).data("rid")
var card = $(".card[data-rid=" + rid + "]")
card.hide();
$(this).fadeOut(); // also hide the button
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-3">
<div class="card Resbook" data-rid="1">
<div class="card-body">
Room 1
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-3">
<div class="card Resbook" data-rid="2">
<div class="card-body">
Room 2
</div>
</div>
</div>
</div>
<hr/>
<button type="button" class="btn btn-default insert external-insert" data-rid="1">Save 1</button>
<button type="button" class="btn btn-default insert external-insert" data-rid="2">Save 2</button>

Remove elements from webpage in query

I have this code (Bootstrap and Jquery):
<div class="container">
<div class="modal fade" id="modalSubscriptionForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">Subscribe</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mx-3">
<div class="md-form mb-5">
<i class="fas fa-user prefix grey-text"></i>
<input type="text" id="form3" class="form-control validate val1" name="val1">
<label data-error="wrong" data-success="right" for="form3">Title</label>
</div>
<div class="md-form mb-4">
<i class="fas fa-envelope prefix grey-text"></i>
<input type="email" id="form2" class="form-control validate val2" name="val2">
<label data-error="wrong" data-success="right" for="form2">Desc</label>
</div>
<div class="md-form mb-4">
<i class="fas fa-envelope prefix grey-text"></i>
<label data-error="wrong" data-success="right" for="form2">
Coordinates click:
<div class="coorX"></div>
x
<div class="coorY"></div>
</label>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<button class="btn btn-indigo saveBtn">Send <i class="fas fa-paper-plane-o ml-1"></i></button>
</div>
</div>
</div>
</div>
<div class="scalize imgpo">
<img src="img/jacket.png" alt="" class="target ">
<div class="item-point" data-top="130" data-left="300" id="point1">
<div>
</div>
</div>
<div class="item-point" data-top="180" data-left="462" id="point2">
<div>
</div>
</div>
<div class="item-point" data-top="380" data-left="215" id="point3">
<div>
</div>
</div>
<div class="item-point" data-left="357" data-top="458" id="point4">
<div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.imgpo').click(function(e) {
var posX = $(this).position().left,
posY = $(this).position().top;
$('.coorX').html((e.pageX - posX - 10));
$('.coorY').html((e.pageY - posY - 10));
$(".tooltip").tooltip("hide");
$('.formAdd').click();
});
$('.saveBtn').click(function(e) {
var val1 = $(".val1").val();
var val2 = $(".val2").val();
var values = {
'val1': val1,
'val2': val2
};
alert('Save');
$.ajax({
url: "save.php",
type: "post",
data: values,
success: function(response) {
alert('Save');
},
error: function(jqXHR, textStatus, errorThrown) {
alert('Error');
}
});
});
$('.scalize').scalize({
styleSelector: 'circle',
animationPopoverIn: 'flipInY',
animationPopoverOut: 'flipOutY',
animationSelector: 'pulse2'
});
/*
$('.tooltips').tooltip({
html: true,
trigger: 'click',
placement: 'top'
})
*/
const $tooltip = $('.tooltips');
$tooltip.tooltip({
html: true,
trigger: 'click',
placement: 'top',
});
$tooltip.on('show.bs.tooltip', () => {
$('.tooltip').not(this).remove();
});
$tooltip.on('click', (ev) => {
ev.stopPropagation();
})
});
</script>
<div class="itemsBox">
<form name="saveForm" action="#" method="post">
<div class="obiect1">Obiect 1
<div class="removeMe" id="1">X</div>
</div>
<div class="obiect2">Obiect 2
<div class="removeMe" id="2">X</div>
</div>
<div class="obiect3">Obiect 3
<div class="removeMe" id="3">X</div>
</div>
<div class="obiect4">Obiect 4
<div class="removeMe" id="4">X</div>
</div>
</div>
<input type="submit" value="Save" />
</form>
prview: http://serwer1356363.home.pl/pub/component/index2.html
In this webpage I have:
1. points on image points (id = point1 to point4),
2. objects (obiect1 to obiect4).
I have too removeMe with ID 1-4.
I would like that after clicking a div with the class removeMe, for example, ID = 2 - the page has been removed:
1. obiect2
2. point2
Could I ask you to write the code?
I would like to delete entire blocks of obiect2 and point2 together with what is inside (html content)
How to do it?
You can get the number from the id of .removeMe and use this in the selectors for point and abject to find the corresponding elements.
$('.removeMe').on('click', function() {
var number = $(this).attr('id');
$('#point' + number).remove();
$('.obiect' + number).remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="obiect1">Obiect 1
<div class="removeMe" id="1">X</div>
</div>
<div class="obiect2">Obiect 2
<div class="removeMe" id="2">X</div>
</div>
<div class="obiect3">Obiect 3
<div class="removeMe" id="3">X</div>
</div>
<div class="obiect4">Obiect 4
<div class="removeMe" id="4">X</div>
</div>
<div class="scalize imgpo">
<img src="img/jacket.png" alt="" class="target ">
<div class="item-point" data-top="130" data-left="300" id="point1">
<div>
point1
</div>
</div>
<div class="item-point" data-top="180" data-left="462" id="point2">
<div>
point2
</div>
</div>
<div class="item-point" data-top="380" data-left="215" id="point3">
<div>
point3
</div>
</div>
<div class="item-point" data-left="357" data-top="458" id="point4">
<div>
point4
</div>
</div>
</div>

On one button click event for three pages

I have one page website, with three forms. The first form has class active and the rest are hidden. All forms have buttons with same class .all-pages.
When I click on next button I want the first page to get class hidden, and second get active. When I'm on the second form click on the SAME button NEXT I want the second page to get class hidden, and the third page get active. Please HELP ME :)
And please just JavaScript.
I have 3 forms like this:
<div class="container-fluid"> <!-- first page container -->
<div class="row">
<div class="col-lg-5 col-lg-offset-3">
<form class="well margin-form-top form-color-bg page1">
<div class="row"> <!-- webpage name -->
<div class="col-lg-4 col-lg-offset-4">
<h2>Book a Room</h2>
</div>
</div>
<div class="row"> <!-- information about webpage -->
<div class="col-lg-7 col-lg-offset-2 h4">
<p>This information will let us know more about you.</p>
</div>
</div>
<div class="row"> <!-- navigation -->
<div class="col-lg-12 button-padding-zero">
<ul class="nav nav-pills nav-justified btn-group">
<button type="button" class="btn btn-danger btn-default btn-lg button-width navigation-font-size border-r grey-bg all-pages red active" data-page="0">
<b>ACCOUT</b>
</button>
<button type="button" class="btn btn-default btn-default btn-lg button-width navigation-font-size border-l-r grey-bg all-pages red" data-page="1">
<b>ROOM TYPE</b>
</button>
<button type="button" class="btn btn-default btn-default btn-lg button-width navigation-font-size border-l grey-bg all-pages red" data-page="2">
<b>EXTRA DETAILS</b>
</button>
</ul>
</div>
</div>
<br>
<div class="row"> <!-- let's start -->
<div class="col-lg-5 col-lg-offset-4 h4">
<p>Let's start with the basic details.</p>
</div>
</div>
<br>
<div class="row"> <!-- first row email and country -->
<div class="col-lg-5 col-lg-offset-0">
<div class="input-group">
<input type="email" class="input-sm btn input-width text-left" placeholder="Your Email">
</div>
</div>
<div class="col-lg-6 col-lg-offset-1 button-padding-zero">
<select class="form-control input-sm btn input-width">
<option value="" selected>Country</option>
<option>Serbia</option>
<option>Russia</option>
<option>Brazil</option>
</select>
</div>
</div>
<br>
<div class="row"> <!-- 2nd row password and budget -->
<div class="col-lg-5 col-lg-offset-0">
<div class="input-group">
<input type="password" class="input-sm btn input-width text-left" placeholder="Your Password">
</div>
</div>
<div class="col-lg-6 col-lg-offset-1 button-padding-zero">
<select class="form-control input-sm btn input-width">
<option value="" selected>Daily Budget</option>
<option>100$</option>
<option>200$</option>
<option>300$</option>
</select>
</div>
</div>
<br>
<br>
<br>
<div class="row">
<div class="col-lg-3 col-lg-offset-9">
<button type="button" id="next-button" class="btn btn-default btn-danger btn-lg button-next-width all-pages" data-page="0">NEXT</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
var page1 = document.querySelector('.page1');
var page2 = document.querySelector('.page2');
var page3 = document.querySelector('.page3');
var emptyArrey = [];
var nextButtons = document.querySelectorAll('.all-pages');
function nextFunction(event) {
// debugger;
var allButtons = document.querySelectorAll('.all-pages');
for (var i = 0; i < allButtons.length; i++) {
var oneButton = allButtons[i].dataset.page;
if (allButtons[i].dataset.page === '0') {
page1.classList.add('hidden');
page2.classList.remove('hidden');
return;
debugger;
} else {
page2.classList.add('hidden');
page3.classList.remove('hidden');
}
}
}
for (var nextButton of nextButtons){
nextButton.addEventListener('click', nextFunction);
}
You could use the button's attribute data-page to keep track of which form you're currently on, and then show the appropriate form.
// give your button the id "next-button"
var currentPage = document.getElementByID("next-button").getAttribute("data-page");
Once you know what form you're on, then you can hide the others as needed
If I understood your question, here is possible solution.
const nextButtons = document.querySelectorAll('.all-pages');
const pages = document.querySelectorAll('.page');
nextButtons.forEach(btn => {
btn.addEventListener('click', () => {
pages.forEach(page => {
page.hidden = true;
});
const pageActive = document.querySelector(`.page-${btn.dataset.page}`);
pageActive.hidden = false;
})
})
<div class="page page-1">
<button class="all-pages" data-page="2">NEXT 2</button>
</div>
<div class="page page-2" hidden=true>
<button class="all-pages" data-page="3">NEXT 3</button>
</div>
<div class="page page-3" hidden=true>
<button class="all-pages" data-page="1">NEXT 1</button>
</div>

Buttons to show or hide divs using single method

I have the following snippets:
My HTML Page which uses 4 buttons to show/hide four divs, each will have their own content.
var otherDivs = ["addCustomer", "searchCustomer", "addItem", "searchItem"];
function show(target) {
var index = otherDivs.indexOf(target);
for (i = 0; i < otherDivs.length; i++) {
if (i != index) {
$(document.getElementById(otherDivs[i].toString())).hide();
} else {
$(document.getElementById(otherDivs[i].toString())).show();
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" style="padding-top: 10px;">
<div class="row" name="tabs">
<button class="redButton" onclick="show('addCustomer')">Add Customer</button>
<button class="redButton" onclick="show('searchCustomer')">Search Customers</button>
<button class="redButton" onclick="show('addItem')">Add Item</button>
<button class="redButton" onclick="show('searchItem')">Search Item</button>
</div>
<div class="row trigger" name="searchCustomer" id="searchCustomer">
...
</div>
<div class="row trigger" name="addCustomer" id="addCustomer">
...
</div>
<div class="row trigger" name="addItem" id="addItem">
...
</div>
<div class="row trigger" name="searchItem" id="searchItem">
...
</div>
</div>
The problem is, only the fist button and div (addCustomer) works correctly. I have tried split methods but I would prefer to keep the single method. Any help is appreciated.
Use jQuery fully when you have it.
Although with your HTML and inline script this would work:
function show(target) {
$('.trigger').hide();
$("#"+ target).show();
}
As could this (but it would not work as a radio button more like a checkbox):
function show(target) {
$("#"+ target).toggle();
}
I strongly suggest you use unobtrusive code and move the script out of the HTML
$(function() {
$(".redButton").on("click",function() { // any button
$(".trigger").hide(); // hide the divs
$("#"+$(this).data("id")).show(); // show the relevant div
});
});
.trigger { display:none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" style="padding-top: 10px;">
<div class="row" name="tabs">
<button type="button" class="redButton" data-id="addCustomer">Add Customer</button>
<button type="button" class="redButton" data-id="searchCustomer">Search Customers</button>
<button type="button" class="redButton" data-id="addItem">Add Item</button>
<button type="button" class="redButton" data-id="searchItem">Search Item</button>
</div>
<div class="row trigger" name="searchCustomer" id="searchCustomer">
Search Customer
</div>
<div class="row trigger" name="addCustomer" id="addCustomer">
Add Customer
</div>
<div class="row trigger" name="addItem" id="addItem">
Add Item
</div>
<div class="row trigger" name="searchItem" id="searchItem">
Search Item
</div>
</div>
Actually your code working properly but the thing is that you cannot specfiy which div is opened now because all divs have the same content, so when you add numbers or a different content you can know which one is opened now
var otherDivs = ["addCustomer", "searchCustomer", "addItem", "searchItem"];
function show(target) {
var index = otherDivs.indexOf(target);
for (i = 0; i < otherDivs.length; i++) {
if (i != index) {
$(document.getElementById(otherDivs[i].toString())).hide();
} else {
$(document.getElementById(otherDivs[i].toString())).show();
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" style="padding-top: 10px;">
<div class="row" name="tabs">
<button class="redButton" onclick="show('addCustomer')">Add Customer</button>
<button class="redButton" onclick="show('searchCustomer')">Search Customers</button>
<button class="redButton" onclick="show('addItem')">Add Item</button>
<button class="redButton" onclick="show('searchItem')">Search Item</button>
</div>
<div class="row trigger" name="searchCustomer" id="searchCustomer">
.11..
</div>
<div class="row trigger" name="addCustomer" id="addCustomer">
.22..
</div>
<div class="row trigger" name="addItem" id="addItem">
.33..
</div>
<div class="row trigger" name="searchItem" id="searchItem">
.44..
</div>
</div>
Simpy use the JQuery toggle function like so
function show(target) {
$('#'+target).toggle();
}
You could replace your entire JS in the snippet to just these LOC. HTML remains the same.
function show(target) {
$('#'+target).toggle();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" style="padding-top: 10px;">
<div class="row" name="tabs">
<button class="redButton" onclick="show('addCustomer')">Add Customer</button>
<button class="redButton" onclick="show('searchCustomer')">Search Customers</button>
<button class="redButton" onclick="show('addItem')">Add Item</button>
<button class="redButton" onclick="show('searchItem')">Search Item</button>
</div>
<div class="row trigger" name="searchCustomer" id="searchCustomer">
...
</div>
<div class="row trigger" name="addCustomer" id="addCustomer">
...
</div>
<div class="row trigger" name="addItem" id="addItem">
...
</div>
<div class="row trigger" name="searchItem" id="searchItem">
...
</div>
</div>
Updated answer
function show(target) {
$("#Display").html( $('#' + target).html());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" style="padding-top: 10px;">
<div class="row" name="tabs">
<button class="redButton" onclick="show('addCustomer')">Add Customer</button>
<button class="redButton" onclick="show('searchCustomer')">Search Customers</button>
<button class="redButton" onclick="show('addItem')">Add Item</button>
<button class="redButton" onclick="show('searchItem')">Search Item</button>
</div>
<div class="row trigger" name="searchCustomer" id="searchCustomer" hidden>
Searching Customers
</div>
<div class="row trigger" name="addCustomer" id="addCustomer" hidden>
Customers added
</div>
<div class="row trigger" name="addItem" id="addItem" hidden>
Items added
</div>
<div class="row trigger" name="searchItem" id="searchItem" hidden>
Searching Items
</div>
<div id="Display">
</div>
</div>

Cannot update processbar

I am doing exactly like http://responsiweb.com/themes/preview/ace/1.3.3/elements.html
Here is the html code:
<div class="col-xs-4">
<div class="easy-pie-chart percentage" data-percent="0" data-color="#D15B47">
<span class="percent">0</span>%
</div>
<hr />
<div class="easy-pie-chart percentage" data-percent="0" data-color="#87CEEB">
<span class="percent">0</span>%
</div>
<hr />
<div class="easy-pie-chart percentage" data-percent="60" data-color="#87B87F">
<span class="percent">60</span>%
</div>
</div>
<!-- /.col -->
<button id="incre_know_one">
Increase processwheel</button>
and javascript:
$("#incre_know_one").click(function () {
$(".easy-pie-chart").attr('data-percent', '50');
$('.easy-pie-chart span').html('50');
});
It update the text but not fill the color..any suggestion???

Categories