Why can't I check this checkbox? (CodeIgniter/jQuery UI) - javascript

I have a user interface with a list of product images and checkboxes next to each image to 'veto' the product. Suddenly today the checkboxes stopped working, they can't be checked. They were working fine a week ago and no changes have been made to the site recently.
The site was built using CodeIgniter 3.1.2, jQuery UI, Bootstrap and PHP version 7.1.33. A sample of the checkbox code is below. Since everything was working fine last week and no changes have been made recently I have to assume that something it was relying on became unsupported, but I'm not sure where to start troubleshooting. Any suggestions would be appreciated!
Do you see any red flags in the below code that might cause a checkbox to stop working?
<div class="item">
<div class="item__header">
<label class="checkbox">
<input class="largerCheckbox" type="checkbox" id="previewVeto"
disabled onclick="veto('')">
<span class="checkbox__text-checked">Package Vetoed</span>
<span class="checkbox__text-regular">Veto this Package</span>
<span class="checkbox__view">
<svg class="svg-icon-ok"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-icon-ok"></use></svg>
</span>
</label>
</div><!-- item__header -->
<div class="item__image">
<img src=https://i.etsystatic.com/12743396/r/il/b2ae42/2900536844/il_fullxfull.2900536844_jx1j.jpg alt="">
</div><!-- item__image -->
<div class="item__info">
<h3 class="item__title"> </h3>
<p class="item__person">CUSTOMER NAME</p>
</div><!-- item_info -->
</div><!-- item -->
</div><!-- col-12 -->
<div class="col-12 col-md-4">
<div class="item">
<div class="item__header">
<label class="checkbox">
<input class="largerCheckbox" type="checkbox" id="previewVeto"
disabled onclick="veto('')">
<span class="checkbox__text-checked">Package Vetoed</span>
<span class="checkbox__text-regular">Veto this Package</span>
<span class="checkbox__view">
<svg class="svg-icon-ok"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-icon-ok"></use></svg>
</span>
</label>
</div><!-- item__header -->
<div class="item__image">
<img src=https://i.etsystatic.com/6792430/r/il/be915c/2355877777/il_fullxfull.2355877777_4x72.jpg alt="">
</div><!-- item__image -->
<div class="item__info">
<h3 class="item__title"> </h3>
<p class="item__person">CUSTOMER NAME</p>
</div><!-- item_info -->
</div><!-- item -->
</div><!-- col-12 -->
<div class="col-12 col-md-4">
<div class="item">
<div class="item__header">
<label class="checkbox">
<input class="largerCheckbox" type="checkbox" id="previewVeto"
disabled onclick="veto('')">
<span class="checkbox__text-checked">Package Vetoed</span>
<span class="checkbox__text-regular">Veto this Package</span>
<span class="checkbox__view">
<svg class="svg-icon-ok"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-icon-ok"></use></svg>
</span>
</label>
</div><!-- item__header -->
<div class="item__image">
<img src=https://i.etsystatic.com/17379511/r/il/ecc770/1845923487/il_fullxfull.1845923487_j02p.jpg alt="">
</div><!-- item__image -->
<div class="item__info">
<h3 class="item__title"> </h3>
<p class="item__person">CUSTOMER NAME</p>
</div>
This is the javascript called by the page...
//run when document is loaded
//uses jquery syntax
$(document).ready(function(){
$('#cssmenu > ul > li:has(ul)').addClass("has-sub");
$('#cssmenu > ul > li > a').click(function() {
var checkElement = $(this).next();
$('#cssmenu li').removeClass('active');
$(this).closest('li').addClass('active');
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
$(this).closest('li').removeClass('active');
checkElement.slideUp('normal');
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#cssmenu ul ul:visible').slideUp('normal');
checkElement.slideDown('normal');
}
if (checkElement.is('ul')) {
return false;
} else {
return true;
}
});
});
//run when mobile-menu-toggle is clicked to show menu
$('.mobile-menu-toggle').click(function(event) {
$(this).toggleClass('active');
$('.mobile-menu').toggleClass('shown');
});
var href = "#positive";
var touched = false;
$('.switcher').click(function(event) {
console.log(touched);
event.preventDefault();
var href_prev = href;
href = $(event.target).attr('href');
if(href_prev != href){
jQuery(href_prev).addClass('hidden');
jQuery(href).removeClass('hidden');
}
if(href === '#negative'){
$(this).addClass('negative');
}else{
$(this).removeClass('negative');
}
var value = jQuery('.switcher').hasClass('negative') ? 'N' : 'P';
jQuery('.keyword-form [name="type"]').val(value);
});
$('.switcher').on('touchend', function(event) {
event.preventDefault();
$(this).toggleClass('negative');
var href_prev = href;
href = href == '#negative' ? '#positive' : '#negative';
if(href_prev != href){
jQuery(href_prev).addClass('hidden');
jQuery(href).removeClass('hidden');
}
var value = jQuery('.switcher').hasClass('negative') ? 'N' : 'P';
jQuery('.keyword-form [name="type"]').val(value);
});
$(".collapse-trigger").click(function(event) {
$(this).toggleClass('expanded').siblings('.collapse-target').slideToggle();
});
$("[name^=country]").on('change', function(){
var checked = $(this).closest('.item-preview').find(':checked');
$(this).closest('.item-preview').siblings('.section-comment').find('.val').text(checked.length);
});
//run when element with id [name=color] is clicked
$("[name^=color]").on('change', function(){
var checked = $(this).closest('.item-preview').find(':checked');
var text = [];
checked.each(function(index, el) {
text.push($(el).data('name'));
});
$(this).closest('.item-preview').siblings('.section-comment').text(text.join(', ') );
});
$('.keyword-edit .keyword').click(function(event) {
event.preventDefault();
var keywords = $(this).closest('.item-preview ').find('.keyword');
$(this).closest('.item-preview').siblings('.section-comment').find('.val').text(keywords.length - 1 ) ;
$(this).remove();
});
var Cookie =
{
set: function(name, value, days)
{
var domain, domainParts, date, expires, host;
if (days)
{
date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
expires = "; expires="+date.toGMTString();
}
else
{
expires = "";
}
host = location.host;
if (host.split('.').length === 1)
{
// no "." in a domain - it's localhost or something similar
document.cookie = name+"="+value+expires+"; path=/";
}
else
{
// Remember the cookie on all subdomains.
//
// Start with trying to set cookie to the top domain.
// (example: if user is on foo.com, try to set
// cookie to domain ".com")
//
// If the cookie will not be set, it means ".com"
// is a top level domain and we need to
// set the cookie to ".foo.com"
domainParts = host.split('.');
domainParts.shift();
domain = '.'+domainParts.join('.');
document.cookie = name+"="+value+expires+"; path=/; domain="+domain;
// check if cookie was successfuly set to the given domain
// (otherwise it was a Top-Level Domain)
if (Cookie.get(name) == null || Cookie.get(name) != value)
{
// append "." to current domain
domain = '.'+host;
document.cookie = name+"="+value+expires+"; path=/; domain="+domain;
}
}
},
get: function(name)
{
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i=0; i < ca.length; i++)
{
var c = ca[i];
while (c.charAt(0)==' ')
{
c = c.substring(1,c.length);
}
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
},
erase: function(name)
{
Cookie.set(name, '', -1);
}
};
$(document).ready(function(){
$( function() {
var value = parseInt($( ".slide-hungry .inner").data('value'));
$( ".slide-hungry .inner").slider({
min: 0,
max: 5,
step: 1,
range: true,
values: [0, value],
slide: function( event, ui ) {
switch (ui.values[ 1 ] ){
case 0:
jQuery('.slide-target').text('Not Hugry');
break;
case 1:
jQuery('.slide-target').text('A Bit Hugry');
break;
case 2:
jQuery('.slide-target').text('Very Hugry');
break;
case 3:
jQuery('.slide-target').text('Very Very Hugry');
break;
case 4:
jQuery('.slide-target').text('Duying of Huger');
break;
case 5:
jQuery('.slide-target').text('ARGH!!!');
break;
}
}
});
} );
})

