I am looking for a treeview format for my ipfire backup system.
where the users need to select the folders for update. like in the image-->
Exemple
the server script is CGI Perl but i can implement simple HTML and CSS or very simple JS.
I need the parent folders if checked to check automaticly the content
I don't know your HTML but if it fits this
<div class="tree">
<input type="checkbox" /> 1.
<div>
<input type="checkbox" /> 1.1.
<div>
<input type="checkbox" /> 1.1.1.
</div>
</div>
</div>
and if you use the jQuery library you could do it like that
$(document).ready(function() {
$('.tree input[type="checkbox"]').on('change', function() {
checkParent($(this));
});
function checkParent(element) {
if (element.prop('checked')) {
var parent = element.parent().parent().find('> input[type="checkbox"]');
if (parent.length) {
parent.prop('checked', true);
checkParent(parent);
}
}
}
});
$(document).ready(function() {
$('.tree input[type="checkbox"]').on('change', function() {
checkParent($(this));
});
function checkParent(element) {
if (element.prop('checked')) {
var parent = element.parent().parent().find('> input[type="checkbox"]');
if (parent.length) {
parent.prop('checked', true);
checkParent(parent);
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="tree">
<input type="checkbox" /> 1.
<div>
<input type="checkbox" /> 1.1.
<div>
<input type="checkbox" /> 1.1.1.
</div>
</div>
</div>
Related
I am trying to display other jsp content on radio click which is in another jsp through Ajax call.
Here is my radio button list code which is in order.jsp file
<tr>
<td>
<h2>Payment Method</h2>
<div id="demo" class="payment-method">
<ul class=list-unstyled has-border-rigth">
<li>
<input type="radio" id="creditcardpayment" name="PaymentBrands" value=" Credit Card">
<label for="creditcardpayment">Credit Card</label>
</li>
<li>
<input type="radio" id="paypalpayment" name="PaymentBrands" value=" PayPal">
<label for="paypalpayment">PayPal</label>
</li>
<li>
<input type="radio" id="purchaseorderpayment" name="PaymentBrands" value="Purchase Order">
<label for="purchaseorderpayment">Purchase Order</label>
</li>
</ul>
<div id="result"></div>
</div>
</td>
</tr>
Ajax code which is in order.jsp(same jsp) I tried three ways:
$(document).ready(function () {
$("input[type='radio']").click(function() {
var PaymentBrands = $(this).val();
alert(PaymentBrands);
$.ajax({
method:"POST",
url:"modusTest.jsp",
data: $('#result').serialize(),
dataType: "html",
success:function(response){
$('#demo').text(response);
}
});
$(document).ready(function () {
$("input[type='radio']").click(function() {
var PaymentBrands = $(this).val();
alert(PaymentBrands);
$.ajax({
url:"modusTest.jsp",
method:"POST",
data:{PaymentBrands:PaymentBrands},
success:function(data){
$('#result').html(data);
}
});
$(document).ready(function () {
var radioVal;
$("input[type='radio']").click(function() {
radioVal = $("[name=radio]:checked").val();
alert(radioVal);
$.post("/webapp/ecommerce/jsp/modusTest.jsp", {"processId": radioVal })
});
});
Below is modusTest.jsp
<html>
<head>
We are testing payment integration.
</head>
<body>
<p> Hello, how are you?</p>
</body>
</html>
Required solution as soon as possible.
This might be the solution to what you want to do.
Your main HTML file
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<tr>
<td>
<h2>Payment Method</h2>
<div id="demo" class="payment-method">
<ul class=list-unstyled has-border-rigth">
<li>
<input type="radio" id="creditcardpayment" name="PaymentBrands" value="Credit Card">
<label for="creditcardpayment">Credit Card</label>
</li>
<li>
<input type="radio" id="paypalpayment" name="PaymentBrands" value="PayPal">
<label for="paypalpayment">PayPal</label>
</li>
<li>
<input type="radio" id="purchaseorderpayment" name="PaymentBrands" value="Purchase Order">
<label for="purchaseorderpayment">Purchase Order</label>
</li>
</ul>
<div id="result"></div>
</div>
</td>
</tr>
<script>
$(document).ready(function () {
var radioVal;
$("input[type='radio']").click(function () {
//use $(this).val() instead of checked $("[name=radio]:checked").val();
//this capture accurate & instant value. for more info read more about dom update
radioVal = $(this).val();
alert(radioVal);
$.ajax({
url: "somefile.php",
method: "POST",
data: { PaymentBrands: $(this).val() },
success: function (data) {
$('#result').html(data);
}
});
});
});
</script>
Your jsp file will look the same
<html>
<head>
We are testing payment integration.
</head>
<body>
<p> Hello, how are you?</p>
</body>
</html>
Yes, there are many posts that are kind of similar but not like mine I guess. After struggling for a while I'm not able to come up with a solution. I need help!
I have 4 different criteria:
Resident/Single, Resident/Family, Non-Resident/Single, Non-Resident/Family
For example: if Resident and Single are checked then show that div. The rest goes the same way.
<fieldset>
<ol id="membership">
<li>
<input type="radio" name="resident" value="Resident" checked="checked" /> Resident
<input type="radio" name="resident" value="Non-Resident" /> Non-Resident
</li>
<li>
<input type="radio" name="single" value="Single" checked="checked" /> Single
<input type="radio" name="single" value="Family" /> Family
</li>
</ol>
<div style="display: none;">
<div>Resident/Single</div>
<div>Resident/Family</div>
<div>Non-Resident/Single</div>
<div>Non-Resident/Family</div>
</div>
</fieldset>
This is as far as I was able to go.
$(document).ready(function() {
$('input').change(function() {
if ($('input[value="Resident"]').is(':checked') && $('input[value="Single"]').is(':checked')) {
$('div').show();
} else if ($('input[value="Resident"]').is(':checked') && $('input[value="Family"]').is(':checked')) {
$('div').show();
} else if ($('input[value="Non-Resident"]').is(':checked') && $('input[value="Single"]').is(':checked')) {
$('div').show();
} else if ($('input[value="Non-Resident"]').is(':checked') && $('input[value="Family"]').is(':checked')) {
$('div').show();
} else {
$('div').hide();
}
});
});
This is my repl: https://repl.it/#labanino/Show-based-on-selection#script.js
Instead of using ifs statement to show/hide divs you can simply get the checked values of radio button then just loop through your divs and compare if the .text() is equal to radio values show that divs only .
Demo Code :
$(document).ready(function() {
$(".category div:eq(0)").show() //show 1st div
$('input').change(function() {
//get radio values
var value = $("input[name='resident']:checked").val();
var value1 = $("input[name='single']:checked").val();
console.log(value + "/" + value1)
$(".category div").hide(); //hide all divs
var divss = value + "/" + value1;
//loop through divs
$(".category div").each(function() {
if ($(this).text() === divss) {
$(this).show() //show that div
}
})
});
})
.category > div {
display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset>
<ol id="membership">
<li>
<input type="radio" name="resident" value="Resident" checked="checked" /> Resident
<input type="radio" name="resident" value="Non-Resident" /> Non-Resident
</li>
<li>
<input type="radio" name="single" value="Single" checked="checked" /> Single
<input type="radio" name="single" value="Family" /> Family
</li>
</ol>
<div class="category">
<div>Resident/Single</div>
<div>Resident/Family</div>
<div>Non-Resident/Single</div>
<div>Non-Resident/Family</div>
</div>
</fieldset>
Try selecting the divs by name or value and show them while hiding the others.
Check this repl -
https://repl.it/#DavidThomas12/Show-based-on-selection
I believe it fits your use case.
HTML
<body class="music">
<pre class="chord">Chords</pre>
<div class="lyric" style="display: none">Lyrics</div>
<input class="c" id="event" type="checkbox" checked data-toggle="toggle" data-size="small" width="5px" data-onstyle="info" data-offstyle="info" data-on="Chords" data-off="Lyrics">
</body>
Please help me with jquery code. By default only pre tag contents are displayed. When checkbox is checked I need to display only the contents of div tag. When box is unchecked, I want the reverse to be happened i.e. only show contents of pre tag.
So,continuing the comment earlier, here's the code that you may want to use.
$(function(){
var chord = $(".chord");
var lyric = $(".lyric");
var event = $("#event");
event.on("change", function(){
chord.toggle();
lyric.toggle();
});
})
by leveraging the data attributes in your HTML, a better way to do it is to update pre content based on checkbox selection
$(function(){
var selection = $(".selection");
var event = $("#event");
event.on("change", function(){
var content = $(this).is(":checked") ? $(this).data("on") : $(this).data("off");
selection.text(content);
});
})
<script
src="https://code.jquery.com/jquery-3.5.1.min.js">
</script>
<body class="music">
<pre class="selection">Chords</pre>
<input
class="c"
id="event"
type="checkbox"
checked data-toggle="toggle"
data-size="small"
width="5px"
data-onstyle="info"
data-offstyle="info"
data-on="Chords"
data-off="Lyrics" />
</body>
HTML:
<div id="content1">Content 1</div>
<div id="content2">Content 2</div>
<input type="checkbox" checked id="checkbox">
CSS:
#content2 {
display: none;
}
JS (using JQuery):
$(function() {
$('#checkbox').on('click', function() {
if (!$(this).is(':checked')) {
$('#content1').hide();
$('#content2').show();
} else {
$('#content1').show();
$('#content2').hide();
}
});
});
If you have any questions, ask.
you just need to toggle the displays. I replaced the pre tag with a div for spacing
function jsdisplay(){
$(".chord").eq(0).toggle();
$(".lyric").eq(0).toggle();
}
pre{
margin:0;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body class="music">
<pre class="chord">Chords</pre>
<div class="lyric" style="display: none">Lyrics</div>
<input class="c" id="event" type="checkbox" checked data-toggle="toggle" data-size="small" width="5px" data-onstyle="info" data-offstyle="info" data-on="Chords" data-off="Lyrics" onchange="jsdisplay()">
</body>
I have a problem using a switch when it is in a set of switches generated by ng-repeat. My objective is to trigger an alert when each individual checkbox is clicked.
For example, when I click the switch to enable it should alert "1", and off should alert "0", but when I click the switch to enable it alerts "1" and when i click the other switch to enable it alerts "0".
Here is a plunkr with a sample single switch
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="switchdemo">
<h1>On Off switch using Angular JS</h1>
<div ng-controller="DemoController" ng-init="init()">
<div class="well">
<label class="switch" >
<input type="checkbox" ng-model="Token" ng-change="changeStatus();">
<span class="slider round"></span>
</label>
</div>
<div class="well">
<label class="switch" >
<input type="checkbox" ng-model="Token" ng-change="changeStatus();">
<span class="slider round"></span>
</label></div>
<pre>{{ status }}</pre>
</div>
</body>
</html>
AngularJS:
angular.module('switchdemo', []).controller('DemoController', function($scope){
$scope.init = function(){
$scope.status = 1;
}
$scope.changeStatus = function(){
$scope.status = !$scope.status;
if($scope.status==1) {
$scope.status=1;
alert($scope.status);
}
else
{
$scope.status=0;
alert($scope.status);
}
}
})
In html
<div ng-controller="MyCtrl">
<input type="checkbox" ng-model="Token" ng-change="changeStatus(Token);">
</div>
in javascript and you will got true/false into alert refer link http://jsfiddle.net/ADukg/18311/
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.changeStatus = function(data){
alert(data)
};
}
So here's what i'm trying to do.
A standalone html page with some jquery in it.
The jquery code has a form (with elemts to capture Marquee text, speed, color, repeat, etc)
With all the form elements captured above, i need to create a scrolling text marquee.
What i'm not able to figure out:
How can the HTMl element (div class="scroller") be updated whenever there is a change in any of the form field values ?
Below is what i have so far :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Simple jQuery scrolling function by Max Vergelli</title>
<style type="text/css">
div.scroller, #fast_scroller{
position:relative;
height:24px;
width:500px;
display:block;
overflow:hidden;
border:#CCCCCC 1px solid;
}
div.scrollingtext{
position:absolute;
white-space:nowrap;
font-family:'Trebuchet MS',Arial;
font-size:18px;
font-weight:bold;
color:#000000;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://jquerymobile.com/test/css/themes/default/jquery.mobile.css" />
<link rel="stylesheet" href="http://jquerymobile.com/test/docs/_assets/css/jqm-docs.css"/>
<script src="http://jquerymobile.com/test/js/jquery.js"></script>
<script src="http://jquerymobile.com/test/docs/_assets/js/jqm-docs.js"></script>
<script src="http://jquerymobile.com/test/js/jquery.mobile.docs.js"></script>
<script src="http://www.vegabit.com/jquery_scroller/jquery.Scroller-1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//this is the useful function to scroll a text inside an element...
function startScrolling(scroller_obj, velocity, start_from){
//bind animation to the children inside the scroller element
scroller_obj.children().bind('marquee', function(event,c) {
//text to scroll
var ob = $(this);
//scroller width
var sw = parseInt(ob.parent().width());
//text width
var tw = parseInt(ob.width());
//text left position relative to the offset parent
var tl = parseInt(ob.position().left);
//velocity converted to calculate duration
var v = velocity>0 && velocity<100 ? (100-velocity)*100 : 5000;
//same velocity for different text's length in relation with duration
var dr = (v*tw/sw)+v;
//is it scrolling from right or left?
switch(start_from){
case 'right':
//is it the first time?
if(typeof c == 'undefined'){
//if yes, start from the absolute right
ob.css({ left: sw });
sw = -tw;
}else{
//else calculate destination position
sw = tl - (tw + sw);
};
break;
default:
if(typeof c == 'undefined'){
//start from the absolute left
ob.css({ left: -tw });
}else{
//else calculate destination position
sw += tl + tw;
};
}
//attach animation to scroller element and start it by a trigger
ob.animate( {left:sw},
{ duration:dr,
easing:'linear',
complete:function(){ob.trigger('marquee');},
step:function(){
//check if scroller limits are reached
if(start_from == 'right'){
if(parseInt(ob.position().left) < -parseInt(ob.width())){
//we need to stop and restart animation
ob.stop();
ob.trigger('marquee');
};
}else{
if(parseInt(ob.position().left) > parseInt(ob.parent().width())){
ob.stop();
ob.trigger('marquee');
};
};
}
});
}).trigger('marquee');
//pause scrolling animation on mouse over
scroller_obj.mouseover(function(){
$(this).children().stop();
});
//resume scrolling animation on mouse out
scroller_obj.mouseout(function(){
$(this).children().trigger('marquee',['resume']);
});
};
//the main app starts here...
//change the cursor type for each scroller
$('.scroller').css("cursor","pointer");
//settings to pass to function
var scroller = $('.scroller'); // element(s) to scroll
var scrolling_velocity = 40; // 1-99
var scrolling_from = 'right'; // 'right' or 'left'
//call the function and start to scroll..
startScrolling( scroller, scrolling_velocity, scrolling_from );
//create a new scroller but it starts from left...
$('#fast_scroller').css("cursor","pointer");
startScrolling( $('#fast_scroller'), 75, 'left');
});
</script>
</head>
<body>
<br />
<br />
<div data-role="header" data-theme="f">
<h1>Banner Free*</h1>
</div><!-- /header -->
<div data-role="content">
<form action="#" method="get">
<div data-role="fieldcontain">
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="It was nice to meet you :) !!"</input>
</div>
<div data-role="fieldcontain">
<label for="slider2">Repeat:</label>
<select name="slider2" id="slider2" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="slider">Text Speed:</label>
<input type="range" name="slider" id="slider" value="50" min="0" max="100" data-highlight="true" />
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Font styling:</legend>
<input type="checkbox" name="checkbox-6" id="checkbox-6" class="custom" />
<label for="checkbox-6">b</label>
<input type="checkbox" name="checkbox-7" id="checkbox-7" class="custom" />
<label for="checkbox-7"><em>i</em></label>
<input type="checkbox" name="checkbox-8" id="checkbox-8" class="custom" />
<label for="checkbox-8">u</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Color:</legend>
<input type="radio" name="radio-choice-b" id="radio-choice-c" value="on" checked="checked" />
<label for="radio-choice-c">Color1</label>
<input type="radio" name="radio-choice-b" id="radio-choice-d" value="off" />
<label for="radio-choice-d">Color2</label>
<input type="radio" name="radio-choice-b" id="radio-choice-e" value="other" />
<label for="radio-choice-e">Color3</label>
</fieldset>
</div>
<div class="ui-body ui-body-b">
<fieldset class="ui-grid-a">
<div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div>
<div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div>
</fieldset>
</div>
</form>
</div><!-- /content -->
<div class="scroller">
<div class="scrollingtext">
this is a simple scrolling text!
</div>
</div>
<div id="fast_scroller">
<div class="scrollingtext">
this is faster!
</div>
</div>
</body>
</html>
Call this when the submit button is pressed:
$('form').find(':input').each(function(){
$(this).on('change',function(){
// Manipulate the marquee in here
if($(this).val()=='b') {
$('.marquee').css('font-weight','bold');
}
// etc...
});
});
you can use the onchange event like such:
<input onchange="updateMarquee()"/>
Here's a link for a quick tutorial:
onchange event