I understand that the data-repeater-create="" must be inside the id="left_repeater", otherwise it will not function as a create button. Is there a way that the button will function outside the id="left_repeater" or id="right_repeater"?
My goal is when I click add left button, it will only create the left input and vise versa for the add right button. Both of the button is at the very bottom.
JS fiddle link to see the codes
$('#left_repeater').repeater({
show: function() {
$(this).slideDown();
},
});
$('#right_repeater').repeater({
show: function() {
$(this).slideDown();
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.min.js"></script>
<div id="left_repeater">
<div data-repeater-list="left_items">
<div data-repeater-item>
<div class="row">
<div class="col-6">
<input type="text" name="name" class="form-control form-control-sm m-input" placeholder="left">
</div>
<div class="col-6">
</div>
</div>
</div>
</div>
<!-- <div data-repeater-create="" class="btn btn-sm btn-success">
<span><i class="la la-plus"></i><span>Add</span></span>
</div> -->
</div>
<div id="right_repeater">
<div data-repeater-list="right_items">
<div data-repeater-item>
<div class="row">
<div class="col-6">
</div>
<div class="col-6">
<input type="text" name="name" class="form-control form-control-sm m-input" placeholder="right">
</div>
</div>
</div>
</div>
<div data-repeater-create="" class="btn btn-sm btn-success">
<span><i class="la la-plus"></i><span>Add</span></span>
</div>
</div>
<div class="row">
<div class="col-6 text-center">
<div data-repeater-create="" class="btn btn-sm btn-success">
<span><i class="la la-plus"></i><span>Add Left</span></span>
</div>
</div>
<div class="col-6 text-center">
<div data-repeater-create="" class="btn btn-sm btn-success">
<span><i class="la la-plus"></i><span>Add Right</span></span>
</div>
</div>
</div>
Place the #left_repeater inside div container.
<div class="container">
<div id="left_repeater">
.....
</div>
</div>
add CSS style to this
.container {
display: flex;
}
https://jsfiddle.net/y1bpot5n//
Related
I have a button name Assign agent button when i click on button a loader will appear for 3 second(with timeInterval function) and then after 3 second a modal will appear.
The issue is when i click on assign button the loader appear and then disappear after 3 second but on second time when I click on assign button the loader appear but suddenly disappear in 1 or 2 second.
Why the loader is not taking 3 second same as first click?
<button type="button" value="edit" name="edit-btn" class="spin-modal clear-cookie"
onclick="spiner();"> Assign
Agent</button> <div class="loader-spiner-outer class-none-view">
<div class="loader-box">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div> <div class="modal" id="myModal" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Assign Lead</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<form action="#" class="custom-add-form" method="post" style="padding:22px 0px 5px 0px;">
<div class="col-12">
<div class="form-group custom-form-group" style="width: 100%;">
<label for="name">Assign Agent</label>
<select class="form-control" id="sel1">
<option>First</option>
<option>Second</option>
<option>Third</option>
<option>Four</option>
</select>
</div>
<div class="form-group custom-form-group" style="width: 100%;">
<label for="name">Other</label>
<input type="text" class="form-control" id="name">
</div>
<div class="col-12 no-pad-left-right">
<div class="form-group text-right">
<div class="submit-m-div">
<input type="submit" value="Submit" name="submit" class="add-cm-btn no-margin-top-btm">
<span class="skip-icon" style="bottom: 0px;"><i class="fas fa-angle-double-right"></i></span>
</div>
</div>
</div>
</div>
</form>
<!-- Modal footer -->
<!-- <div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div> -->
</div>
</div>
</div>
javascript/jquery code
function spiner() {
$(".loader-spiner-outer.class-none-view").removeClass("class-none-view");
setInterval(function() {
$(".loader-spiner-outer").addClass("class-none-view");
}, 800);
setTimeout(function() {
$("#myModal").show();
}, 900);
};
$(".close").click(function() {
$("#myModal").hide();
});
Try this:
$(".close").click(function ()
{
$("#myModal").hide();
});
function spiner()
{
$(".loader-spiner-outer").addClass("class-none-view");
setTimeout(function ()
{
$(".loader-spiner-outer").removeClass("class-none-view");
setTimeout(function ()
{
$("#myModal").show();
}, 3000);
}, 3000);
}
.loader-spiner-outer
{
display: none;
}
.loader-spiner-outer.class-none-view
{
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" value="edit" name="edit-btn" class="spin-modal clear-cookie"
onclick="spiner();"> Assign
Agent</button> <div class="loader-spiner-outer">
<div class="loader-box">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div> <div class="modal" id="myModal" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Assign Lead</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<form action="#" class="custom-add-form" method="post" style="padding:22px 0px 5px 0px;">
<div class="col-12">
<div class="form-group custom-form-group" style="width: 100%;">
<label for="name">Assign Agent</label>
<select class="form-control" id="sel1">
<option>First</option>
<option>Second</option>
<option>Third</option>
<option>Four</option>
</select>
</div>
<div class="form-group custom-form-group" style="width: 100%;">
<label for="name">Other</label>
<input type="text" class="form-control" id="name">
</div>
<div class="col-12 no-pad-left-right">
<div class="form-group text-right">
<div class="submit-m-div">
<input type="submit" value="Submit" name="submit" class="add-cm-btn no-margin-top-btm">
<span class="skip-icon" style="bottom: 0px;"><i class="fas fa-angle-double-right"></i></span>
</div>
</div>
</div>
</div>
</form>
<!-- Modal footer -->
<!-- <div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div> -->
</div>
</div>
</div>
And don't use setInterval(() => {}), because it is a repeating timer.
Use setTimeout(() => {}), because this will only run once.
'setInterval' vs 'setTimeout'
I am working on a normal login page. I would like to add different icons around the username and password text box.I have added a picture below. I am working on core UI template with Angular 4.
I could not able to get the sequence right.
<div class="app flex-row align-items-center">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="card-group mb-0">
<div class="card p-4">
<div class="card-block">
<h1>Login</h1>
<p class="text-muted">Sign In to your account</p>
<form (submit)="loginUser($event)">
<div class="input-group mb-3">
<span class="input-group-addon"><i class="icon-user"></i></span>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group mb-4">
<span class="input-group-addon"><i class="icon-lock"></i></span>
<input type="password" class="form-control" placeholder="Password">
</div>
<div class="row">
<div class="col-lg-6">
<button type="submit" class="btn btn-primary px-4">Login</button>
</div>
<div class="col-lg-6 text-right">
<button type="button" class="btn btn-link px-0">Forgot password?</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
If you just want to change the icon, then choose your icon here:
http://fontawesome.io/3.2.1/icons/
and just change the class
<span class="input-group-addon"> <i class="icon-user"> </i></span> //Here
<span class="input-group-addon"> <i class="icon-lock"> </i></span> // andHere
I am having some trouble in clearing file contents when file upload is done via Ajax.Below is my modal popup html code,
<div class="modal-header bg-blue">
<div class="desktop_view">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"id="myModalLabel">Upload Document</h4>
</div>
<div class="mobile_view">
<button type="button" class="btn btn-default btn-xs pull-right bold" data-dismiss="modal">Close</button>
<h4 class="modal-title"id="myModalLabel">Upload Document</h4>
</div>
</div>
<div class="modal-body">
<div class="upload-container">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="row">
<div class="form-group fileinput-button">
<label class="col-lg-6 col-md-6 col-sm-6 col-xs-12 control-label">Select Your Document:</label>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"><input type="file" multiple name="file[]" accept="image/*" id="files" ></div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="preview-container">
<div class="col-lg-12">
<div class="clearfix"></div>
<div id="dvPreview" class="preview-container"></div>
</div>
</div>
</div>
<div class="modal-footer">
<input type="submit" value="Upload" class = "btn btn-info" id= "save" />
<button type="button" class="btn btn-danger myclose" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
After submitting the form,the previous image content still exists.I have tried below methods.
$('#myModalone').find('form')[0].reset();
$(function () {
// Delegating to `document` just in case.
$(document).on("hidden.bs.modal", "#myModalone", function () {
//$('.modal-body').find('input').val('');
$(this).removeData('bs.modal');
});
});
It doesn't works.Please provide a solution.
Give an id to the form and call form reset function as:
$("#formId")[0].reset()
// or
$("#formId").get(0).reset()
Also you can use js as:
document.getElementById('formId').reset();
To reset a div:
$('#div_id input[type="text"]').val('');
$('#div_id input[type="file"]').val('');
Find the working fiddle here:
http://jsfiddle.net/Safoora/Car52/174/
I have this element that uses bootstrap collapse.
When I click on "header" of this élément, it opens and a scrollbar appears but I like to appears being at the bottom.
I try many solution from stackoverflow, but none seem to work.
I can do this ?
<div class="row">
<div class="col-sm-12">
<div id="panel-profil" class="panel panel-info">
<div id="panel-heading-profil" class="panel-heading text-center">
<a id="link-heading-profil" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"
aria-expanded="false" aria-controls="collapseTwo" onclick="changeArrowProfil()">
<div class="row">
<div id="triangleUn" class="col-sm-1">
<span id="triangle1" class="glyphicon glyphicon-triangle-bottom"></span>
</div>
<div class="col-sm-10">
<span class="fa fa-truck fa-1"></span> Profil du véhicule
</div>
<div id="triangleDeux" class="col-sm-1">
<span id="triangle2" class="glyphicon glyphicon-triangle-bottom"></span>
</div>
</div>
</a>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div id="panel-body-profil" class="panel-body">
<label class="text-info" for="sel1">Longueur du véhicule :</label>
<form class="form-horizontal">
<div class="form-group form-group-sm">
<div class="col-sm-1"><img src="../img/B10a.png" height="35" width="35" ></img></div>
<input class="col-sm-2 control-label inputConstraint"
for="formGroupInputSmall" type="text" value="6.00 m" autocomplete="off" id="value_length" readonly/>
<div class="col-sm-8 sliderConstraint"
for="formGroupInputSmall">
<input type="range" min="0" step="1" max="3" value="0"
id="value_length_slide"
onchange="changeValue('length')" />
</div>
</div>
</form>
...
...
</div>
<div class="row" id="valid-param">
<div class="col-sm-12">
<button id="btn-valid-param" onclick="modifierProfileSaisi();" type="submit" class="btn btn-success btn-sm btn-block" > Valider les paramètres</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
If your using an onClick event, then within that onClick, write this line of code,
window.scrollTo(0,document.body.scrollHeight);
This will scroll you to the bottom of the page.
I am trying to add a delete button next to an input.
My current code:
<form role="form" method="post" id="form">
<div class="form-group">
<div class="col-sm-9 ">
<span>Názov položky</span>
<input type="text" class="form-control">
</div>
<div class="col-sm-3 ">
<span>Cena</span>
<input type="text" class="form-control">
<button class="btn btn-danger btn-md"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
</div>
</div>
<p></p>
<button class="add_field_button btn btn-success btn-md"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button>
</form>
Generated output:
The red button isn't on the right side of the last input.
Maybe one of these will work. You can create some margin inside of a input-group so the button isn't touching the input or use the grid.
See working example Snippets.
.input-group .input-group-btn.input-space {
padding-left: 15px;
}
.input-group .input-group-btn.input-space .btn-input {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
div.input-group .form-control.input-control {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="container">
<h3 class="well">Custom Input Group</h3>
<div class="row">
<form role="form" method="post" id="form">
<div class="col-sm-9 ">
<div class="form-group">
<label>Názov položky</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-sm-3 ">
<div class="form-group">
<label>Cena</label>
<div class="input-group">
<input type="text" class="form-control input-control"> <span class="input-group-btn input-space">
<button class="btn btn-danger btn-md btn-input"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
</button>
</span>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<button class="add_field_button btn btn-success btn-md"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>
</div>
</div>
</form>
</div>
</div>
<hr>
<div class="container">
<h3 class="well">Grid</h3>
<div class="row">
<form role="form" method="post" id="form">
<div class="col-sm-7">
<div class="form-group">
<label>Názov položky</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>Cena</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-sm-2">
<label>Odstrániť</label>
<div class="form-group">
<button class="btn btn-danger btn-md"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
</button>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<button class="add_field_button btn btn-success btn-md"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>
</div>
</div>
</form>
</div>
</div>
You must use the input-group as explained on the help page.
Here the relevant code
<span>Cena</span>
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button class="btn btn-danger btn-md"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
</div>
</div>
This might break on mobile, but it looks good in a CodePen
<form role="form" method="post" id="form">
<div class="row">
<div class="col-sm-8">
<span>Názov položky</span>
<input type="text" class="form-control">
</div>
<div class="col-sm-3">
<span>Cena</span>
<input type="text" class="form-control">
</div>
<div class="col-sm-1">
<br/>
<button class="btn btn-danger btn-md">
<span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
</button>
</div>
</div>
<p></p>
<div>
<button class="add_field_button btn btn-success btn-md">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>
</div>
</form>