Related

Rails 6 - Uncaught ReferenceError: MStepper is not defined

Please help me with this.
What's wrong? Thanks!
I had the same problem and it fixed adding this js part which I extracted from here
$(document).ready(function() {
$('.stepper').activateStepper();
})
function validateStepOne() {
// Extract the checked checkboxes from the first step
if($('.step').first().find('input[type="checkbox"]:checked').length)
return true;
return false;
}
function validateStepThree() {
var validation = true;
if($('.step:nth-child(3) input[type="text"]').val().indexOf('materialize') === -1)
validation = false;
if($('.step:nth-child(3) input[type="checkbox"]:checked').length === 0)
validation = false;
return validation;
}
function nextStepThreeHandler() {
if(validateStepThree())
$('.stepper').nextStep();
else {
$('.stepper ').destroyFeedback(); $('.stepper').getStep($('.stepper').getActiveStep()).addClass('wrong');
}
}
/* Materializecss Stepper - By Kinark 2016
// https://github.com/Kinark/Materialize-stepper
// JS v2.1.3
*/
var validation = $.isFunction($.fn.valid) ? 1 : 0;
$.fn.isValid = function() {
if(validation){
return this.valid();
} else {
return true;
}
};
if (validation) {
$.validator.setDefaults({
errorClass: 'invalid',
validClass: "valid",
errorPlacement: function (error, element) {
if(element.is(':radio') || element.is(':checkbox')) {
error.insertBefore($(element).parent());
} else {
error.insertAfter(element); // default error placement.
// element.closest('label').data('error', error);
// element.next().attr('data-error', error);
}
},
success: function (element) {
if(!$(element).closest('li').find('label.invalid:not(:empty)').length){
$(element).closest('li').removeClass('wrong');
}
}
});
// When parallel stepper is defined we need to consider invisible and
// hidden fields
if($('.stepper.parallel').length) $.validator.setDefaults({ignore:''});
}
$.fn.getActiveStep = function() {
var active = this.find('.step.active');
return $(this.children('.step:visible')).index($(active))+1;
};
$.fn.activateStep = function(callback) {
if($(this).hasClass('step')) return;
var stepper = $(this).closest('ul.stepper');
stepper.find('>li').removeAttr("data-last");
if(window.innerWidth < 993 || !stepper.hasClass('horizontal')) {
$(this).addClass("step").stop().slideDown(400, function(){
$(this).css({'height':'auto', 'margin-bottom': '','display': 'inherit'});if(callback)callback();
stepper.find('>li.step').last().attr('data-last', 'true');
});
} else {
$(this).addClass("step").stop().css({'width':'0%','display': 'inherit'}).animate({width:'100%'}, 400, function(){
$(this).css({'height':'auto', 'margin-bottom': '','display': 'inherit'});if(callback)callback();
stepper.find('>li.step').last().attr('data-last', 'true');
});
}
};
$.fn.deactivateStep = function(callback) {
if(!$(this).hasClass('step')) return;
var stepper = $(this).closest('ul.stepper');
stepper.find('>li').removeAttr("data-last");
if(window.innerWidth < 993 || !stepper.hasClass('horizontal')) {
$(this).stop().css({'transition':'none', '-webkit-transition':'margin-bottom none'}).slideUp(400, function(){
$(this).removeClass("step").css({'height':'auto','margin-bottom':'','transition':'margin-bottom .4s','-webkit-transition':'margin-bottom .4s'});
if(callback)callback();
stepper.find('>li').removeAttr("data-last");
stepper.find('>li.step').last().attr('data-last', 'true');
});
} else {
$(this).stop().animate({width:'0%'}, 400, function(){
$(this).removeClass("step").hide().css({'height':'auto', 'margin-bottom': '','display': 'none', 'width': ''});
if(callback)callback();
stepper.find('>li.step').last().attr('data-last', 'true');
});
}
};
$.fn.showError = function(error) {
if(validation) {
var name = this.attr('name');
var form = this.closest('form');
var obj = {};
obj[name] = error;
form.validate().showErrors(obj);
this.closest('li').addClass('wrong');
} else {
this.removeClass('valid').addClass('invalid');
this.next().attr('data-error', error);
}
};
$.fn.activateFeedback = function() {
var active = this.find('.step.active:not(.feedbacking)').addClass('feedbacking').find('.step-content');
active.prepend('<div class="wait-feedback"> <div class="preloader-wrapper active"> <div class="spinner-layer spinner-blue"> <div class="circle-clipper left"> <div class="circle"></div></div><div class="gap-patch"> <div class="circle"></div></div><div class="circle-clipper right"> <div class="circle"></div></div></div><div class="spinner-layer spinner-red"> <div class="circle-clipper left"> <div class="circle"></div></div><div class="gap-patch"> <div class="circle"></div></div><div class="circle-clipper right"> <div class="circle"></div></div></div><div class="spinner-layer spinner-yellow"> <div class="circle-clipper left"> <div class="circle"></div></div><div class="gap-patch"> <div class="circle"></div></div><div class="circle-clipper right"> <div class="circle"></div></div></div><div class="spinner-layer spinner-green"> <div class="circle-clipper left"> <div class="circle"></div></div><div class="gap-patch"> <div class="circle"></div></div><div class="circle-clipper right"> <div class="circle"></div></div></div></div></div>');
};
$.fn.destroyFeedback = function() {
var active = this.find('.step.active.feedbacking');
if(active) {
active.removeClass('feedbacking');
active.find('.wait-feedback').remove();
}
return true;
};
$.fn.resetStepper = function(step) {
if(!step) step = 1;
var form = $(this).closest('form');
$(form)[0].reset();
Materialize.updateTextFields();
return $(this).openStep(step);
};
$.fn.submitStepper = function(step) {
var form = this.closest('form');
if(form.isValid()) {
form.submit();
}
};
$.fn.nextStep = function(callback, activefb, e) {
var stepper = this;
var settings = $(stepper).data('settings');
var form = this.closest('form');
var active = this.find('.step.active');
var next = $(this.children('.step:visible')).index($(active))+2;
var feedback = active.find('.next-step').length > 1 ? (e ? $(e.target).data("feedback") : undefined) : active.find('.next-step').data("feedback");
// If the stepper is parallel, we want to validate the input of the current active step. Not all elements.
if((settings.parallel && $(active).validateStep()) || (!settings.parallel && form.isValid())) {
if(feedback && activefb) {
if(settings.showFeedbackLoader) stepper.activateFeedback();
return window[feedback].call();
}
active.removeClass('wrong').addClass('done');
this.openStep(next, callback);
return this.trigger('nextstep');
} else {
return active.removeClass('done').addClass('wrong');
}
};
$.fn.prevStep = function(callback) {
var active = this.find('.step.active');
if(active.hasClass('feedbacking')) return;
var prev = $(this.children('.step:visible')).index($(active));
active.removeClass('wrong');
this.openStep(prev, callback);
return this.trigger('prevstep');
};
$.fn.openStep = function(step, callback) {
var settings = $(this).closest('ul.stepper').data('settings');
var $this = this;
var step_num = step - 1;
step = this.find('.step:visible:eq('+step_num+')');
if(step.hasClass('active')) return;
var active = this.find('.step.active');
var next;
var prev_active = next = $(this.children('.step:visible')).index($(active));
var order = step_num > prev_active ? 1 : 0;
if(active.hasClass('feedbacking')) $this.destroyFeedback();
active.closeAction(order);
step.openAction(order, function(){
if(settings.autoFocusInput) step.find('input:enabled:visible:first').focus();
$this.trigger('stepchange').trigger('step'+(step_num+1));
if(step.data('event')) $this.trigger(step.data('event'));
if(callback)callback();
});
};
$.fn.closeAction = function(order, callback) {
var closable = this.removeClass('active').find('.step-content');
if(window.innerWidth < 993 || !this.closest('ul').hasClass('horizontal')) {
closable.stop().slideUp(300,"easeOutQuad", callback);
} else {
if(order==1) {
closable.animate({left: '-100%'},function(){closable.css({display: 'none', left: '0%'}, callback);});
} else {
closable.animate({left: '100%'},function(){closable.css({display: 'none', left: '0%'}, callback);});
}
}
};
$.fn.openAction = function(order, callback) {
var openable = this.removeClass('done').addClass('active').find('.step-content');
if(window.innerWidth < 993 || !this.closest('ul').hasClass('horizontal')) {
openable.slideDown(300,"easeOutQuad", callback);
} else {
if(order==1) {
openable.css({left: '100%', display: 'block'}).animate({left: '0%'}, callback);
} else {
openable.css({left: '-100%', display: 'block'}).animate({left: '0%'}, callback);
}
}
};
$.fn.activateStepper = function(options) {
var settings = $.extend({
linearStepsNavigation: true,
autoFocusInput: true,
showFeedbackLoader: true,
autoFormCreation: true,
parallel: false // By default we don't assume the stepper is parallel
}, options);
$(document).on('click', function(e){
if(!$(e.target).parents(".stepper").length){
$('.stepper.focused').removeClass('focused');
}
});
$(this).each(function(){
var $stepper = $(this);
if(!$stepper.parents("form").length && settings.autoFormCreation) {
var method = $stepper.data('method');
var action = $stepper.data('action');
var method = (method ? method : "GET");
action = (action ? action : "?");
$stepper.wrap( '<form action="'+action+'" method="'+method+'"></form>' );
}
$stepper.data('settings', {linearStepsNavigation: settings.linearStepsNavigation,autoFocusInput: settings.autoFocusInput,showFeedbackLoader:settings.showFeedbackLoader, parallel:$stepper.hasClass('parallel')});
$stepper.find('li.step.active').openAction(1);
$stepper.find('>li').removeAttr("data-last");
$stepper.find('>li.step').last().attr('data-last', 'true');
$stepper.on("click", '.step:not(.active)', function () {
var object = $($stepper.children('.step:visible')).index($(this));
if($stepper.data('settings').parallel && validation) { // Invoke parallel stepper behaviour
$(this).addClass('temp-active');
$stepper.validatePreviousSteps()
$stepper.openStep(object + 1);
$(this).removeClass('temp-active');
} else if(!$stepper.hasClass('linear')) {
$stepper.openStep(object+1);
} else if(settings.linearStepsNavigation) {
var active = $stepper.find('.step.active');
if($($stepper.children('.step:visible')).index($(active))+1 == object) {
$stepper.nextStep(undefined, true, undefined);
} else if ($($stepper.children('.step:visible')).index($(active))-1 == object) {
$stepper.prevStep(undefined);
}
}
}).on("click", '.next-step', function(e) {
e.preventDefault();
$stepper.nextStep(undefined, true, e);
}).on("click", '.previous-step', function(e) {
e.preventDefault();
$stepper.prevStep(undefined);
}).on("click", "button:submit:not(.next-step, .previous-step)", function (e) {
e.preventDefault();
feedback = e ? $(e.target).data("feedback") : undefined;
var form = $stepper.closest('form');
if(form.isValid()) {
if(feedback) {
stepper.activateFeedback();
return window[feedback].call();
}
form.submit();
}
}).on("click", function () {
$('.stepper.focused').removeClass('focused');
$(this).addClass('focused');
});
});
};
/**
* Return the step element on given index.
*
* #param step, index of the step to be returned
* #returns {*}, the step requested
*/
$.fn.getStep = function(step) {
var settings = $(this).closest('ul.stepper').data('settings');
var $this = this;
var step_num = step - 1;
step = this.find('.step:visible:eq('+step_num+')');
return step;
};
/**
* Run validation over all previous steps from the steps this
* function is called on.
*/
$.fn.validatePreviousSteps = function() {
var active = $(this).find('.step.temp-active');
var index = $(this.children('.step')).index($(active));
// We assume that the validator is set to ignore nothing.
$(this.children('.step')).each(function(i) {
if (i >= index) {
$(this).removeClass('wrong done');
} else {
$(this).validateStep();
}
});
};
/**
* Validate the step that this function is called on.
*/
$.fn.validateStep = function() {
var stepper = this.closest('ul.stepper');
var form = this.closest('form');
var step = $(this);
// Retrieve the custom validator for that step if exists.
var validator = step.find('.next-step').data("validator");
if(this.validateStepInput()) { // If initial base validation succeeded go on
if(validator) { // If a custom validator is given also call that validator
if (window[validator].call()) {
step.removeClass('wrong').addClass('done');
return true;
}
else {
step.removeClass('done').addClass('wrong');
return false;
}
}
step.removeClass('wrong').addClass('done');
return true;
} else {
step.removeClass('done').addClass('wrong');
return false;
}
};
/**
* Uses the validation variable set by the stepper constructor
* to run standard validation on the current step.
* #returns {boolean}
*/
$.fn.validateStepInput = function() {
var valid = true;
if (validation) {
// Find all input fields dat need validation in current step.
$(this).find('input.validate').each(function() {
if (!$(this).valid()) {
valid = false;
return false;
}
});
}
return valid;
};
<head>
<!-- Materializecss compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/materialize-stepper#2.1.4/materialize-stepper.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!-- Materializecss compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<!-- jQueryValidation Plugin -->
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js"></script>
</head>
<body class="container">
<form>
<ul class="stepper parallel horizontal">
<li class="step active">
<div class="step-title waves-effect waves-dark">Step 1</div>
<div class="step-content">
<div class="row">
<div class='form-field col s12'>
<p>Step with custom validation</p>
<span>For this step we want to have a custom validator that checks if if at least one checkbox is checked</span>
<p>
<input name='checkbox1' type="checkbox" class="filled-in"
id="checkbox1" value='checkbox1'/>
<label for="checkbox1">Checkbox 1</label>
</p>
<p>
<input name='checkbox2' type="checkbox" class="filled-in"
id="checkbox2" value='checkbox2'/>
<label for="checkbox2">Checkbox 2</label>
</p>
</div>
</div>
<div class="step-actions">
<button class="waves-effect waves-dark btn next-step" data-validator="validateStepOne">CONTINUE</button>
<button class="waves-effect waves-dark btn-flat previous-step">BACK</button>
</div>
</div>
</li>
<li class="step">
<div class="step-title waves-effect waves-dark">Step 2</div>
<div class="step-content">
<div class="row">
<div class='form-field col s12'>
<p>Step with no custom validation</p>
<div class="input-field col s12">
<input type="text" name="textfield" class="required validate"/>
<label for="textfield">Random textfield</label>
</div>
</div>
</div>
<div class="step-actions">
<button class="waves-effect waves-dark btn next-step">CONTINUE</button>
<button class="waves-effect waves-dark btn-flat previous-step">BACK</button>
</div>
</div>
</li>
<li class="step">
<div class="step-title waves-effect waves-dark">Step 3</div>
<div class="step-content">
<div class="row">
<div class='form-field'>
<p>Step with feedback and custom validation</p>
<p>
<input name='checkbox3' type="checkbox" class="filled-in"
id="checkbox3" value='checkbox3'/>
<label for="checkbox3">Checkbox 3</label>
</p>
<p>
<input name='checkbox4' type="checkbox" class="filled-in"
id="checkbox4" value='checkbox4'/>
<label for="checkbox4">Checkbox 4</label>
</p>
</div>
<div class="input-field col s12">
<input type="text" id="textfield2" name="textfield2" class="required validate"/>
<label for="textfield2">This field should contain the word materialize</label>
</div>
</div>
<div class="step-actions">
<button class="waves-effect waves-dark btn next-step" data-feedback="nextStepThreeHandler" data-validator="validateStepThree">SUBMIT</button>
<button class="waves-effect waves-dark btn-flat previous-step">BACK</button>
</div>
</div>
</li>
<li class="step">
<div class="step-title waves-effect waves-dark">Step 4</div>
<div class="step-content">
<div class="row">
<div class='form-field'>
<p>Submit phase</p>
</div>
</div>
<div class="step-actions">
<input type="submit" class="waves-effect waves-dark btn next-step" value="SUBMIT"/>
<button class="waves-effect waves-dark btn-flat previous-step">BACK</button>
</div>
</div>
</li>
</ul>
</form>
</body>

