I have been trying to get this working from last couple of days without any success. I have this price calculator function developed by a freelancer who is not reachable from last few weeks.
This function works fine without any JavaScript tabs but not quite right with them. I need to have tabs on page because there are tons of options in this calculator.
This is the jQuery function.
$(document).ready(function() {
// For tabs
var tabContents = $(".tab_content").hide(),
tabs = $("ul.nav-tabs li");
tabs.first().addClass("active").show();
tabContents.first().show();
tabs.click(function() {
var $this = $(this),
activeTab = $this.find('a').attr('href');
if (!$this.hasClass('active')) {
$this.addClass('active').siblings().removeClass('active');
tabContents.hide().filter(activeTab).fadeIn();
}
return false;
});
// For Calculator
function Cost_Calculator() {
var Currency = '$';
var messageHTML = 'Please contact us for a price.';
function CostFilter(e) {
return e;
}
//Calculate function
function calculate() {
//Blank!
var CalSaveInfo = [];
$('#cost_calc_custom-data, #cost_calc_breakdown').html('');
//Calculate total
var calCost = 0;
var calculate_class = '.cost_calc_calculate';
$('.cost_calc_active').each(function() {
//Calculation
calCost = calCost + parseFloat($(this).data('value'));
//Add to list
var optionName = $(this).attr('value');
var appendName = '<span class="cost_calc_breakdown_item">' + optionName + '</span>';
var optionCost = $(this).attr('data-value');
var appendCost = '<span class="cost_calc_breakdown_price">' + Currency + optionCost + '</span>';
if (optionCost != "0") {
var appendItem = '<li>' + appendName + appendCost + '</li>';
}
//hidden data
var appendPush = ' d1 ' + optionName + ' d2 d3 ' + optionCost + ' d4 ';
$('#cost_calc_breakdown').append(appendItem);
CalSaveInfo.push(appendPush);
});
//Limit to 2 decimal places
calCost = calCost.toFixed(2);
//Hook on the cost
calCost = CostFilter(calCost);
var CustomData = '#cost_calc_custom-data';
$.each(CalSaveInfo, function(i, v) {
$(CustomData).append(v);
});
//Update price
if (isNaN(calCost)) {
$('#cost_calc_total_cost').html(messageHTML);
$('.addons-box').hide();
} else {
$('#cost_calc_total_cost').html(Currency + calCost);
$('.addons-box').show();
}
}
//Calculate on click
$('.cost_calc_calculate').click(function() {
if ($(this).hasClass('single')) {
//Add cost_calc_active class
var row = $(this).data('row');
//Add class to this only
$('.cost_calc_calculate').filter(function() {
return $(this).data('row') == row;
}).removeClass('cost_calc_active');
$(this).addClass('cost_calc_active');
} else {
// Remove class if clicked
if ($(this).hasClass('cost_calc_active')) {
$(this).removeClass('cost_calc_active');
} else {
$(this).addClass('cost_calc_active');
}
}
//Select item
var selectItem = $(this).data('select');
var currentItem = $('.cost_calc_calculate[data-id="' + selectItem + '"]');
var currentRow = currentItem.data('row');
if (selectItem !== undefined) {
if (!$('.cost_calc_calculate[data-row="' + currentRow + '"]').hasClass('cost_calc_active'))
currentItem.addClass('cost_calc_active');
}
//Bring in totals & information
$('#cost_calc_breakdown_container, #cost_calc_clear_calculation').fadeIn();
$('.cost_calc_hide').hide();
$('.cost_calc_calculate').each(function() {
if ($(this).is(':hidden')) {
$(this).removeClass('cost_calc_active');
}
calculate();
});
return true;
});
$('#cost_calc_clear_calculation').click(function() {
$('.cost_calc_active').removeClass('cost_calc_active');
calculate();
$('#cost_calc_breakdown').html('<p id="empty-breakdown">Nothing selected</p>');
return true;
});
}
//Run cost calculator
Cost_Calculator();
});
You can see this working on jsfiddle without tabs. I can select options from multiple sections and order box will update selected option's price and details dynamically.
But when I add JavaScript tabs, it stop working correctly. See here. Now if I select option from different sections, order box resets previous selection and shows new one only.
I think the problem is with calculator somewhere.
You are removing the active class from hidden elements. This means that when you move to the second tab you disregard what you've done in the first.
line 120 in your fiddle:
if ($(this).is(':hidden')) {
$(this).removeClass('cost_calc_active');
}
I haven't taken the code in depth enough to tell if you can just remove this.
Related
I'm writing a bit of script for the WooCommerce product page that takes the quantity entered in the qty input field and displays some text based on that qty:
function reduce(numerator,denominator){
var gcd = function gcd(a,b){
return b ? gcd(b, a%b) : a;
};
gcd = gcd(numerator,denominator);
return [numerator/gcd,denominator/gcd];
}
jQuery('.qty').on('change', function() {
showOdds();
});
function showOdds() {
var qty = 1; // hard coded for testing
var min = 200; // hard coded for testing
var sofar = 40; // hard coded for testing
var plural = '';
var total = 0;
var odds = '';
if (qty > 1){
plural = 'tickets';
}
else{
plural = 'ticket';
}
if (qty > 0){
if ((qty + sofar) > min){
total = qty + sofar;
odds = reduce(qty, total);
}
else {
odds = reduce(qty, min);
}
var text = document.createElement('p');
text.className = 'product-odds';
text.innerHTML = 'Max odds of ' + qty + ' ' + plural + ' winning is ' + odds + '.';
var theDiv = document.getElementById('odds');
theDiv.appendChild(text);
}
}
jQuery(document).ready(function loadPage() {
showOdds();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='odds'></div>
The current output:
Max odds of 1 ticket winning is 1,200
How can I make the odds display in their simplest fraction form? For example if there are 200 tickets available and '1' is entered, it should show '1/200' but if someone enters '20' it should show '1/10'. The 'total' figure will eventually be picked up from the page rather than a fixed value too.
I can use the gcd as posted here but how can I get the two numbers from the array and display them as a fraction (with the /) in the required div?
You can return the desired string instead of array. Check the snippet below.
I've changed return [numerator/gcd,denominator/gcd]; to return numerator/gcd+'/'+denominator/gcd;
function reduce(numerator,denominator){
var gcd = function gcd(a,b){
return b ? gcd(b, a%b) : a;
};
gcd = gcd(numerator,denominator);
return numerator/gcd+'/'+denominator/gcd;
}
jQuery('.qty').on('change', function() {
showOdds();
});
function showOdds() {
var qty = 1; // hard coded for testing
var min = 200; // hard coded for testing
var sofar = 40; // hard coded for testing
var plural = '';
var total = 0;
var odds = '';
if (qty > 1){
plural = 'tickets';
}
else{
plural = 'ticket';
}
if (qty > 0){
if ((qty + sofar) > min){
total = qty + sofar;
odds = reduce(qty, total);
}
else {
odds = reduce(qty, min);
}
var text = document.createElement('p');
text.className = 'product-odds';
text.innerHTML = 'Max odds of ' + qty + ' ' + plural + ' winning is ' + odds + '.';
var theDiv = document.getElementById('odds');
theDiv.appendChild(text);
}
}
jQuery(document).ready(function loadPage() {
showOdds();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='odds'></div>
Plunker.
I have Implemented the above plunker, In that plunker the rowId is increasing with Alphabets.Like the below
There will be + and ++ and - buttons in that component.
If I press + then The Rowid will start from Starting Alphabet(A).
If I press ++ Then The parent rowid + starting with Starting Alphabet means(AA).
And Again if I press ++ then parent rowId + starting with Starting Alphabet means(AAA). Like this it will increase.
Please access the Plunker here.
But I want to achieve that functionality with Numbers means
For single plus it should show 1, For ++ it should show 111 like this I need to achieve.
Can you please help me to do this functionality.
var newRow = {
"rowId": "A"
}
$scope.componentList = [];
$scope.componentList.push(angular.copy(newRow));
$scope.addParentRow = function(rowId) {
var newGridRow = angular.copy(newRow);
var lastChar = getListOfSameLevel(rowId, true); //isParentRow
var parentId = rowId.length > 1 ? rowId.slice(0, rowId.length - 1) : "";
newGridRow.rowId = parentId + getNextChar(lastChar);
$scope.componentList.push(newGridRow);
}
$scope.addChildRow = function(rowId) {
var newGridRow = angular.copy(newRow);
var lastChar = getListOfSameLevel(rowId, false);
if (rowId.length === lastChar.length) {
newGridRow.rowId = rowId + "A";
} else {
var parentId = lastChar.length > 1 ? lastChar.slice(0, lastChar.length - 1) : "";
newGridRow.rowId = parentId + getNextChar(getLastChar(lastChar));
}
$scope.componentList.push(newGridRow);
};
var getNextChar = function(inputChar) {
return String.fromCharCode(inputChar.charCodeAt(0) + 1);
};
var getLastChar = function(fullStr) {
return fullStr.slice(-1);
};
You need to change the initial value of newRow.rowId from A to 1 and to change the initiation of the next digits from A to 1 in the addChildRow function like this :
if (rowId.length === lastChar.length) {
newGridRow.rowId = rowId + "1";
}
Here is your plunker with numbers
So I have made a table table elements and functions for the pop up and the form. Appending element on clicking save button also works. However on a new popup the data from the form is appended in every previously clicked table cell no matter if the cell is full or empty.I am somehow trying to populate the cell with currently generated ID . Considering the fact that I me new at JavaScript I am totally missing something Can someone give me idea what is that. The Code
//================ADDs POPUP ON CLICK================/
$(document).ready(function () {
/*Adding the klikanje class to td*/
$('table tbody tr:not(:first) td').addClass('klikanje');
/*removing the klikanje class from the first column*/
$('table tr:first-child, table td:first-child').removeClass('klikanje');
/*removing the klikanje class from the first row*/
$('table tbody tr:first-child td').removeClass('klikanje');
/*Making random id*/
/*appending data atributs to empty td*/
$('.klikanje').click(function(){
var self = $(this);
if ($(this).is(':empty')) {
var idBase = 'clickId-';
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
var idNumber = getRandomInt(1, 1000000);
var clickID = idBase + idNumber
var callingID = '#' + clickID;
$(this).attr({ 'data-toggle': 'modal', 'data-target': '#popUp', 'id': clickID });
/*save to td */
$('#save').click(function () {
var theName = $('input[name=name]').val();
var theLastName = $('input[name=lastname]').val();
var $fullCell = $('<p>' + theName + '' + theLastName + '</p>');
if((theLastName+theLastName).length > 0){
$(callingID).append($fullCell);
$(callingID).css('background-color', 'yellow');
}
}); /*save to td end */
} else {
alert('Already taken spot. Please pick another one!');
$(this).attr({ 'data-toggle': '', 'data-target': '', 'id': '' });
}
});
});//<---ADDs POPUP ON CLICK END
Full code : JsFiddle
You need to just empty the fields after saving the value because same popup html is used again and again and value once entered in the input elements will stay there until manually cleared.
Use below code.
var callingID = "";
$('.klikanje').click(function(){
var self = $(this);
if ($(this).is(':empty')) {
var idBase = 'clickId-';
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
var idNumber = getRandomInt(1, 1000000);
var clickID = idBase + idNumber
callingID = '#' + clickID;
$(this).attr({ 'data-toggle': 'modal', 'data-target': '#popUp', 'id': clickID });
updated fiddle : https://jsfiddle.net/9zcj3ab8/27/
I don't know why this is happening but if you remove the attributes for what I think it's a bootstrap modal you get the desired behavior. I think is something related with you are referencing the modal with every cell you have clicked before, but removing the attributes it seems to work properly.
Update this in your code:
$('#save').click(function () {
var theName = $('input[name=name]').val();
var theLastName = $('input[name=lastname]').val();
var $fullCell = $('<p>' + theName + '' + theLastName + '</p>');
if((theLastName+theLastName).length > 0){
$(callingID).append($fullCell);
$(callingID).css('background-color', 'yellow');
$(this).attr({ 'data-toggle': '', 'data-target': '', 'id': '' });
}); /*save to td end */
I have gone through quite a few similar question but none of them fit to my problem.
I am calling a function after onclick event to my anchor tag and after clicking the anchor tag the function adds a row new row to another section within the webpage.
What I am trying to do is to revert the process back when a user clicks on the same anchor tag again. In other words the newly added row should be removed from the view if clicked again.
Here is my code where on click I am calling a function to add new rows
function drawSelections(betTypeId, tableId, selections) {
var whiteLegendTrId = tableId + '_whiteLegendTr';
$.each(selections, function(i, v){
var selectionRowId = tableId + '_' + v.id;
document.getElementById(tableId).appendChild(createTr(selectionRowId,null,"white"));
$('#' + whiteLegendTrId).find('td').each(function() {
var tdId = $(this).attr('id');
if (tdId == "pic") {document.getElementById(selectionRowId).appendChild(createTd(null, null, null, "",null))}
else if (tdId == "no") {document.getElementById(selectionRowId).appendChild(createTd(null, null, null, v.position,null))}
else if (tdId == "horseName" || tdId == "jockey") {document.getElementById(selectionRowId).appendChild(createTd(null, null, null, v.name,null))}
// Horse prices
else {
var priceNotFound = true;
$.each(v.prices, function(index,value) {
if (value.betTypeId == betTypeId && (value.productId == tdId || value.betTypeId == tdId)) {
priceNotFound = false;
var td = createTd(null, null, null, "", null),
a = document.createElement('a');
a.innerHTML = value.value.toFixed(2);
// adding new rows after onclick to anchore tag
(function(i, index){
a.onclick=function() {
var betInfo = createMapForBet(selections[i],index);
$(this).toggleClass("highlight");
increaseBetSlipCount();
addToSingleBetSlip(betInfo);
}
})(i,index)
td.appendChild(a);
document.getElementById(selectionRowId).appendChild(td);
}
});
if (priceNotFound) document.getElementById(selectionRowId).appendChild(createTd(null, null, null, '-',null));
};
});
});
}
Adding new rows
function addToSingleBetSlip(betInfo) {
// Show bet slip
$('.betslip_details.gray').show();
// Make Single tab active
selectSingleBetSlip();
// Create div for the bet
var div = createSingleBetDiv(betInfo);
$("#bets").append(div);
// Increase single bet counter
updateBetSinglesCounter();
}
This is the JS code where I am generating the views for the dynamic rows added after clicking the anchor tag in my first function
function createSingleBetDiv(betInfo) {
var id = betInfo.betType + '_' + betInfo.productId + '_' + betInfo.mpid,
div = createDiv(id + '_div', 'singleBet', 'bet gray2'),
a = createA(null, null, null, 'right orange'),
leftDiv = createDiv(null, null, 'left'),
closeDiv = createDiv(null, null, 'icon_shut_bet'),
singleBetNumber = ++document.getElementsByName('singleBet').length;
// Info abt the bet
$(leftDiv).append('<p class="title"><b><span class="bet_no">' + singleBetNumber + '</span>. ' + betInfo['horseName'] + '</b></p>');
var raceInfo = "";
$("#raceInfo").contents().filter(function () {
if (this.nodeType === 3) raceInfo = $(this).text() + ', ' + betInfo['betTypeName'] + ' (' + betInfo['value'].toFixed(2) + ')';
});
$(leftDiv).append('<p class="title">' + raceInfo + '</p>');
// Closing btn
(function(id) {
a.onclick=function() {
removeSingleBet(id + '_div');
};
})(id);
$(a).append(closeDiv);
// Creating input field
$(leftDiv).append('<p class="supermid"><input id="' + id + '_input\" type="text"></p>');
// Creating WIN / PLACE checkbox selection
$(leftDiv).append('<p><input id="' + id + '_checkbox\" type="checkbox"><b>' + winPlace + '</b></p>');
// Append left part
$(div).append(leftDiv);
// Append right part
$(div).append(a);
// Appending div with data
$.data(div, 'mapForBet', betInfo);
return div;
}
Function to delete the individual rows
function removeSingleBet(id) {
// Remove the div
removeElement(id);
// Decrease the betslip counter
decreaseBetSlipCount();
// Decrease bet singles counter
updateBetSinglesCounter();
}
function removeElement(id) {
var element = document.getElementById(id);
element.parentNode.removeChild(element);
}
It's not the most elegant solution, but it should get you started.
I tried keeping it in the same format as your code where applicable:
http://jsfiddle.net/L5wmz/
ul{
min-height: 100px;
width: 250px;
border: 1px solid lightGrey;
}
<ul id="bets">
<li id="bet_one">one</li>
<li id="bet_two">two</li>
</ul>
$(document).ready(function(){
var bets = $("#bets li");
var slips = $("#slips");
bets.bind("click", function(){
var that = $(this);
try{
that.data("slipData");
}catch(err){
that.data("slipData",null);
}
if(that.data("slipData") == null){
var slip = createSlip({slipdata:"data"+that.attr("id")});
slip.bind("click", function(){
that.data("slipData",null);
$(this).remove()
});
that.data("slipData",slip);
slips.append(slip);
}
else{
slips.find(that.data("slipData")).remove();
that.data("slipData",null);
}
console.log(that.data("slipData"));
});
});
function createSlip(data){
var item = $(document.createElement("li")).append("slip: "+data.slipdata);
return item;
}
am trying to use javascript for custom styled select boxes from www.gerrendesign.com/entry_images/selectboxdemo.zip
and as I have plenty entries inside one of select box I need to make but am stuck in creation of scrolling function.
As this select boxes are compatible with almost all older and new browsers. I need only suggestion or solution how to add scroll in this linked/attached files above - if select box is populated with plenty of entries (example cities, states, or exchange rates...)
Am stuck here...
Thanks for your cooperation
Ivan
THIS IS CODE:
$(document).ready(function(){
// first locate all of the select tags on the page and hide them
$("select.changeMe").css('display','none');
//now, for each select box, run this function
$("select.changeMe").each(function(){
var curSel = $(this);
// get the CSS width from the original select box
var gddWidth = $(curSel).css('width');
var gddWidthL = gddWidth.slice(0,-2);
var gddWidth2 = gddWidthL - 28;
var gddWidth3 = gddWidthL - 16;
// build the new div structure
var gddTop = '<div style="width:' + gddWidthL + 'px" class="selectME" tabindex="0"><div class="cornerstop"><div><div></div></div></div><div class="middle"><div><div><div>';
//get the default selected option
var whatSelected = $(curSel).children('option:selected').text();
//write the default
var gddFirst = '<div class="first"><span class="selectME gselected" style="width:'+ gddWidth2 + 'px;">'+ whatSelected +'</span><span id="arrowImg"></span><div class="clears"></div></div><ul class="selectME">';
// create a new array of div options from the original's options
var addItems = new Array();
$(curSel).children('option').each( function() {
var text = $(this).text();
var selVal = $(this).attr('value');
var before = '<li style="width:' + gddWidthL + 'px;"><a href="#" rel="' + selVal + '" tabindex="0" style="width:' + gddWidth3 + 'px;">';
var after = '</a></li>';
addItems.push(before + text + after);
});
//hide the default from the list of options
var removeFirst = addItems.shift();
// create the end of the div selectbox and close everything off
var gddBottom ='</ul></div></div></div></div><div class="cornersbottom"><div><div></div></div></div></div>'
//write everything after each selectbox
var GDD = gddTop + gddFirst + addItems.join('') + gddBottom;
$(curSel).after(GDD);
//this var selects the div select box directly after each of the origials
var nGDD = $(curSel).next('div.selectME');
$(nGDD).find('li:first').addClass("first");
$(nGDD).find('li:last').addClass('last');
//handle the on click functions - push results back to old text box
$(nGDD).click( function(e) {
var myTarA = $(e.target).attr('rel');
var myTarT = $(e.target).text();
var myTar = $(e.target);
//if closed, then open
if( $(nGDD).find('li').css('display') == 'none')
{
//this next line closes any other selectboxes that might be open
$('div.selectME').find('li').css('display','none');
$(nGDD).find('li').css('display','block');
//if user clicks off of the div select box, then shut the whole thing down
$(document.window || 'body').click( function(f) {
var myTar2 = $(f.target);
if (myTar2 !== nGDD) {$(nGDD).find('li').css('display','none');}
});
return false;
}
else
{
if (myTarA == null){
$(nGDD).find('li').css('display','none');
return false;
}
else {
//set the value of the old select box
$(curSel).val(myTarA);
//set the text of the new one
$(nGDD).find('span.gselected').text(myTarT);
$(nGDD).find('li').css('display','none');
return false;
}
}
//handle the tab index functions
}).focus( function(e) {
$(nGDD).find('li:first').addClass('currentDD');
$(nGDD).find('li:last').addClass('lastDD');
function checkKey(e){
//on keypress handle functions
function moveDown() {
var current = $(nGDD).find('.currentDD:first');
var next = $(nGDD).find('.currentDD').next();
if ($(current).is('.lastDD')){
return false;
} else {
$(next).addClass('currentDD');
$(current).removeClass('currentDD');
}
}
function moveUp() {
var current = $(nGDD).find('.currentDD:first');
var prev = $(nGDD).find('.currentDD').prev();
if ($(current).is('.first')){
return false;
} else {
$(prev).addClass('currentDD');
$(current).removeClass('currentDD');
}
}
var curText = $(nGDD).find('.currentDD:first').text();
var curVal = $(nGDD).find('.currentDD:first a').attr('rel');
switch (e.keyCode) {
case 40:
$(curSel).val(curVal);
$(nGDD).find('span.gselected').text(curText);
moveDown();
return false;
break;
case 38:
$(curSel).val(curVal);
$(nGDD).find('span.gselected').text(curText);
moveUp();
return false;
break;
case 13:
$(nGDD).find('li').css('display','none');
}
}
$(document).keydown(checkKey);
}).blur( function() {
$(document).unbind('keydown');
});
});
});
You could render the list inside a div, that has either a fixed height or a max-height (depending on your cross-browser requirements). Presuming the default scroll bar is ok...
If structure is something in the direction of
<div class="select_data_container">
<ul class="select_rows">
<li>row1</li>
<li>row2</li>
</ul>
</div>
CSS-example could be
.select_data_container {overflow-y: auto; height: 200px;}
.select_rows {display:block;}