"use strict";
var red_id = document.getElementsByClassName("btn btn-danger btn-lg btn-block betButton")[0];
var green_id = document.getElementsByClassName("btn btn-success btn-lg btn-block betButton")[0];
var black_id = document.getElementsByClassName("btn btn-inverse btn-lg btn-block betButton")[0];
document.getElementById('betAmount').value = 'NaN';
red_id.id = 'red';
green_id.id = 'green';
black_id.id = 'black';
setInterval(automated, 40000);
function automated() {
var roll_history = $('#past')[0].childNodes[9].textContent;
var roll_hisLast = $('#past')[0].childNodes[8].textContent;
var red_button = document.getElementById('red');
var black_button = document.getElementById('black');
var base_bet = 1;
function thisRoll(roll_history) {
var this_roll;
if (roll_history === 0) {
this_roll = 'green';
} else if ((roll_history >= 1) && (roll_history <= 7)) {
this_roll = 'red';
} else if ((roll_history >= 8) && (roll_history <= 14)) {
this_roll = 'black';
}
return this_roll;
}
var thisRoll = thisRoll(roll_history);
console.log(thisRoll);
function LastRoll(roll_hisLast) {
var last_roll;
if (roll_hisLast === 0) {
last_roll = 'green';
} else if ((roll_hisLast >= 1) && (roll_hisLast <= 7)) {
last_roll = 'red';
} else if ((roll_hisLast >= 8) && (roll_hisLast <= 14)) {
last_roll = 'black';
}
return last_roll;
}
var lastRoll = LastRoll(roll_hisLast);
console.log(LastRoll);
function compare(thisRoll, lastRoll) {
var win_lose;
if (thisRoll !== lastRoll) {
win_lose = 'lose';
} else {
win_lose = 'win';
}
return win_lose;
}
var winLose = compare(thisRoll, lastRoll);
console.log(winLose);
var input_last = document.getElementById('betAmount').value;
function betInputLast(input_last) {
var last;
last = input_last;
return last;
}
var lastXX = betInputLast(input_last);
console.log(lastXX);
function betInputLastX(lastXX) {
var fix_X;
if (isNaN(lastXX)) {
fix_X = base_bet;
}
return fix_X;
}
var lastX = betInputLastX(X);
console.log(lastX);
function betInput(winLose) {
var x;
if (winLose === 'win') {
x = base_bet;
} else if (winLose === 'lose') {
x = lastX * 2;
}
return x;
}
var X = betInput(winLose);
console.log(X);
var bet_input = document.getElementById('betAmount').value = X;
function bet(thisRoll, X) {
var log;
if (thisRoll === 'red') {
red_button.click();
log = 'Betting ' + X + ' on red';
} else if (thisRoll === 'black') {
black_button.click();
log = 'Betiing ' + X + ' on black';
}
return log;
}
var Log = bet(thisRoll, X);
console.log(Log);
}
<div class="roulette"><div class="well text-center" style="margin-bottom:10px;margin-top:25px; padding: 20px;">
<div class="progress text-center" style="height:50px;margin-bottom:10px;">
<span id="banner">Rolling in 24.93...</span>
<div class="progress-bar progress-bar-danger" id="counter" style="width: 83.1432%; overflow: hidden;"></div>
</div>
<div id="case" style="margin-bottom: 15px; background-position: -208px 0px;">
<div id="pointer"></div>
</div>
<div id="past">
<div data-rollid="696912" class="ball ball-0">0</div>
<div data-rollid="696913" class="ball ball-8">9</div>
<div data-rollid="696914" class="ball ball-1">5</div>
<div data-rollid="696915" class="ball ball-1">3</div>
<div data-rollid="696916" class="ball ball-1">6</div>
<div data-rollid="696917" class="ball ball-8">14</div>
<div data-rollid="696918" class="ball ball-1">3</div>
<div data-rollid="696919" class="ball ball-8">11</div>
<div data-rollid="696920" class="ball ball-8">10</div>
<div data-rollid="696921" class="ball ball-0">0</div>
</div>
<div style="margin: 20px 0px;">
</div>
<div class="form-group">
<div class="input-btn bet-buttons">
<span class="balance">
<span>Balance: </span>
<span id="dongers_r"></span>
<span id="balance_r" class="">15020</span> <i style="cursor:pointer; margin-left: 5px;" class="fa fa-refresh noselect" id="getbal_r"></i>
</span>
<input type="text" class="form-control input-lg" placeholder="Bet amount..." id="betAmount">
<button type="button" class="btn btn-danger betshort" data-action="clear">Clear</button>
<button type="button" class="btn btn-default betshort" data-action="10">+10</button>
<button type="button" class="btn btn-default betshort" data-action="100">+100</button>
<button type="button" class="btn btn-default betshort" data-action="1000">+1000</button>
<button type="button" class="btn btn-default betshort" data-action="half">1/2</button>
<button type="button" class="btn btn-default betshort" data-action="double">x2</button>
<button type="button" class="btn btn-primary betshort" data-action="max">Max</button>
</div>
</div>
</div>
<div class="row text-center">
<div class="col-xs-4 betBlock" style="padding-right:0px">
<div class="panel panel-default bet-panel" id="panel11-7-b">
<div class="panel-heading">
<button class="btn btn-danger btn-lg btn-block betButton" data-lower="1" data-upper="7"><span> 1 to 7</span><span></span></button>
</div>
</div>
<div class="panel panel-default bet-panel" id="panel1-7-m">
<div class="panel-body" style="padding:0px">
<div class="my-row">
<div class="text-center"><span class="mytotal">0</span></div>
</div>
</div>
</div>
<div class="panel panel-default bet-panel" id="panel1-7-t">
<div class="panel-body" style="padding:0px">
<div class="total-row">
<div class="text-center">Total bet: <span class="total">24485</span></div>
</div>
</div>
</div>
</div>
<div class="col-xs-4 betBlock">
<div class="panel panel-default bet-panel" id="panel0-0-b">
<div class="panel-heading">
<button class="btn btn-success btn-lg btn-block betButton" data-lower="0" data-upper="0">0</button>
</div>
</div>
<div class="panel panel-default bet-panel" id="panel0-0-m">
<div class="panel-body" style="padding:0px">
<div class="my-row">
<div class="text-center"><span class="mytotal">0</span></div>
</div>
</div>
</div>
<div class="panel panel-default bet-panel" id="panel0-0-t">
<div class="panel-body" style="padding:0px">
<div class="total-row">
<div class="text-center">Total bet: <span class="total">13780</span></div>
</div>
</div>
</div>
</div>
<div class="col-xs-4 betBlock" style="padding-left:0px">
<div class="panel panel-default bet-panel" id="panel8-14-b">
<div class="panel-heading">
<button class="btn btn-inverse btn-lg btn-block betButton" data-lower="8" data-upper="14"><span> 8 to 14</span><span></span></button>
</div>
</div>
<div class="panel panel-default bet-panel" id="panel8-14-m">
<div class="panel-body" style="padding:0px">
<div class="my-row">
<div class="text-center"><span class="mytotal">0</span></div>
</div>
</div>
</div>
<div class="panel panel-default bet-panel" id="panel8-14-t">
<div class="panel-body" style="padding:0px">
<div class="total-row">
<div class="text-center">Total bet: <span class="total">6572</span></div>
</div>
</div>
</div>
</div>
</div></div>
The function that dosen't work is function betInput(winLose) that have to multiply with 2 if winLose = 'lose' it happens first time but after that the output is only 2, were it should be multiplyed with 2.
I know this is peace of cake but i can't seem to figure it out.
I think there are a few problems here. I'm not totally sure what you are shooting for but these things might help.
I think you my have some scope issues here. The function automated gets called every so often on a timer. Each time that function is called all of the variables that are defined within automated using var statements are fresh, new variables. Consider defining lastX and X before the definition of automated. This way those values will be remembered for each successive call to automated.
Next consider the function betInputLastX. The only case that is covered is the initial case where the parameter value is NaN. I think that there should be an else branch that would assign X to fix_X. If this is not done the fix_X value is returned as undefined, and not useful in successive functions.
With these changes the output will give a sequence that looks some thing like NaN, 2, 4, 8, 16, 32, .... I'm not sure that all your problems are solved at this point but I hope these suggestions can get back on track to continue developing.
Related
I am trying to hide / show comment replies.
I tried a few methods but couldn't get class with dynamic ids.
My html structure is like this :
<div class="display-comments">
<div class="form-group border-bottom" id="comment-1">
//level - 1
<button type="button" class="btn btn-primary btn-xs show_reply">show replies</button>
</div>
<div class="form-group border-bottom parentOF-1" id="comment-2">
//level-2 parentOF-1
<button type="button" class="btn btn-primary btn-xs show_reply">show replies</button>
</div>
<div class="form-group border-bottom parentOF-2" id="comment-3">
//level-3 parentOF-2
</div>
<div class="form-group border-bottom" id="comment-4">
//level-4 doesnt have child
</div>
</div>
I tried like in the following example with different variations.
$(document).on('click', '.show_reply', function(e) {
e.preventDefault();
var commet-id = $('comment-').val();
var parentOF = $('parentOF-').val();
$(this).text() == "show replies" ? $(this).text("show replies") : $(this).text("hide replies");
$(this).closest('parentOF-').nextUntil('parentOF-').slideToggle();
});
But couldn't make it work. Thanks for any help.
You could Hide At comment div's all class that contains parentOf- class ,
$("div[class*='parentOF-']").hide();
then in each button attach event that show child comment on click , otherwise hide child comment and all it's children using recuresive function described in the snippet :
function hideRecurssive(id) {
let $child = $(`.parentOF-${id}`);
if($child.length>0) {
var newId = $child.attr("id")
// get last char that refer to child comment
newId = newId.charAt(newId.length - 1);
$child.slideUp();
var btn = $child.find(".show_reply");
if(btn.length) btn.text("show replies");
hideRecurssive(newId);
};
}
Here a working snippet as I understand :
$(function($) {
$("div[class*='parentOF-']").hide();
$(document).on('click', '.show_reply', function(e) {
e.preventDefault();
let id = $(this).attr("id");
if( $(this).text() == "show replies" ) {
$(this).text("hide replies")
let $childComment = $(`.parentOF-${id}`)
$childComment.slideDown();
} else if($(this).text() === "hide replies") {
hideRecurssive(id);
$(this).text("show replies")
}
});
});
function hideRecurssive(id) {
let $child = $(`.parentOF-${id}`);
if($child.length>0) {
var newId = $child.attr("id")
// get last char that refer to child comment
newId = newId.charAt(newId.length - 1);
$child.slideUp();
var btn = $child.find(".show_reply");
if(btn.length) btn.text("show replies");
hideRecurssive(newId);
};
}
.hide {
color: red;
}
.unhide {
color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<div id="display_comment" class="col-12">
<div class="form-group border-bottom " id="comment-6">
<div class="row">
<div class="col-12"><b>Netmaster</b> said!</div>
<div class="row">
<div class="col-2 stimg">
<picture>
<source type="image/webp" srcset="uploads/images/undefined.webp">
<img src="uploads/images/undefined.jpg" alt="netmaster" class="img-fluid">
</picture>
</div>
<div class="col-10 sttext">Google Çeviri, yabancı dili İnternet&#39;teki içerik deryasını tam olarak anlamak için yeterli olmayan kullanıcılar tarafından tercih ediliyor. Bununla birlikte Google Çeviri, her zaman mükemmel t</div>
</div>
<div class="col-12 sttime">2021-01-09 02:23:38
<button type="button" class="btn btn-primary btn-xs reply" id="6">Reply <i class="fas fa-share" aria-hidden="true"></i></button> <button id="6" type="button" class="btn btn-primary btn-xs show_reply">show replies</button>
</div>
</div>
</div>
<div class="form-group border-bottom parentOF-6" id="comment-7">
<div class="row">
<div class="col-12"><b>Netmaster</b> said!</div>
<div class="row">
<div class="col-2 stimg">
<picture>
<source type="image/webp" srcset="uploads/images/undefined.webp">
<img src="uploads/images/undefined.jpg" alt="netmaster" class="img-fluid">
</picture>
</div>
<div class="col-10 sttext">Translate aracı halihazırda 100&#39;den fazla dil arasında tercüme yapıyor.</div>
</div>
<div class="col-12 sttime">2021-01-09 02:23:56
<button type="button" class="btn btn-primary btn-xs reply" id="7">Reply <i class="fas fa-share" aria-hidden="true"></i></button> <button id="7" type="button" class="btn btn-primary btn-xs show_reply">show replies</button>
</div>
</div>
</div>
<div class="form-group border-bottom parentOF-7" id="comment-8">
<div class="row">
<div class="col-12"><b>Netmaster</b> said!</div>
<div class="row">
<div class="col-2 stimg">
<picture>
<source type="image/webp" srcset="uploads/images/undefined.webp">
<img src="uploads/images/undefined.jpg" alt="netmaster" class="img-fluid">
</picture>
</div>
<div class="col-10 sttext">Google Translate çeviriler için yakın zamana kadar Avrupa Parlamentosu ve Birleşmiş Milletler gibi büyük kuruluşların verilerini kullanıyordu. Çeviriler ayrıca sözlük bilgileri ve kullanıcılar tarafın</div>
</div>
<div class="col-12 sttime">2021-01-09 02:24:19
<button type="button" class="btn btn-primary btn-xs reply" id="8">Reply <i class="fas fa-share" aria-hidden="true"></i></button> <button id="8" type="button" class="btn btn-primary btn-xs show_reply">show replies</button>
</div>
</div>
</div>
<div class="form-group border-bottom parentOF-8" id="comment-11">
<div class="row">
<div class="col-12"><b>Netmaster</b> said!</div>
<div class="row">
<div class="col-2 stimg">
<picture>
<source type="image/webp" srcset="uploads/images/undefined.webp">
<img src="uploads/images/undefined.jpg" alt="netmaster" class="img-fluid">
</picture>
</div>
<div class="col-10 sttext">rew rew ew wre</div>
</div>
<div class="col-12 sttime">2021-01-09 18:10:46
<button type="button" class="btn btn-primary btn-xs reply" id="11">Reply <i class="fas fa-share" aria-hidden="true"></i></button>
</div>
</div>
</div>
<div class="form-group border-bottom " id="comment-9">
<div class="row">
<div class="col-12"><b>Netmaster</b> said!</div>
<div class="row">
<div class="col-2 stimg">
<picture>
<source type="image/webp" srcset="uploads/images/undefined.webp">
<img src="uploads/images/undefined.jpg" alt="netmaster" class="img-fluid">
</picture>
</div>
<div class="col-10 sttext">Google Çeviri nasıl kullanılır? Google Translate anlaşılır bir arayüze sahip ancak keşfedilecek birçok özelliği var.</div>
</div>
<div class="col-12 sttime">2021-01-09 02:24:43
<button type="button" class="btn btn-primary btn-xs reply" id="9">Reply <i class="fas fa-share" aria-hidden="true"></i></button>
</div>
</div>
</div>
</div>
Updated as per request. This will allow you to show nested comments and hide them. If you hide a parent comment then all nested comments will be hidden.
N.B. I changed your parentOF- to childOF- because it didn't make sense. You can just change all incidences of the class name in the code below if you'd like to keep it.
All the code is fully commented.
// Add dynamic click event listener
$(document).on('click', '.show_reply', function(e) {
// Toggle button text
if ($(this).text() == "show replies") {
$(this).text("hide replies");
} else {
$(this).text("show replies");
}
// Get comment-id from parent element
commentID = $(this).parent().attr("id");
// Just get id
commentID = commentID.replace("comment-", "");
// Store element
el = $(".childOF-" + commentID);
// Check if element is visible
if (el.is(':visible')) {
// Check for nested comments if hiding
hideNested(commentID);
// Hide element
el.slideUp();
} else {
// Show element
el.slideDown();
}
});
function hideNested(nestedID) {
// Find element that is child of the one passed
nested = $(".childOF-" + nestedID)
// Check if nested comment exists
if (nested.length == 0) {
// Exit function if it does not
return;
}
// Hide comment
nested.slideUp();
// Update button text
nested.find("button.show_reply").text("show replies");
// Check for further nested comments
hideNested(nested.attr("id").replace("comment-", ""));
}
div[class^='childOF'],
div[class*=' childOF'] {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="display-comments">
<div class="form-group border-bottom" id="comment-1">
//level - 1
<button type="button" class="btn btn-primary btn-xs show_reply">show replies</button>
<div class="form-group border-bottom childOF-1" id="comment-2">
//level-2 childOF-1
<button type="button" class="btn btn-primary btn-xs show_reply">show replies</button>
</div>
<div class="form-group border-bottom childOF-2" id="comment-3">
//level-3 childOF-2
<button type="button" class="btn btn-primary btn-xs show_reply">show replies</button>
</div>
<div class="form-group border-bottom childOF-3" id="comment-4">
//level-4 childOF-3
</div>
</div>
<div class="form-group border-bottom" id="comment-5">
//level-5 doesnt have child
</div>
</div>
I want to get the text between the div tag by clicking on the button event
<div class="col-lg-3 col-md-6 mb-4">
<div class="pricing-table pricing-secondary">
<div class="price-header">
<h3 class="title text-white">Gold Plan</h3>
<div class="price">
<span class="dollar">₹</span> 7000
</div>
<span class="permonth">3 months</span>
</div>
<div class="price-footer">
<a data-toggle="modal" data-target="#myModal"
class="btn btn-primary btn-block btn-lg" href="javascript:void(0);">Book an
Online Appointment</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="pricing-table pricing-third">
<div class="price-header">
<h3 class="title text-white">Diamond Plan</h3>
<div class="price text-primary">
<span class="dollar">₹</span> 12000
</div>
<span class="permonth">6 Months</span>
</div>
<div class="price-footer">
<a data-toggle="modal" data-target="#myModal"
class="btn btn-primary btn-block btn-lg" href="javascript:void(0);">Book an
Online Appointment</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="pricing-table pricing-fourth">
<div class="price-header">
<h3 class="title text-white">Platinum Plan</h3>
<div class="price text-white">
<span class="dollar">₹</span> 15000
</div>
<span class="permonth">12 Months</span>
</div>
<div class="price-footer">
<a data-toggle="modal" data-target="#myModal"
class="btn btn-primary btn-block btn-lg" href="javascript:void(0);">Book an
Online Appointment</a>
</div>
</div>
</div>
I have this type of divs its around three or four I want to detect the value 12000 and the month 6 Months by clicking on this button
How can I achieve that.
Try
$(".price-footer .btn").on( "click", function(event) {
const parent = $(this).parents('.pricing-table');
const priceText = $('.price', parent).text().trim();
const priceParts = priceText.split(' ');
console.log(`priceText: ${priceParts[1]}`);
// Output: "priceText: 12000"
const permonthText = $('.permonth', parent).text().trim();
console.log(`permonthText: ${permonthText}`);
// Output: "permonthText: 6 Months"
});
Demo - https://codepen.io/vyspiansky/pen/MWybEEr
You can add ids to the elements you want to extract the contents of, then you can use document.getElementById(id) to get those elements, and use .innerText to extract the string contents.
Then with a string.replace() you can remove any non-numerical values, and convert the monetary value into a number.
const dollarAmount = parseFloat(document.getElementById("dollar-info").innerText.replace(/[^0-9.]/g, ''))
const month = document.getElementById("month-info").innerText
console.log(dollarAmount)
console.log(month)
<div class="price-header">
<h3 class="title text-white">Diamond Plan</h3>
<div id="dollar-info" class="price text-primary">
<span class="dollar">₹</span>12000.80
</div>
<span id="month-info" class="permonth">6 Months</span>
</div>
Assuming you have many price tables you can loop each table as below example. You can wrap you data in a certain class and get the text value of that class div. Click the button on the to get the value in the example below
$(document).ready(function(){
$('.pricing-table').each(function(){
var $table = $(this);
$table.on('click', '.btn-primary', function(){
var price = $table.find('.price').text().trim();
var permonth = $table.find('.permonth').text().trim();
alert("price is " + price + " for " + permonth);
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-3 col-md-6 mb-4">
<div class="pricing-table pricing-third">
<div class="price-header">
<h3 class="title text-white">Diamond Plan</h3>
<div class="price text-primary">
<span class="dollar">₹</span> 12000
</div>
<span class="permonth">6 Months</span>
</div>
<div class="price-footer">
<a data-toggle="modal" data-target="#myModal"
class="btn btn-primary btn-block btn-lg" href="javascript:void(0);">Book an
Online Appointment</a>
</div>
</div>
</div>
There are so many options to do this. Here is my example with the snippet and code sandbox.
// jquery
const findValues = (target, value) => target.parents().eq(1).find(value);
$(document).on("click", ".btn", (e) => {
const $target = $(e.target);
// dollar is optional
const $dollar = findValues($target, ".dollar");
const $value = findValues($target, ".value");
const $month = findValues($target, ".permonth");
$("#test").text(`${$dollar.text()} ${$value.text()} ${$month.text()}`);
});
// // vanilla js
const test1 = document.querySelector("#test1");
document.querySelectorAll(".btn").forEach((btn) => {
btn.addEventListener("click", ({ target }) => {
const nodes = target.parentNode.parentNode;
const dollar1 = nodes.querySelector(".dollar");
const value1 = nodes.querySelector(".value");
const month1 = nodes.querySelector(".permonth");
test1.innerText = `${dollar1.textContent} ${value1.textContent} ${month1.textContent}`;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-3 col-md-6 mb-4">
<div class="pricing-table pricing-secondary">
<div class="price-header">
<h3 class="title text-white">Gold Plan</h3>
<div class="price">
<span class="dollar">₹</span> <span class="value">7000</span>
</div>
<span class="permonth">3 months</span>
</div>
<div class="price-footer">
<a data-toggle="modal" data-target="#myModal" class="btn btn-primary btn-block btn-lg"
href="javascript:void(0);">Book an
Online Appointment</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="pricing-table pricing-third">
<div class="price-header">
<h3 class="title text-white">Diamond Plan</h3>
<div class="price text-primary">
<span class="dollar">₹</span> <span class="value">12000</span>
</div>
<span class="permonth">6 Months</span>
</div>
<div class="price-footer">
<a data-toggle="modal" data-target="#myModal" class="btn btn-primary btn-block btn-lg"
href="javascript:void(0);">Book an
Online Appointment</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="pricing-table pricing-fourth">
<div class="price-header">
<h3 class="title text-white">Platinum Plan</h3>
<div class="price text-white">
<span class="dollar">₹</span> <span class="value">15000</span>
</div>
<span class="permonth">12 Months</span>
</div>
<div class="price-footer">
<a data-toggle="modal" data-target="#myModal" class="btn btn-primary btn-block btn-lg"
href="javascript:void(0);">Book an
Online Appointment</a>
</div>
</div>
</div>
<div id="test"></div>
<div id="test1"></div>
https://codesandbox.io/s/eager-voice-2w640?file=/src/index.js
On click of add button, I can able to add 7 divs in an order. And when I try to remove a div in between, then, sebsequent divs should be renamed/updated as per the order.
My HTML
<div class="container">
<div class="row">
<div id="driver<%=i%>" class="panel panel-default knowledge">
<div class="panel-heading2">
<h4 class="panel-title collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#collapse<%=i%>" aria-expanded="false">
<a class="accordion-toggle driver-title<%=i%>">Driver <%=i%></a>
<div class="pull-right"><span class="glyphicon glyphicon-plus"></span></div>
</h4>
</div>
<div id="collapse<%=i%>" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="gap gap-mini"></div>
<div class="form-group">
<label class="col-sm-4 control-label">Full Name</label>
<div class="col-sm-6">
<input type="text" id="drname<%=i%>" name="drname" class="form-control" placeholder="Full Name">
</div>
</div>
<div class="remove_wrap_but">
- remove driver
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I'm looping this content 7 times so that I can add divs 7 times in a sequential order like 1 2 3 4 5 6 7.
My javascript code is as follows.
var valueItemCount = 2;
if($('#hdItemCount').val()!='2'){
valueItemCount =$('#hdItemCount').val();
}
var isRemove = false;
var isAdded = false;
$('#hdItemCount').val(valueItemCount);
function addValueItem() {
//alert(isRemove);
//$('#errmessage').html("");
console.log("valueItemCount addValueItem : "+valueItemCount);
console.log("isRemove : "+isRemove);
if(valueItemCount <8) {
if (isRemove && !isAdded) ++valueItemCount;
// alert(valueItemCount);
$('#driver' + valueItemCount).show();
++valueItemCount;
$('#hdItemCount').val(valueItemCount);
isAdded = true;
} else {
//$('#errmessage').html("Maximm Limit Reached");
}
// alert(isAdded);
console.log("isAdded : "+isAdded);
}
function removeValueItem(cnt) {
if($('#hdItemCount').val()!='2'){
valueItemCount =$('#hdItemCount').val();
}
if (isAdded && !isRemove) {--valueItemCount;}
alert(cnt);
console.log(" removeValueItem cnt : "+cnt);
console.log("valueItemCount removeValueItem : "+valueItemCount);
var count=Number(cnt)+1
//alert('count1111'+count);
$('#driver' + cnt).hide();
if (isAdded && isRemove) { --valueItemCount; }
$('#hdItemCount').val(valueItemCount);
//alert(count);
console.log("count : "+count);
var i;
for (i = count; i <8; i++) {
var j=i-1;
$('#'+i).attr('id',j);
$('#driver' + i).attr('id','driver'+j);
$('.driver-title' + i).text('Driver '+j);
}
isRemove = true;
console.log(" isRemove remove : "+isRemove);
console.log(" isAdded remove : "+isAdded);
if (valueItemCount == 2) {
isRemove = false;
isAdded = false;
}
}
if($('#hdItemCount').val()!='2'){
valueItemCount =$('#hdItemCount').val();
}
var itemcnt = '<%=cntvalue%>';
for(var i=valueItemCount;i<=8;i++){
$('#driver'+i).hide();
}
for (var i=1;i<valueItemCount;i++){
console.log("valueItemCount : "+valueItemCount);
$('#driver'+i).show();
$('#hdItemCount').val(valueItemCount);
}
With this code, I can able to add divs upto 7 which is correct. when I try to delete one particular div in between the order, subsequent divs got renamed but later, i'm unable to add / remove further. Remove is working only once.
Can anyone help on this.
Can add up to 7 drivers in total by clicking add Icon
Removing any driver removes particular driver, thereby reordering all Ids.
Removing each driver, will give space to add another driver at last, such that their total count won't exceed 7;
function addValueItem() {
if ($('div.driverContainer div.knowledge[id*=driver]:not(.hidden)').length < 7) {
var templateDiv = $('.driver-template').clone(true);
templateDiv.removeClass('driver-template hidden').addClass('container driverContainer');
templateDiv.clone(true).insertAfter($('div.driverContainer:last'));
reAssignIDs();
}
}
function removeValueItem(elem) {
if ($('div.driverContainer div.knowledge[id*=driver]:not(.hidden)').length == 1) {
addValueItem();
}
$(elem).closest('div.driverContainer').remove();
reAssignIDs();
}
function reAssignIDs() {
var Index = 1;
$('div.driverContainer div.knowledge[id*=driver]').each(function() {
if (!$(this).hasClass('hidden')) {
$(this).attr('id', 'driver' + Index);
$(this).find('h4').attr('data-target', '#collapse' + Index);
$(this).find('h4 a').text('Driver ' + Index);
$(this).find('div[id*=collapse]').attr('id', 'collapse' + Index);
$(this).find('input[id*=drname]').attr('id', 'drname' + Index);
$(this).find('.remove_wrap_but a.btn-yellow').attr('id', Index);
Index++;
}
});
$(".glyphicon.glyphicon-plus").addClass('hidden');
if ($('div.driverContainer div.knowledge[id*=driver]:not(.hidden)').length < 7) {
$(".glyphicon.glyphicon-plus:last").removeClass('hidden');
}
}
$(".panel-title").click(function(e) {
if (!$(e.target).is('.glyphicon.glyphicon-plus'))
$(this).closest('.row').find('.panel-collapse').toggleClass('collapse');
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="driver-template hidden">
<div class="row">
<div id="driver" class="panel panel-default knowledge">
<div class="panel-heading2">
<h4 class="panel-title collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#collapse" aria-expanded="false">
<a class="accordion-toggle driver-title1">Driver X</a>
<div class="pull-right"><span class="glyphicon glyphicon-plus" onclick="addValueItem()"></span></div>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="gap gap-mini"></div>
<div class="form-group">
<label class="col-sm-4 control-label">Full Name</label>
<div class="col-sm-6">
<input type="text" id="drname" name="drname" class="form-control" placeholder="Full Name">
</div>
</div>
<div class="remove_wrap_but">
- remove driver
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container driverContainer">
<div class="row">
<div id="driver1" class="panel panel-default knowledge">
<div class="panel-heading2">
<h4 class="panel-title collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#collapse1" aria-expanded="false">
<a class="accordion-toggle driver-title1">Driver 1</a>
<div class="pull-right"><span class="glyphicon glyphicon-plus" onclick="addValueItem()"></span></div>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="gap gap-mini"></div>
<div class="form-group">
<label class="col-sm-4 control-label">Full Name</label>
<div class="col-sm-6">
<input type="text" id="drname1" name="drname" class="form-control" placeholder="Full Name">
</div>
</div>
<div class="remove_wrap_but">
- remove driver
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
*Please note that I've created a template div with class 'driver-template'. Whils clicking 'Add' option, I just inserted this template at end, and renamed all ids. You can even keep 7 drivers initially using your loop. Further working like removing and adding will work accordingly using this logic.*
If still this is not what you are required, please explain more.
I try to make my progress bar step when I click on a next button from a survey.
But I think I missed something in the actual code.
My survey is composed with slider that validate the answer in a output after the click button.
Could be great if help, thanks !
Here is my html :
<form class="form" name="frm" method="post" action="quest_A_rec.asp" onKeydown="testClavier();" >
<input name="ID" value="<%=Data_Questions("ID_Resultat")%>" type="hidden">
<div class="col-sm-12">
<div class="row col-sm-offset-2">
<div class="col-sm-8 cent" id="question">
<div class="left">
<p class="requestBig"><%=Data_Questions("LibQuestion")%></p>
</div>
<output><%=initOutput%></output>
</div>
</div>
</div>
<div class="mySlider">
<div class="row col-sm-offset-2">
<div class="col-sm-8 cent">
<div class="col-sm-3" id="jamais">
<p><%=session("LibLow")%><br />
|</p>
</div>
</div>
</div>
<div class="row col-sm-offset-2">
<div class="col-sm-8 cent">
<input type="range" value="<%=valBornes("valMin")-1%>" step="1" min="<%=valBornes("valMin")%>" max="<%=valBornes("valMax")%>">
<br />
</div>
</div>
<div class="row col-sm-offset-2">
<div class="col-sm-8 cent">
<div class="col-sm-3" id="toujours">
<p>|<br />
<%=libBornes("libHigh")%></p>
</div>
</div>
</div>
</div>
</form>
<div class="row">
<div class="col-sm-4 col-sm-offset-2">
<p class="avancement"><%=GetTexteFBA("avancement")%></p>
</div>
<div class="col-sm-5">
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 boutons">
<div class="col-sm-6 col-sm-push-6">
<button type="button" class="btn myBtnRight" href="<%=urlNext%>" onClick="document.frm.submit();" id="btnNext"><%=GetTexteFBA("btn_valider")%><span class="iconInsideButtonRight icon-chevron-right"></span></button>
<button type="button" class="action submit btn myBtnRight">Submit</button>
</div>
<div class="col-sm-6 col-sm-pull-6">
<button type="button" class="btn myBtnnobs" href="#" role="button" onClick="document.frm_nobs.submit();"><%=GetTexteFBA("btn_nobs")%></button>
here is my JS
$(document).ready(function(){
var current = 1;
widget = $(".step");
btnnext = $(".myBtnRight");
//btnback = $(".back");
btnsubmit = $(".submit");
// Init buttons and UI
widget.not(':eq(0)').hide();
hideButtons(current);
setProgress(current);
// Next button click action
btnnext.click(function(){
if(current < widget.length){
// Check validation
if($(".form").valid()){
widget.show();
widget.not(':eq('+(current++)+')').hide();
setProgress(current);
}
}
hideButtons(current);
})
/*
// Back button click action
btnback.click(function(){
if(current > 1){
current = current - 2;
if(current < widget.length){
widget.show();
widget.not(':eq('+(current++)+')').hide();
setProgress(current);
}
}
hideButtons(current);
})
*/
// Submit button click
btnsubmit.click(function(){
alert("Submit button clicked");
});
$('.form').validate({ // initialize plugin
ignore:":not(:visible)",
rules: {
name : "required"
},
});
});
// Change progress bar action
setProgress = function(currstep){
var percent = parseFloat(100 / widget.length) * currstep;
percent = percent.toFixed();
$(".progress-bar").css("width",percent+"%").html(percent+"%");
}
// Hide buttons according to the current step
hideButtons = function(current){
var limit = parseInt(widget.length);
$(".action").hide();
if(current < limit) btnnext.show();
if(current > 1) btnback.show();
if (current == limit) {
btnnext.hide();
btnsubmit.show();
}
}
I am making a website for education purpose as well, but I got some error that I cant figure out by myself.
I wrote a template like:
<div class="row" style="height: 75%;" align="center" id="room-list">
<template id="room-template" class="slide">
<div class="col-md-4" id="left-item">
<div class="panel panel-default panel-primary">
<div class="panel-heading">
<span id="room-type"></span>
</div>
<div class="panel-body">
<div id="thumbnail" class="thumbnail" style="width: 300px; height: 300px;"></div>
<div id="utility">
Utilities:
</div>
<div id="price">
Price:
<span id="sale" class="sale"><i class="fa fa-usd" aria-hidden="true"></i></span>
<span id="original" class="original"><i class="fa fa-usd" aria-hidden="true"></i></span>
</div>
</div>
<div class="panel-footer">
<button class="btn btn-default btn-primary" style="width: 100%;">Book now!</button>
</div>
</div>
</div>
<div class="col-md-4" id="center-item">
<div class="panel panel-default panel-primary">
<div class="panel-heading">
<span id="room-type"></span>
</div>
<div class="panel-body">
<div id="thumbnail" class="thumbnail" style="width: 300px; height: 300px;"></div>
<div id="utility">
Utilities:
</div>
<div id="price">
Price:
<span id="sale" class="sale"><i class="fa fa-usd" aria-hidden="true"></i></span>
<span id="original" class="original"><i class="fa fa-usd" aria-hidden="true"></i></span>
</div>
</div>
<div class="panel-footer">
<button class="btn btn-default btn-primary" style="width: 100%;">Book now!</button>
</div>
</div>
</div>
<div class="col-md-4" id="right-item">
<div class="panel panel-default panel-primary">
<div class="panel-heading">
<span id="room-type"></span>
</div>
<div class="panel-body">
<div>
<img id="thumbnail" class="thumbnail" style="width: 300px; height: 300px;">
</div>
<div id="utility">
Utilities:
</div>
<div id="price">
Price:
<span id="sale" class="sale"><i class="fa fa-usd" aria-hidden="true"></i></span>
<span id="original" class="original"><i class="fa fa-usd" aria-hidden="true"></i></span>
</div>
</div>
<div class="panel-footer">
<button class="btn btn-default btn-primary" style="width: 100%;">Book now!</button>
</div>
</div>
</div>
</template>
</div>
And I use jquery to add that template to a append a lot of divs by using template.
var roomList = document.querySelector('template# room-list').content;
for (var i = 0; i < roomEntities.length; i++) {
var room = roomEntities[i];
var price = priceEntities[i];
var type = room.type;
var thumbnail = room.thumbnail;
var sale = price.sale;
var original = price.original;
for (var i = 0; i < 3; i++) {
var slt = "#center-item";
if (i == 0) {
slt = "#left-item";
}
else
slt = "#right-item";
var tpl = document.getElementById('room-template');
tpl.querySelector(slt + '.panel-default .panel-heading #room-type').innerText = type;
tpl.querySelector(slt + '.panel-body #thumbnail').attr('src') = thumbnail;
tpl.querySelector(slt + '.panel-body #sale').innerText = sale;
tpl.querySelector(slt +'.panel-body #original').innerText = original;
roomList.appendChild(tpl.content.cloneNode(true));
}
}
But it always returns error at tpl.querySelector(slt + '.panel-default .panel-heading #room-type').innerText = type; it said Cannot set property innerText of null, it mean cannot find the element in template.
Any advice or recommended. Please help. Many thanks
Change all Selectors in your Code
tpl.querySelector(slt + '.panel-default .panel-heading #room-type').innerText
tpl.querySelector(slt + ' .panel-default .panel-heading #room-type').innerText