I have a list of checkbox, on many pages, when I move from one page to other I need to check if any checkbox is in temporary table, if it is to mark it like checked.
$(document).on('click','.page a',function (){
for (i = 0; i < 20; i++) {
var p = $(this).attr('data-page');
//console.log(p);
x = i + 20 * p;
if (keys.indexOf(x) > -1) {
$(':input[value="'+x+'"]').prop('checked',true);
console.log(x);
}
};
});
After I click on next page (where I clicked before on checkbox) I see checked checkbox_id( in this line console.log(x); ) but they are not checked when I get to the page. The result look like this.
For display I use yii2 gridview between tags Pjax.
Related
I have a navigation bar with 5 elements, drop down menu field, textarea and another text field. what i need:
to disable all navigation bar elements except Home when document be ready. then when i blur the text field remove attr disabled from them and activate again.
to separate all the values in the dropdown menu field started with 001 in additional drop down menu under the master in the navigation bar without the third part in the line (url) , append values started with 002 in additional drop down menu under CSS without (url) and 003 under javascript also without (url) .
when user click in logout option under home window close.
this is Demo:https://jsfiddle.net/ov43ebko/1/
$(document).ready(function(){
$('.css,.jscript,.jquery').attr('disabled','disabled');
$('.logOut').click(function(){
window.close();
});
// to split lines based on semicolon.
function check(){
var lines = $('.hiddenText textarea').val().split(/\n/);
var texts = [];
for (var i=0; i < lines.length; i++) {
texts.push($.trim(lines[i]));
}
for (var i=0; i < texts.length; i++) {
var removed1 = texts[i].split(';');
$(".masters").append($("<ul><li>").text(removed1[0]));
$(".css").append($("<ul><li>").text(removed1[1]));
$(".jscript").append($("<ul><li>").text(removed1[2]));
}
}
// to split dropdown menu choices to lines.
function c1() {
var resultLines = $('.filledField').find('option').size();
var textArea ="";
for (var i = 1; i <= resultLines; i++) {
var xItem = $('.filledField').find('option:nth-child(' + (i) + ')').text();
textArea += xItem ;
//code to split xItem into individual variables
}
$('.hiddenText textarea').val('');
$('.hiddenText textarea').val(textArea);
check();
}
$(".field").blur(function(){
$('.css,.jscript,.jquery').prop("disabled", false);
c1();
});
});
I hope that this is what you wanted to achieve.
1. to disable all navigation bar elements except Home when document be ready. then when i blur the text field remove attr disabled from them and activate again.
For this, have given pointer-events:none to disable li tags as they can't be disabled using attribute disabled.
$('.css,.jscript,.jquery').css('pointer-events', 'none');
And then enabled it by setting css back to all.
$(".field").blur(function() {
$('.css,.jscript,.jquery').css('pointer-events', 'all');
c1();
});
2. to separate all the values in the dropdown menu field started with 001 in additional drop down menu under the master in the navigation bar without the third part in the line (url) , append values started with 002 in additional drop down menu under CSS without (url) and 003 under javascript also without (url) .
I may have misunderstood this point but here is what I think you wanted. Have checked first parameter value and accordingly appended the second parameter value in ul under drop down menu.
if (parseInt(removed1[0]) == 1) {
$(".masters ul").append($("<li></li>").text(removed1[1]));
} else if (parseInt(removed1[0]) == 2) {
$(".css ul").append($("<li></li>").text(removed1[1]));
} else if (parseInt(removed1[0]) == 3) {
$(".jscript ul").append($("<li></li>").text(removed1[1]));
}
Please refer this fiddle.
I have a navigation bar with 5 elements, drop down menu field, textarea and another text field. what i need:
- to disable all navigation bar elements except Home. then when i blur the text field remove attr disabled from them and activate again.
- to separate all the values in the dropdown menu field started with 001 in additional drop down menu under the master in the navigation bar without the third part in the line (url) , append values started with 002 in additional drop down menu under CSS without (url) and 003 under javascript also without (url) .
- when user click in logout option under home window close.
Demo:https://jsfiddle.net/ov43ebko/1/
here are the jQuery I have implemented:
$(document).ready(function(){
$('.css,.jscript,.jquery').attr('disabled','disabled');
$('.logOut').click(function(){
window.close();
});
// to split lines based on semicolon.
function check(){
var lines = $('.hiddenText textarea').val().split(/\n/);
var texts = [];
for (var i=0; i < lines.length; i++) {
texts.push($.trim(lines[i]));
}
for (var i=0; i < texts.length; i++) {
var removed1 = texts[i].split(';');
$(".masters").append($("<ul><li>").text(removed1[0]));
$(".css").append($("<ul><li>").text(removed1[1]));
$(".jscript").append($("<ul><li>").text(removed1[2]));
}
}
// to split dropdown menu choices to lines.
function c1() {
var resultLines = $('.filledField').find('option').size();
var textArea ="";
for (var i = 1; i <= resultLines; i++) {
var xItem = $('.filledField').find('option:nth-child(' + (i) + ')').text();
textArea += xItem ;
//code to split xItem into individual variables
}
$('.hiddenText textarea').val('');
$('.hiddenText textarea').val(textArea);
check();
}
$(".field").blur(function(){
$('.css,.jscript,.jquery').prop("disabled", false);
c1();
});
});
I am needing a .li to update its text in response to the user's selections. There are three toggle switches (which currently adjust the .li with no problems), two sets of radio buttons, and an HTML5 slider. The two sets of radio buttons and slider work great together and display the resulting value in a div.
What I now need is for the value that is displayed in the div to be added to the value in the .li and adjusted whenever the user changes a radio selection or moves the slider (just like it does in the value displayed in the div).
I have this .li:
<li id="pricing" class="price"><i>$</i><span>850</span></li>
This code makes the switches change the text in .li according to the position of each switch:
(function($){
$(function(){
$('.cmn-toggle').each(function () {
$(this).change(function() {
var curr_class = '.' + $(this).attr('id');
var price = $(this).attr('data-price');
var price_box = $('.pricing-table li.price span');
$(curr_class).toggleClass('active');
if (price) {
if ($(curr_class).hasClass('active')) {
price_box.html(parseInt(price_box.html()) + parseInt(price));
}
else {
price_box.html(parseInt(price_box.html()) - parseInt(price));
}
}
});
});
});
})(jQuery);
This code takes the value of the user selections from each set of radios and the slider and displays it in the div:
function calculateTotal(){
var multi = document.getElementById('textInput').value;
var arr = document.getElementsByName('selectMedia');
var arry = document.getElementsByName('selectLength');
var tot=0;
for(var i=0; i<arr.length; i++){
if(arr[i].checked){
tot += Number(arr[i].value);
}
}
for(var i=0; i<arry.length; i++){
if(arry[i].checked){
tot += Number(arry[i].value);
}
}
document.getElementById('totalPrice').innerHTML = tot * Number(multi);
}
What do I need now to dynamically update the .li based on the value in totalPrice? If .li is 850 and totalPrice is changed to 37 then .li needs to display 887. If totalPrice is changed to 100 then the .li needs to read 950.
A jsfiddle with the rest of the code used.
I have created a table which has a checkbox to select, and pagination is also there for the table. My problem is that if I select two boxes from first page and select few more in the second, only the boxes which i selected in the last page are getting displayed and the others are not coming. Please answer me if u are aware.
Here is my code :
function getSelectedEquipmentIds() {
var equipmentIds = "";
var checkboxs = document.getElementsByName("instance");
for ( var i = 0; i < checkboxs.length; i++) {
if (checkboxs[i].checked) {
equipmentIds += checkboxs[i].value + ";";
}
}
return equipmentIds;
}
I have an angular app in this plunker.
When we click on the button, it opens a modal dialog with a list of items. 2 of these items are pre-checked based on the condition in the checkbox table input.
This is the function that pushes and splices:
$scope.toggleCheck = function (course) {
//debugger
var x = $scope.checkplanneddetails(course);
if ($scope.selectedCourses.indexOf(course) === -1){
$scope.selectedCourses.push(course);
$scope.planned += 3;
} else {
$scope.selectedCourses.splice($scope.selectedCourses.indexOf(course), 1);
$scope.planned -= 3;
}
$scope.getPercentage();
};
When a course is selected(checked) from this list, it adds 3 to the $scope.planned and also increases the progress bar accordingly. Similarly it also reduces in the same way when a checkbox is unchecked.
But this functionality happens in reverse for the items that are already checked when the modal dialog loads. Where is the code going wrong?
the problem is you're trying to hold state of checkboxes in attitional array. Instead you should only use "ng-" directives (like ng-model, or ng-checked for checkboxes)
http://plnkr.co/edit/Nm9N2zdBZL7IubMCatjz?p=preview
here is my modification:
$scope.toggleCheck = function (course) {
//debugger
if(course.checked){
$scope.planned += 3;
} else {
$scope.planned -= 3;
}
$scope.getPercentage();
};
and also i've changed "ng-clicked" for "ng-changed", because the first one is triggered before actual change of value