Pass Selected Data from one page to other page in html

I am using form to pass the data from one page to other page.If i click the apply button will go to other page, i want to display the corresponding title of the career(i.e Java Developer) in the next page.I tried to achieve this with the help of javascript.
career.html:
<form action="job portal.html" method="get" target="_blank">
<div class="section-header text-center wow zoomIn">
<h2>Current Oppournities</h2>
</div><br /><br />
<div class="row">
<div class="col-lg-6">
<div class="box wow fadeInLeft">
<h4 class="title" id="career-title" name="career-title"><i class="fa fa-java"></i> <b>Java Developer</b></h4>
<hr />
<div class="carrer-opt">
<h5 name="test">Software Developer</h5>
<p>
Should have join immediate joiner .
</p>
</div>
<div class="col-lg-3 cta-btn-container">
<input type="submit" id="apply" value="Apply Now" onClick="testJS()" />
</div>
</div>
</div>
</form>
js:
<script src="js/main.js"></script>
<script>
function testJS() {
var b = document.getElementById('career-title').value,
url = 'job portal.html?career-title=' + encodeURIComponent(b);
document.location.href = url;
}
</script>
job portal.html:
<h1 id="here" style="color:black"></h1>
js:
<script>
window.onload = function () {
var url = document.location.href,
params = url.split('?')[1].split('&'),
data = {}, tmp;
for (var i = 0, l = params.length; i < l; i++) {
tmp = params[i].split('=');
data[tmp[0]] = tmp[1];
}
document.getElementById('here').innerHTML = data.career-title;
}
</script>
How to acheive this.Anyone please help.
You need to use HTML5 local storage for these kind of problems.
here is solution for your problem.
<script>
function testJS() {
var b = document.getElementById('career-title').value;
var titleText = localStorage.setItem('title', b);
var url = 'job portal.html';
document.location.href = url;
}
</script>
after setting title value get value by referencing id 'title' in your prtal.html script and set value for the element.
<script>
window.onload = function () {
var valueText = localStorage.getItem('title');
document.getElementById('here').innerHTML = valueText;
}
</script>

