I'm trying to select the input element but it doesn't seem to work.
HTML:
<section id="c1">
<div class="input-group col-lg-2">
<span class="input-group-addon">
<i class="glyphicon glyphicon-map-marker"></i>
</span>
<input type="text" readonly class="form-control"/>
<span class="input-group-btn">
<button class="btn btn-default" type="button">GPS</button>
</span>
</div>
</section>
jQuery:
$("#c1").find("input");
I'm trying to select this:
<input type="text" readonly class="form-control"/>
It works fine for me :
When I use this HTML...
<section id="c1">
<div class="input-group col-lg-2">
<span class="input-group-addon">
<i class="glyphicon glyphicon-map-marker"></i>
</span>
<input type="text" readonly class="form-control"/>
<span class="input-group-btn">
<button class="btn btn-default" type="button">GPS</button>
</span>
</div>
</section>
... and this JS...
var $InputElement = $("#c1").find("input");
console.log($InputElement);
... the console returns precisely the input element you're looking for.
Well, actually, it returns a jQuery object that contains the element you're looking for.
If you want the DOM element itself instead of a jQuery object, just do this :
var InputElement = $("#c1").find("input")[0];
console.log(InputElement);
You can try it yourself in this Fiddle.
Related
Angularjs splice from an array of images for input type file always remove last element from html view -
<div class="mt-1" ng-repeat="plan in data.images.Projects track by $index">
<div class="input-group">
<span class="input-group-addon">
<input type="radio" name="images" ng-model="data.banner_image"
ng-value="$index" />
</span>
<input type="file" file-model="data.images.Projects[$index]"
class="form-control" accept="image/x-png,image/jpeg">
<span class="input-group-btn" ng-click="data.images.Projects.splice($index,1)">
<button class="btn white" type="button">
<span class="fa fa-minus-square"></span>
</button>
</span>
</div>
<div class="task-manager_block" ng-controller="ToDoCtrl">
<div class="form_block clearfix">
<form name="addToDo">
<input class="add-input" placeholder="I need to..." type="text" name="inputToDo" ng-model="formTodoText" ng-model-instant ng-minlenght ng-minlength="5" ng-maxlength="40" ng-required="true"/>
<button class="add-btn" ng-click="addTodo()" ng-disabled="! addToDo.inputToDo.$valid "><h2>Add</h2></button>
</form>
</div>
<div class="tasks_block" ng-controller="DatepickerPopupCtrl">
<div class="task_block col-md-3" ng-repeat="todo in todos">
<div class="text_block">
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
<p>{{todo.text}}</p>
</div>
</div>
</div>
</div>
How can I open a single popup that I clicked on because now all of them are instantly opened independently of what I clicked.
This happens due to all the datepickers inside ng-repeat reference the same variable to check open state.
See this.
is-open="popup1.opened"
You will have to manage this state in a separate object.
For example,
In controller declare a empty object
let datePickersStat = {};
then in your HTML, you can use anything as object key as long as it's unique.
is-open="datePickersStat[todo.id]"
Hope that helps.
i'd like to know how i can get the values from a dynamic input in Spring, a method that get the values, can someone explain me how to do that ?
This is my html and javascript input.
JSP
<div class="form-group">
<div class="input-group control-group after-add-more">
<input type="text" name="addmore[]" id="telefone" class="form-control" placeholder="Numero de telefone...">
<div class="input-group-btn">
<button class="btn btn-success add-more" type="button">
<i class="glyphicon glyphicon-plus"></i> Adicionar
</button>
</div>
</div>
<!-- Copy Fields -->
<div class="copy hide">
<div class="control-group input-group" style="margin-top: 10px">
<input type="text" name="addmore[]" id="telefone" class="form-control" placeholder="Numero de telefone...">
<div class="input-group-btn">
<button class="btn btn-danger remove" type="button">
<i class="glyphicon glyphicon-remove"></i> Remover
</button>
</div>
</div>
</div>
JAVA SCRIPT
$(document).ready(function() {
$(".add-more").click(function() {
var html = $(".copy").html();
$(".after-add-more").after(html);
});
$("body").on("click", ".remove", function() {
$(this).parents(".control-group").remove();
});
});
Thanks.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have a datepicker placed inside a popover. Datepicker not working. Has any one did like this
<div class="col-sm-4">
<button tabindex="0" class="btn btn-primary" role="button" data-toggle="popover" data-trigger="click"
data-placement="bottom" data-container="body" data-html="true" id="login"><i class="fa fa-calendar"></i> - <i class="fa fa-calendar"></i>
</button>
<div id="popover-content" class="hide">
<form role="form" method="post">
<div class="form-group">
<label>Start time?</label>
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" placeholder="Start Date time of event"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="form-group">
<label>End time?</label>
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" placeholder="End Date time"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="form-group">
<button class="btn btn-primary btn-block">Search between dates</button>
</div>
</form>
</div>
</div>
JS
$('#datetimepicker1').datetimepicker();
$('#datetimepicker2').datetimepicker();
$("#datetimepicker1").on("dp.change", function (e) {
$('#datetimepicker2').data("DateTimePicker").minDate(e.date);
});
$("#datetimepicker2").on("dp.change", function (e) {
$('#datetimepicker1').data("DateTimePicker").maxDate(e.date);
});
$("[data-toggle=popover]").popover({
html: true,
content: function() {
return $('#popover-content').html();
}
});
http://jsfiddle.net/J7nDz/43/
Can someone spot the error?
You can achieve with following approach but the way you are trying, I've doubts it may not be possible with bootstrap datetimepicker, reason moment.js throws following error
SyntaxError: unreachable code after return statement
Put HTML content inside popover trigger button data-content='' and remove class="hide" from HTML and also you have to use a popover callback function or bootstrap popover event listener, your choice.
<div class="col-sm-4">
<button tabindex="0" class="btn btn-primary" role="button" data-toggle="popover" data-trigger="click" data-placement="bottom" data-container="body" data-html="true" id="PopS"
data-content='
<div id="popover-content">
<form role="form" method="post">
<div class="form-group">
<label>Start time?</label>
<div class="input-group date" id="datetimepicker1">
<input type="text" class="form-control" placeholder="Start Date time of event" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="form-group">
<label>End time?</label>
<div class="input-group date" id="datetimepicker2">
<input type="text" class="form-control" placeholder="End Date time" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="form-group">
<button class="btn btn-primary btn-block">Search between dates</button>
</div>
</form>
</div>'>Date</button>
</div>
With Callback Function
$(document).ready(function () {
var showPopover = $.fn.popover.Constructor.prototype.show;
$.fn.popover.Constructor.prototype.show = function () {
showPopover.call(this);
if (this.options.showCallback) {
this.options.showCallback.call(this);
}
}
$("#PopS").popover({
html: true,
showCallback: function () {
$('#datetimepicker1').datetimepicker();
$('#datetimepicker2').datetimepicker();
}
});
});
Fiddle with callback function
With popover event listener
$(document).ready(function () {
$("#PopS").popover({
html: true
}).on('shown.bs.popover', function () {
$('#datetimepicker1').datetimepicker();
$('#datetimepicker2').datetimepicker();
});
});
Fiddle with event listener
var qBlock='<form id="resetblock"><div class="newqandaBlock"><div class="input-group margin-bottom-20"><span class="input-group-addon purple"><i class="fa fa-question"></i></span><input type="text" class="form-control" placeholder="Question Asked "><button type="button" class="btn btn-purple closequest" style="position: absolute;top: 3px;"><span> <i class="fa fa-close"></i></span></button></div> <div class="input-group margin-bottom-20"> <span class="input-group-addon purple"><i class="fa fa-reply"></i></span><textarea rows="3" class="form-control" name="info" placeholder="Your Answer"></textarea> </div><div class="input-group margin-bottom-20"><span class="input-group-addon purple"><i class="fa fa-comments"></i></span><textarea rows="3" class="form-control" name="info" placeholder="Add Your Comments"></textarea> </div></div></form>';
$("#addQuestion").on("click",function(){
$(qBlock).insertAfter(".qandaBlock");
});
$("#resetblock").on("click",'.closequest', function(){
alert("Do you really want to remove the question?!?");
$(this).closest(".newqandaBlock").remove();
});
$("#resetblock").on("click",'.resetlatest', function(){
alert("Do you really want to reset the question?!?");
$(this).closest('form').find("input[type=text], textarea").val("");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<form id="resetblock" name="resetblock" >
<div class="qandaBlock">
<div class="input-group margin-bottom-20">
<span class="input-group-addon purple"><i class="fa fa-question"></i></span>
<input type="text" class="form-control" placeholder="Question Asked ">
</div>
<div class="input-group margin-bottom-20">
<span class="input-group-addon purple"><i class="fa fa-reply"></i></span>
<textarea rows="3" class="form-control" name="info" placeholder="Your Answer"></textarea>
</div>
<div class="input-group margin-bottom-20">
<span class="input-group-addon purple"><i class="fa fa-comments"></i></span>
<textarea rows="3" class="form-control" name="info" placeholder="Add Your Comments"></textarea> </div>
</div>
<button type="button" class="btn btn-default resetlatest" id="resetlatest" ">Reset</button>
<button type="button" class="btn btn-purple" id="addQuestion"><i class="fa fa-plus-square-o"></i> Add Another Question</button>
</div>
</form>
</body>
</html>
The above line of code will reset the whole form. But , How to reset only the last newly inserted block of question , answer and comment. I dont want on the click of the reset button, the whole form to be reset. I only want to reset the last newly inserted block to be clear its fields with blanks on the click of reset button.
something like this: http://jsfiddle.net/swm53ran/25/
to achieve getting the last or newly inserted element, i used jquery's :last-child selector as seen below.
its also better (and more maintainable) to use .clone() than it is to build html with javascript if you have a template.
<div class="content">
<div id="template" class="section">
<input class="question" type="text" />
<br/>
<textarea class="answer"></textarea>
<br/>
<textarea class="comments"></textarea>
</div>
</div>
<br/>
<br/>
Reset Last Question
Add Another Question
$('.add').on('click', function() {
var clone = $('#template').clone(true).attr('id', '');
clone.find('.question').val('');
clone.find('.answer').val('');
clone.find('.comments').val('');
clone.appendTo('.content');
});
$('.reset').on('click', function() {
console.log($('.section').length);
var last = $('.content .section:last-child');
last.find('.question').val('');
last.find('.answer').val('');
last.find('.comments').val('');
});
A few things to change, other than the sh**ty markup:
1) Stop the forms from nesting each other and put the new form at the bottom after other forms:
$("#addQuestion").on("click",function(){
$(qBlock).insertAfter(".qandaBlock");
});
to
$("#addQuestion").on("click",function(){
$('body').append(qBlock); // Append the form to the body, so it will sit after the last form
});
2) Remove all id="resetblock", from markup and from the JS
3) Change all $("#resetblock").on("click" to $(document).on("click"
4) Change the alert's to confirm's:
var blnReset = confirm("Do you want to reset the question?");
if (blnReset == true) {
//Reset the question
}