change visibility with attr() with click event binding - javascript

I'm trying to use the attr() method to change the visibility of the input and select siblings.
The add button works for all hidden elements, but when I want to add the hidden attribute back onto the form elements nothing happens.
$(function() {
$("button[name='add']").click(addSeries);
});
$(function() {
$("button[name='remove']").click(removeSeries);
});
function addSeries() {
$(this).siblings("input").removeAttr("hidden");
$(this).siblings("select").removeAttr("hidden");
$(this).parent().append("<button name='remove' type='button'>-</button>");
$(this).remove();
}
function removeSeries() {
console.log($(this)); //nothing logged
console.log($(this).siblings("input")); //nothing logged
console.log($(this).siblings("select")); //nothing logged
$(this).siblings("input").attr("hidden");
$(this).siblings("select").attr("hidden");
$(this).parent().append("<button name='add' type='button'>+</button>");
$(this).remove();
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src='https://code.jquery.com/jquery-3.3.1.min.js'></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js'></script>
</head>
<body>
<div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">
<input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>
<select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>
<option disabled selected>Chart Type</option>
<option value="1">Column</option>
<option value="2">Line</option>
<option value="4">Stacked Column</option>
<option value="5">Stacked Line</option>
</select>
<button name="add" type="button">+</button>
</div>
<div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">
<input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>
<select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>
<option disabled selected>Chart Type</option>
<option value="1">Column</option>
<option value="2">Line</option>
<option value="4">Stacked Column</option>
<option value="5">Stacked Line</option>
</select>
<button name="add" type="button">+</button>
</div>
<div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">
<input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>
<select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>
<option disabled selected>Chart Type</option>
<option value="1">Column</option>
<option value="2">Line</option>
<option value="4">Stacked Column</option>
<option value="5">Stacked Line</option>
</select>
<button name="add" type="button">+</button>
</div>
<div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">
<input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>
<select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>
<option disabled selected>Chart Type</option>
<option value="1">Column</option>
<option value="2">Line</option>
<option value="4">Stacked Column</option>
<option value="5">Stacked Line</option>
</select>
<button name="add" type="button">+</button>
</div>
</body>
</html>
I'm not well seasoned with javascript, so it may be something simple that I'm missing.
Any help is appreciated, thank you!

you tried to attach event to future elements and you can do that with $(document)
try this hope it help
$(function() {
$(document).on("click","button[name='add']",addSeries);
});
$(function() {
$(document).on("click","button[name='remove']",removeSeries);
});
function addSeries() {
$(this).parent().find("input,select").removeAttr("hidden");
$(this).attr("name","remove").html("-");
}
function removeSeries() {
$(this).parent().find("input,select").attr("hidden","");
$(this).attr("name","add").html("+");
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src='https://code.jquery.com/jquery-3.3.1.min.js'></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js'></script>
</head>
<body>
<div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">
<input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>
<select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>
<option disabled selected>Chart Type</option>
<option value="1">Column</option>
<option value="2">Line</option>
<option value="4">Stacked Column</option>
<option value="5">Stacked Line</option>
</select>
<button name="add" type="button">+</button>
</div>
<div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">
<input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>
<select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>
<option disabled selected>Chart Type</option>
<option value="1">Column</option>
<option value="2">Line</option>
<option value="4">Stacked Column</option>
<option value="5">Stacked Line</option>
</select>
<button name="add" type="button">+</button>
</div>
<div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">
<input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>
<select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>
<option disabled selected>Chart Type</option>
<option value="1">Column</option>
<option value="2">Line</option>
<option value="4">Stacked Column</option>
<option value="5">Stacked Line</option>
</select>
<button name="add" type="button">+</button>
</div>
<div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">
<input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>
<select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>
<option disabled selected>Chart Type</option>
<option value="1">Column</option>
<option value="2">Line</option>
<option value="4">Stacked Column</option>
<option value="5">Stacked Line</option>
</select>
<button name="add" type="button">+</button>
</div>
</body>
</html>

Related

selecting only the element in the same div with jquery

how can i selec only the element in the same div with jquery
$('.to-show').hide();
$('#offset').on('change', function() {
if ($(this).val() == "Custom") {
$(this).closest('.wrapper').children('.to-show').toggle();
} else {
$('.to-show').hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="to-click">
<td class="value">
<select id="offset" class="" name="attribute_offset" data-attribute_name="attribute_offset" data-show_option_none="yes">
<option value="">Choose an option</option>
<option value="15" selected="selected" class="attached enabled">15</option>
<option value="Custom" class="attached enabled">Custom</option>
</select> </td>
</div>
<div class="to-show">
<div class="tc-cell tc-col-auto"><button type="button" class="button tm-section-link" data-title="Custom Offset" data-sectionid="61cc25f8bfe870.59019822">Custom Offset</button></div>
</div>
</div>
<div class="wrapper">
<div class="to-click">
<td class="value">
<select id="offset" class="" name="attribute_offset" data-attribute_name="attribute_offset" data-show_option_none="yes">
<option value="">Choose an option</option>
<option value="15" selected="selected" class="attached enabled">15</option>
<option value="Custom" class="attached enabled">Custom</option>
</select> </td>
</div>
<div class="to-show">
<div class="tc-cell tc-col-auto"><button type="button" class="button tm-section-link" data-title="Custom Offset" data-sectionid="61cc25f8bfe870.59019822">Custom Offset</button></div>
</div>
</div>
So this only work with first select option
How i can make it work with the second select option what i am missing here ?
i tried also $(this).closest('.wrapper').find('.to-show').toggle();
but that did not work
thank you
Having two elements with the same id is invalid html. Switch it to use class or another attribute. But you have a second problem with $('.to-show').hide();, it is always hiding both .to-show.
$('.to-show').hide();
$('.offset').on('change', function() {
if ($(this).val() == "Custom") {
$(this).closest('.wrapper').children('.to-show').toggle();
} else {
$(this).closest('.wrapper').children('.to-show').hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="to-click">
<td class="value">
<select id="offset" class="offset" name="attribute_offset" data-attribute_name="attribute_offset" data-show_option_none="yes">
<option value="">Choose an option</option>
<option value="15" selected="selected" class="attached enabled">15</option>
<option value="Custom" class="attached enabled">Custom</option>
</select> </td>
</div>
<div class="to-show">
<div class="tc-cell tc-col-auto"><button type="button" class="button tm-section-link" data-title="Custom Offset" data-sectionid="61cc25f8bfe870.59019822">Custom Offset</button></div>
</div>
</div>
<div class="wrapper">
<div class="to-click">
<td class="value">
<select id="offset" class="offset" name="attribute_offset" data-attribute_name="attribute_offset" data-show_option_none="yes">
<option value="">Choose an option</option>
<option value="15" selected="selected" class="attached enabled">15</option>
<option value="Custom" class="attached enabled">Custom</option>
</select> </td>
</div>
<div class="to-show">
<div class="tc-cell tc-col-auto"><button type="button" class="button tm-section-link" data-title="Custom Offset" data-sectionid="61cc25f8bfe870.59019822">Custom Offset</button></div>
</div>
</div>

How can i set selected value after submit form

I have a form with month and year to select. I want to save selected values after page reload. I have project in django and i don't have any idea how do it.
<form class="form-horizontal" method="post" action="show_incomes">{% csrf_token %}{{form}}
<div class="form-group ">
<label class="control-label col-sm-5" for="miesiac">Wybierz miesiąc</label>
<div class="col-sm-3">
<select class="select form-control" id="miesiac" name="miesiac">
<option value="01" >Styczeń</option>
<option value="02" >Luty</option>
<option value="03" >Marzec</option>
<option value="04" >Kwiecień</option>
<option value="05" >Maj</option>
<option value="06" >Czerwiec</option>
<option value="07" >Lipiec</option>
<option value="08" >Sierpień</option>
<option value="09" >Wrzesień</option>
<option value="10" >Październik</option>
<option value="11" >Listopad</option>
<option value="12" >Grudzień</option>
</select>
</div>
</div>
<label class="control-label col-sm-5" for="rok">Wybierz rok</label>
<div class="col-sm-2">
<select class="select form-control" id="rok" name="rok" >
<option value="2017" >2017</option>
<option value="2018" >2018</option>
<option value="2019" >2019</option>
<option value="2020" >2020</option>
<option value="2021" >2021</option>
<option value="2022" >2022</option>
<option value="2023" >2023</option>
<option value="2024" >2024</option>
<option value="2025" >2025</option>
</select><br>
<button type="submit" class="btn btn-large btn-info">Pokaż przychody</button>
</div>
</form>
You can use local storage/ session storage to save data
Check here

Bootstrap Popover closes itself

I'm currently working on a edit view. So I decided use a popover with a form on it. I'm using bootstrap v.3.0.0. The popover appear perfectly, however it closes automatically after about 6 - 8 seconds after. Follows the code:
<a class="driveEdit" href="#">
<i class="fa fa-pencil edit-drive" style="font-size: 1.3em;" data-toggle="popover" data-placement="left" rel="tooltip"></i>
</a>
<div id="popover-content" class="hide">
<!-- MyForm -->
<form id="tab" method="POST"
action="#routes.UiscsiController.editVirtualDrive()"
data-toggle="validator">
<div class="form-group">
<label for="login">Login</label> <input
type="text" id="login" maxlength="50" name="login"
value=""
class="form-control" required/> <span
class="help-block with-errors"></span>
</div>
<div class="form-group">
<label for="jvm_memo">JVM Memo</label>
<select id="jvm_memo" name="jvm_memo" class="form-control">
<ul class="dropdown-menu" role="menu">
<option value="2">2</option>
<option value="4">4</option>
<option value="6">6</option>
<option value="8">8</option>
<option value="10" selected="true">10</option>
<option value="12">12</option>
<option value="14">14</option>
<option value="16">16</option>
<option value="18">18</option>
<option value="20">20</option>
<option value="22">22</option>
<option value="24">24</option>
<option value="26">26</option>
<option value="28">28</option>
<option value="30">30</option>
</ul>
</select>
</div>
<div class="form-group">
<button class="btn btn-primary"
onclick="this.addEventListener('click', clickStopper, false);">
<i class="fa fa-save"></i>Save
</button>
</div>
<input type="hidden" class="editDriveId" name="editDriveId" id="editDriveId" value="" />
</form>
</div>
And here my popover initiator:
<script type="text/javascript">
var hasPopover = false;
$(document).ready(function(){
$(".edit-drive").popover({
html : true,
content: function() {
return $("#popover-content").html();
}
});
</script>
Is that a commom behavior or any error on my code?
I've added the placement property set to bottom and also the missing }); from your script and it displays very well. Hope this helps you:
var hasPopover = false;
$(".edit-drive").popover({
html: true,
placement: 'bottom',
content: function() {
return $("#popover-content").html();
}
});
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<a class="driveEdit" href="#">
<i class="fa fa-pencil edit-drive" style="font-size: 1.3em;" data-toggle="popover" data-placement="left" rel="tooltip">Click me please!</i>
</a>
<div id="popover-content" class="hide">
<!-- MyForm -->
<form id="tab" method="POST" action="#routes.UiscsiController.editVirtualDrive()" data-toggle="validator">
<div class="form-group">
<label for="login">Login</label>
<input type="text" id="login" maxlength="50" name="login" value="" class="form-control" required/> <span class="help-block with-errors"></span>
</div>
<div class="form-group">
<label for="jvm_memo">JVM Memo</label>
<select id="jvm_memo" name="jvm_memo" class="form-control">
<ul class="dropdown-menu" role="menu">
<option value="2">2</option>
<option value="4">4</option>
<option value="6">6</option>
<option value="8">8</option>
<option value="10" selected="true">10</option>
<option value="12">12</option>
<option value="14">14</option>
<option value="16">16</option>
<option value="18">18</option>
<option value="20">20</option>
<option value="22">22</option>
<option value="24">24</option>
<option value="26">26</option>
<option value="28">28</option>
<option value="30">30</option>
</ul>
</select>
</div>
<div class="form-group">
<button class="btn btn-primary" onclick="this.addEventListener('click', clickStopper, false);">
<i class="fa fa-save"></i>Save
</button>
</div>
<input type="hidden" class="editDriveId" name="editDriveId" id="editDriveId" value="" />
</form>
</div>

HTML/CSS Animation on pushed down content

I have a Bootstrap row that is hidden by default. After a click on a specific button the jQuery toggle() is called to toggle the display of this row.
Is there a way to animate that button to move down? The button is positioned below the row that is toggled to show/hide.
The #advancetoggle button should move down with animation, if I use CSS's transition: transform(0,100px) the button starts to move down but it jumps due to the row above that gets the display:block and it pushes the button far way down.
Thanks :)
$("#advancetoggle").click(function(event) {
event.stopPropagation();
$('#advanced-search').toggleClass('show hide');
if ($('#adv-icon').hasClass('icon-arrowdown')){
$('#adv-icon').removeClass('icon-arrowdown');
$('#adv-icon').addClass('icon-arrowup');
} else {
$('#adv-icon').removeClass('icon-arrowup');
$('#adv-icon').addClass('icon-arrowdown');
}
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<form id="advanced-search">
<div class="col-sm-3 col-xs-12">
<label class="control-label" for="typeselect">Type</label>
<div class="custom-select fa-caret-down">
<select class="form-control" id="typeselect">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</div>
</div>
<div class="col-sm-3 col-xs-12">
<label class="control-label" for="basedin">Based in</label>
<div class="custom-select fa-caret-down">
<select class="form-control" id="basedin">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</div>
</div>
<div class="col-sm-3 col-xs-12">
<label class="control-label" for="town">Town</label>
<div class="custom-select fa-caret-down">
<select class="form-control" id="town">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</div>
</div>
<div class="col-sm-3 col-xs-12">
<div class="btn btn-red">
RESET FILTER
</div>
</div>
</form>
</div>
<div class="row">
<div class="advanced col-sm-2 col-xs-12">
<i class="icon-arrowdown" id="adv-icon"></i> <span class="advanced-text"> Advanced Search</span>
</div>
</div>
You have some issues in your code:
transition: transform(0,100px) should be transform: translate(0,100px).
To get the transition you need to add transition:all .3s ease (for example).
Insert the span .advanced-text into the link #advancetoggle
$("#advancetoggle").click(function(event) {
event.stopPropagation();
$(this).css('transform', 'translate(0,100px)');
console.log($(this));
$('#advanced-search').toggleClass('show hide');
if ($('#adv-icon').hasClass('icon-arrowdown')){
$('#adv-icon').removeClass('icon-arrowdown');
$('#adv-icon').addClass('icon-arrowup');
} else {
$('#adv-icon').removeClass('icon-arrowup');
$('#adv-icon').addClass('icon-arrowdown');
}
});
#advancetoggle {
display:inline-block;
transition:all .3s ease;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<form id="advanced-search">
<div class="col-sm-3 col-xs-12">
<label class="control-label" for="typeselect">Type</label>
<div class="custom-select fa-caret-down">
<select class="form-control" id="typeselect">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</div>
</div>
<div class="col-sm-3 col-xs-12">
<label class="control-label" for="basedin">Based in</label>
<div class="custom-select fa-caret-down">
<select class="form-control" id="basedin">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</div>
</div>
<div class="col-sm-3 col-xs-12">
<label class="control-label" for="town">Town</label>
<div class="custom-select fa-caret-down">
<select class="form-control" id="town">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</div>
</div>
<div class="col-sm-3 col-xs-12">
<div class="btn btn-red">
RESET FILTER
</div>
</div>
</form>
</div>
<div class="row">
<div class="advanced col-sm-2 col-xs-12">
<a href="#" class="glyphdown" id="advancetoggle">
<i class="icon-arrowdown" id="adv-icon"></i>
<span class="advanced-text">Advanced Search</span>
</a>
</div>
</div>
try this, I think this is what you want.hope this will help.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<style type="text/css">
.myrow{
display: none;
margin: 10px;
}
.myrowtwo{
display: none;
margin: 10px;
}
.buttonone , .buttontwo{
margin:10px;
}
</style>
<body>
<div class="btn btn-default buttonone">Press me !</div>
<div class="row myrow">
<div class="col-sm-3 col-xs-12">
<label class="control-label" for="basedin">Based in</label>
<div class="custom-select fa-caret-down">
<select class="form-control" id="basedin">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</div>
</div>
<div class="col-sm-3 col-xs-12">
<label class="control-label" for="town">Town</label>
<div class="custom-select fa-caret-down">
<select class="form-control" id="town">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</div>
</div>
</div><br>
<div class="clearfix"></div>
<div class="btn btn-primary buttontwo">Press me now!</div>
<div class="row myrowtwo">
<div class="col-sm-3 col-xs-12">
<label class="control-label" for="basedin">Based in</label>
<div class="custom-select fa-caret-down">
<select class="form-control" id="basedin">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</div>
</div>
<div class="col-sm-3 col-xs-12">
<label class="control-label" for="town">Town</label>
<div class="custom-select fa-caret-down">
<select class="form-control" id="town">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".buttonone").click(function(){
$(".myrow").toggle();
});
$(".buttontwo").click(function(){
$(".myrowtwo").toggle();
});
});
</script>
</body>
</html>
I have used online bootstrap and jquery.good luck.

How to align div content to center in following scenario?

I have a div having two divs inside as follows.
HTML code:
<div style="margin: 20px auto;" align="center">
<div style="float:left;">
<input type="button" class="myButton" value="Add"/>
<input type="button" class="myButton" value="Modify"/>
<input type="button" class="myButton" value="Delete"/>
</div>
<div>
<form id = "country_form" method="post">
<select id="country_name" name = "country_name" style = "position: relative;width:60px;" onChange="return country_change();">
<option value="">Select</option>
<option value="India">India</option>
<option value="Australia">Australia</option>
<option value="Malaysia">Malaysia</option>
<option value="UAE">U.A.E</option>
<option value="Singapore">Singapore</option>
<option value="USA">U.S.A</option>
<option value="Bangladesh">Bangladesh</option>
<option value="Sri Lanka">Sri Lanka</option>
<option value="China">China</option>
</select>
<select id="country_port" name = "country_port" style = "position: relative;margin-left:5px;width:60px;">
<option value="">Select</option>
<option value="Macau">Macau</option>
<option value="Ningbo">Ningbo</option>
<option value="Beijing">Beijing</option>
<option value="Shanghai">Shanghai</option>
<option value="Guangzhou">Guangzhou</option>
<option value="Shenzhen">Shenzhen</option>
</select>
<input type="hidden" value="yes" name="submit_value"/>
<input type="submit" class="myButton" value="Search"/>
</form>
</div>
</div>
As i am doing float left to first inner div the outer div is going to left of screen.
So how to make it center.
Please help me to make it possible
jsFiddle: DEMO
See if this helps.........
<div style="margin: 20px auto; width:80%;" align="center">
http://jsfiddle.net/XNdJw/

Categories

Resources