Few object in one place

I have one selector: #circle-timer and I have few objects which target is this selector. Is any options to display only the selected item?
Example:
function timer(time){
var target = $('.value');
var counter = time;
var id = setInterval(function() {
counter--;
if(counter < 0) {
clearInterval(id);
} else {
target.text(counter);
}
}, 1000);
}
var p = timer(60);
var c = timer(33)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="timer" id="round">
<div id="circle-timer" class="circle-timer">
<div class="time">
<p class="value">00</p>
</div>
</div>
</div>
<ul>
<li>show first timer</li>
<li>show second timer</li>
</ul>
But is showing all in one time. I want show selected timer (when click show first timer), not all.
Maybe this would help
jsFiddle
$('li').click(function(){
$(".value2").toggle();
$(".value1").toggle();
})
function timer(time,element){
var target = $('p.'+element);
var counter = time;
var id = setInterval(function() {
counter--;
if(counter < 0) {
clearInterval(id);
} else {
target.text(counter);
}
}, 1000);
}
var p = timer(60,'value1');
var c = timer(33,'value2')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="timer" id="round">
<div id="circle-timer" class="circle-timer">
<div class="time">
<p class="value1">00</p>
<p class="value2" style='display:none'>00</p>
</div>
</div>
</div>
<ul>
<li class="value1">show second timer</li>
<li class="value2" style='display:none'>show first timer</li>
</ul>

jquery: read inside each div, span and input

I'm creating a project in ASP.NET MVC and jQuery. When a user click on addSentence button, I want to duplicate a div called copythis with all events and insert it in another div called myform.
in copythis I have two div: in the first there is a span called sentence where I insert the text in the input in the second the user can add more then one field with different text.
When the user clicks the button called save I want to read all copythis in myform and create a structure to send to a webapi.
I have a problem is the javascript because I can read properly each div.
$("#addSentence").on("click", function (event) {
if ($("#inputSentence").val() == "")
alert("Sentence must have a value");
else {
event.preventDefault();
var theContainer = $("#copythis");
if (theContainer != null) {
var clonedSection = $(theContainer).clone(true);
if (clonedSection != null) {
$(clonedSection).find("#sentence")
.text($("#inputSentence").val());
$(clonedSection).appendTo("#myform");
}
}
}
});
$("#save").on("click", function (event) {
$("#myform #copythis").children().each(function (index, element) {
var elm = $(this);
var sentence = elm.find('.row span#sentence').val();
if (sentence != '') {
console.log('Sentence: ' + sentence);
$("input").children().each(function (m, l) {
var txt = $(this).val();
if (txt != '') {
console.log('Example: ' + txt);
}
});
}
});
});
function makeRepeater(sectionsSelector, addClass, removeClass, AYSMsg) {
$(sectionsSelector + " " + addClass + "," + sectionsSelector +
" " + removeClass).on("click", function (event) {
// Avoiding the link to do the default behavior.
event.preventDefault();
// Get the container to be removed/cloned
var theContainer = $(this).parents(sectionsSelector);
if ($(this).is(addClass)) {
// Cloning the container with events
var clonedSection = $(theContainer).clone(true);
// And appending it just after the current container
$(clonedSection).insertAfter(theContainer);
} else {
// If the user confirm the "Are You Sure" message
// we can remove the current container
if (confirm(AYSMsg)) {
// Making fade out, hide and remove element a sequence
// to provide a nice UX when removing element.
$(theContainer).fadeOut('normal',
function () {
$(this).hide('fast',
function () { $(this).remove(); }
);
}
);
}
}
});
}
makeRepeater(
'.my-repeated-section-form', /* The container selector */
'.addform', /* The add action selector */
'.removeform', /* The remove action selector */
'Are you sure you want to remove this section?' /* The AYS message. */
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="row">
<div class="row">
<div class="col-lg-10">
<div class="input-group">
<input id="inputSentence" type="text"
class="form-control" placeholder="Sentence...">
<span class="input-group-btn">
<button class="btn btn-secondary"
type="button" id="addSentence">Add</button>
</span>
</div>
</div>
</div>
<div class="col-lg-12">
<div style="display: inline;">
<div class="group-of-repeated-sections" style="display: none;">
<div class="my-repeated-section">
<div id="copythis">
<div class="row">
<div class="col-lg-10">
<span id="sentence"></span>
</div>
<div class="col-lg-2">
<span>
+
-
</span>
</div>
</div>
<div class="my-repeated-section-form">
<div class="row">
<div class="col-lg-12">
<input type="text" />
<span>
+
-
</span>
</div>
</div>
</div>
<div style="height:25px;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="myform"></div>
<button id="save">Save</button>

Bootstrap carousel navigation is not working

a while ago i was working on bootstrap carousel, which has represents properties thumbnails based on offices and houses respectively.
entire function goes fine but the carousel navigation is not working.
Here is HTML code
<div class="container-fluid">
<div class="row-fluid">
<div class="span12" id="work_hider">
<div class="page-header">
<h2 class="pull-left"><?php if($this->lang->line('work') != '') { echo stripslashes($this->lang->line('work')); } else echo "Work"; ?></h2>
<h3 class="pull-right" id="geolocate_work"></h3>
<script>
$.getJSON("https://freegeoip.net/json/", function(data) {
var country = data.country_name;
var city = data.city;
$("#geolocate_work").html("<a href='property?city="+city+"'><?php if($this->lang->line('see_all') != '') { echo stripslashes($this->lang->line('see_all')); } else echo "See All"; ?></a>");
jQuery.ajax({
type:'POST',
url:'<?php echo base_url("site/landing/get_work_places"); ?>',
data:{ city_name:city},
dataType: 'json',
success:function(data)
{
var ParsedObject = JSON.stringify(data);
var json = $.parseJSON(ParsedObject);
if (json=="")
{
$('#work_hider').hide();
}else
{
$.each(json, function(key, data)
{
// All the variables from the database containing the post data.
var product_id=data.product_id;
var product_name=data.product_title;
var product_image=data.product_image;
var work_price = data.price_perhour;
var work_address = data.address;
$("#work-carousel").append('<li class="span3"><div class="thumbnail"><img src="'+product_image+'" alt=""></div><div class="caption"><h2>'+work_price+'</h2></div><div class="caption"><h4>'+product_name+'</h4> <p>'+work_address+'</p></div></li>');
});
for (i = 0; i <= 1; i++) {
$('.span3').slice(i * 4, (i + 1) * 4).wrapAll('<div class="item"><ul id="work_property">');
}
}
}
});
});
</script>
</div>
<div class="work_carousel slide" id="myCarousel">
<div class="carousel-inner" id="work-carousel">
<div class="item active" style="height: 100% !important;">
<ul class="thumbnails" id="work_property">
</ul>
</div>
</div>
<div class="control-box" style="margin-bottom: 2em;">
<a data-slide="prev" href="#myCarousel" class="carousel-control left">‹</a>
<a data-slide="next" href="#myCarousel" class="carousel-control right">›</a>
</div>
</div>
</div>
</div>
</div>
Here is my carousel JS
<script>
var totalItems = $('.item').length;
var currentIndex = $('div.active').index() + 1;
$('.num').html(''+currentIndex+'/'+totalItems+'');
$('.work_carousel').carousel({
interval: 2000
});
$('.work_carousel').on('slide.bs.carousel', function() {
currentIndex = $('div.active').index() + 1;
if(currentIndex >= 2){
$('#work_property').attr("id")="newid";
}
});
</script>
I've searched around a lot but i can't fix it. Does someone has a suggestion for me? Thanks in advance!

Categories