I have following js code
var page = '<div class="row delete_contact">
<div class="col-xs-6 contact_item>
<label class="control-label col-xs-2" for="id">ID:</label>
<div class="controls col-xs-3">
<input class="form-control id" name="id" value="' + id +'">
</div>
<a href="javascript:void(0)" class="delete_contact_details control-label">
<span class="delete_contact_details control-label col-xs-1 glyphicon glyphicon-trash">
</span>
</a>
</div>
</div>';
when we click on 'delete' image, it has to delete the full row(div). I tried following while page loading
$(function() {
$('.delete_contact_details').on( "click", function() {
$(this).closest('.delete_contact').remove();
});
});
But it is not calling the below code. Anyone please help!
Currently what you are using is called a "direct" binding which will only attach to element that exist on the page at the time your code makes the event binding call.
Its seems you are dynamically generating elements, use Event Delegation using .on() delegated-events approach.
$(function() {
$(document).on( "click", '.delete_contact_details', function() {
$(this).closest('.delete_contact').remove();
});
});
In place of document you should use closest static container.
Try:
$(document).ready(function() {
$('.delete_contact_details').click(function() {
$(this).closest('.delete_contact').remove();
});
});
Related
I would like to be able to dynamically update a quantity field when I click on a '+' (Plus Button) However, depending where I click on the button, I am getting a different result for the parent element.
The HTML that is in use to call the function is below. This is HTML from my frontend developer and I am trying to connect a few things to make this work.
<div id="item-list" class="product_list_container">
<div class="bluedog-flex-container noPaddingLeftRgt payhub-well col-xs-12 col-sm-12 col-lg-12" data-id="32" style="margin-top:0;">
<div class="subtotal-div col-xs-12 col-sm-12 col-lg-12">
<div class="bluedog-inner-flex-container product_info_container col-xs-12 col-sm-12 col-lg-12">
<div class="order-overview-left noPaddingLeft alignLeft col-xs-4 col-sm-4 col-lg-4">Macbook Pro # 50.00</div>
<div class="quantity_range_div col-xs-6 col-sm-6 col-lg-6">
<div class="value-button createPage_decrease_qty decrease_value_btn" style="display:inline;" onclick="decreaseQty(event)"><i class="far fa-minus"></i></div>
<input type="number" class="itm_qty" id="number" value="1">
<div class="value-button increase_value_btn" style="display:inline;" onclick="increaseQty(event)"><i class="far fa-plus"></i></div>
</div>
<input type="hidden" name="item_price" data-qty="1" data-prod-name="Macbook Pro" data-id="32" data-tax="0" value="50.00"><a class="popup-close-btn order-overview-right close_btn_plans col-xs-2 col-sm-2 col-lg-2" onclick="removeItem(event)"> <i class="far fa-times-circle hosted_small_delete"></i></a>
</div>
</div>
</div>
</div>
What I am trying to achieve is, when I click on the Plus Button, (Screenshot attached) https://prnt.sc/oq770q the value will increase.
Originally, I was just using the following code to try and get the parent DIV id, which in this case is item-list
var master = $(e.target).parents().eq(5).attr('id'); // Name of item-list container
However, was receiving unexpected results, whereby if I tapped on the outside of the plus button, the surround grey area, it would not increase, but only if I tapped directly on the plus icon itself.
I noticed it was picking up a different element and the eq(5) was returning an undefined value. As you will see in in the script below, I have put in an if statement for a class check to see which part of the button has been pressed and this returns the expected results.
However, I dont' see this as scalable and transferable if someone was to change the FontAwesome Tag, as the class would likely be different.
function increaseQty(e) {
var clicked = e.path[0];
if ($(clicked).hasClass('fa-plus')) {
var master = $(e.target).parents().eq(5).attr('id'); // Name of item-list container
} else {
var master = $(e.target).parents().eq(4).attr('id'); // Name of item-list container
}
var input = $(e.target).parent().parent().find('input.itm_qty');
var qty = $(input).val();
var newQty = parseInt(qty) + 1;
$(input).val(newQty);
updatePrices(master);
}
I would like to know how, if possible, that regardless where on the container that is being clicked, the plus icon or the gray area around it, to increase the value, without having to do a dirty class check.
Many thanks,
David.
Based on you html code I am seeing like
<input type="number" class="itm_qty" id="number" value="1">
In this line you have id number so you can easily update.Based on your description your above line repeat. So you modify your increaseQty like that.
function increaseQty(e) {
var input = $(e.target).prev('input.itm_qty');
var qty = $(input).val();
var newQty = parseInt(qty) + 1;
$(input).val(newQty);
updatePrices(master);
}
If you see in your code increaseQty bind with div element and input itm_qty is sibling of div. So I am hoping above code works.
So to answer my own question, with some help from #Dhiren (Thank You)
I found out that I could assign FontAwesome Icon to the class of a SPAN. Therefore I have changed the Divs which contained the FontAwesome Icons to Spans, and assigned the FA Icon class to the span, removing the element.
<div class="quantity_range_div col-xs-6 col-sm-6 col-lg-6">
<span class="value-button createPage_decrease_qty decrease_value_btn far fa-minus" style="display:inline;" onclick="decreaseQty(event)"></span>
<input type="number" class="itm_qty" id="number" value="1">
<span class="value-button increase_value_btn far fa-plus" style="display:inline;" onclick="increaseQty(event)"></span>
</div>
In doing so I was able to use a single parents().eq(4) line of code, as the target will now always be a span, and not a Div element or an element.
function increaseQty(e) {
var master = $(e.target).parents().eq(4).attr('id');
var input = $(e.target).prev('input.itm_qty');
var qty = $(input).val();
var newQty = parseInt(qty) + 1;
$(input).val(newQty);
updatePrices(master);
}
Dhiren, thank you for the prev() suggestion as it has helped me better refactor not only this function, but more also! I appreciate the help and support.
David
I have a question about to creating dynamic jquery slideToggle function. I have html template as below:
<h4 id="client" class="section-title">
<div class="sect-icon"></div>
<span>Client Info</span> </h4>
<div class="form-row" id="client_data">
<div class="form-group col-md-4">
<label for="id_client_name">Name</label>
<input class="form-control" disabled value="{{client.client_name}}">
</div>
</div>
And jQuery function as :
$(document).ready(function () {
$("#client").click(function () {
if ($('#client_data').is(':visible')) {
$("#client").removeClass("section-title");
$("#client").addClass("section-title closed");
} else {
$("#client").removeClass("section-title closed");
$("#client").addClass("section-title");
}
$("#client_data").slideToggle("fast");
});
It is work . But this jQuery function is only for concreate html class. If i append another class to html ,then i should be copy this jQuery and past and edit id part. But i want to write one jQuery function for dynamic html id.
I mean how i can use above jQuery function for below html without creating new jQuery
<h4 id="equip" class="section-title">
<div class="sect-icon"></div> <span>Calibrated Equipment</span></h4>
<div class="form-row" id="equip_data">
<div class="form-group col-md-4">
<label for="id_brand_name">Brand</label>
<input class="form-control" disabled value="{{equip.brand_name}}">
</div>
</div>
When I was a university student, a teacher told us that repeated code is called "function":
function myStuff(idText) {
$("#" + idText).click(function () {
if ($('#' + idText + "_data").is(':visible')) {
$("#" + idText).removeClass("section-title").addClass("section-title closed");
} else {
$("#" + idText).removeClass("section-title closed").addClass("section-title");
}
$("#" + idText).slideToggle("fast");
}
And you pass the id to myStuff whenever you want, like:
$(document).ready(function () {
myStuff("client");
});
I want to send data via jquery (jquery-3.2.1.min.js) and ajax from inside of a bootstrap popover.
The popover works fine, but I cannot get the submit to work.
I initialized the popover with
$(document).ready(function() {
$(function(){
$("[data-toggle=popover]").popover({
html : true,
content: function() {
var content = $(this).attr("data-popover-content");
return $(content).children(".popover-body").html();
},
title: function() {
var title = $(this).attr("data-popover-content");
return $(title).children(".popover-heading").html();
}
});
});
});
This is the html trigger:
<span tabindex="0" role="button" data-toggle="popover" data-placement="right" data-popover-content="#comment230" data-original-title="" title="">
<img src="/ds/img/comment.svg" alt="comment" height="16px">
</span>
And this is the html inside the popover:
<div id="comment225" style="display:none;">
<div class="popover-heading">Comments</div>
<div class="popover-body">
<div class="commentbody">
<div>
<fieldset>
<div class="input text">
<label for="comment">Comment</label>
<input name="comment" id="comment" type="text" />
</div>
</fieldset>
<button class="submittest" id="acomment225button">Test</button>
</div>
</div>
</div>
</div>
For testing reasons I did this:
$(".submittest").click(function(e) {
alert('test');
e.preventDefault();
});
The alert does not work from buttons inside the popover, but from buttons placed on the rest of the page.
How can I get this to work?
Those DOM elements are not present at the time you are subscribing to the event.
You need to hook up to events in this fashion:
$(document).on("click", ".submittest", function(e){
alert("test");
});
I am dynamically creating a div using jquery which contains add & close button. I am using Bootstrap tooltip for the add & close buttons. The problem that I am facing is Tooltip of the first add button doesn't gets hidden even when the mouse is hovering other add button. The tooltip of first add button remains as it is.(Refer screenshot) Any idea as to how to make it hidden.
I am using jquery clone method to create the dynamic divs.
$(document).on('click', ".addFilesBtn", function(e) {
e.preventDefault();
$(".appendClass:first").clone().appendTo".addFiles");
$('.closeFilesBtn').show();
$('.closeFilesBtn:first').hide();
});
Also for hiding the tooltips, I am using the below code but still the first tooltip is not getting hidden.
$(document).on('mouseleave','[data-toggle="tooltip"]', function(){
$(this).tooltip('hide');
});
updated HTML Code
<div class="row addFiles">
<div class="appendClass" style="margin-bottom: 1.5%;">
<label style="white-space: nowrap;" class="responsive-enter-details col-sm-3 control-label">Select Files</label>
<div class="col-sm-8 col-md-9">
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="form-control" data-trigger="fileinput">
<i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename">Click to select file</span> <i class="fa fa-upload pull-right"></i>
</div>
<input id="inputfile" type="file" style="display: none;">
</div>
</div>
<button class="btn btn-box-tool addFilesBtn" data-toggle="tooltip" title="Click to add more files">
<i class="fa fa-plus"></i>
</button>
<button class="btn btn-box-tool closeFilesBtn" data-toggle="tooltip" title="Click to remove this block">
<i class="fa fa-times"></i>
</button>
</div>
</div>
Link to JS Fiddle:
https://jsfiddle.net/gLkrsbxc/4/
As you can see in JS Fiddle, the tooltip isn't getting closed.
Please check the last update for solution
As mentioned in the docs at http://getbootstrap.com/javascript/#tooltips, you need to initialize all the tooltips e.g.
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
So, here you just need to initialize the tooltips after adding them to the DOM.
Just add $('[data-toggle="tooltip"]').tooltip() in your click function after cloning.
$(document).on('click', ".addFilesBtn", function(e) {
e.preventDefault();
$(".appendClass:first").clone().appendTo".addFiles");
//initialize tooltips(add this line)
$('[data-toggle="tooltip"]').tooltip();
$('.closeFilesBtn').show();
$('.closeFilesBtn:first').hide();
});
And I think if initialized properly, you won't need the hide function.
Update:
I think calling the initializing function doesn't work properly because it is a problem when dom manipulation operations are performed. Add slight delay after the append function and before the initializing function with setTimeout like this:
$(document).on('click', ".addFilesBtn", function(e) {
e.preventDefault();
$(".appendClass:first").clone().appendTo".addFiles");
//initialize tooltips(give some time for dom changes)
setTimeout(function() {
$('[data-toggle="tooltip"]').tooltip();
}, 50);
$('.closeFilesBtn').show();
$('.closeFilesBtn:first').hide();
});
Update 2
Just hide the tooltip of the button you just clicked before cloning:
$(document).on('click', ".addFilesBtn", function(e) {
e.preventDefault();
//hide the tooltip
$(this).tooltip('hide');
$(".appendClass:first").clone().appendTo(".addFiles");
$('.closeFilesBtn').show();
$('.closeFilesBtn:first').hide();
});
all. I have html layout like this:
<div class="row" id="1">
/*Other code has nothing to do with <div class="form-group col-lg-1">*/
<div class="form-group col-lg-1">
<input type="button" class="btn btn-default" onclick="updateLine()" value="Update">
</div>
</div>
I want to obtain the div's ID, in this case, which is 1.
This is what I did.
function updateLine() {
alert(this.parent().parent().attr("id"));
}
However, it failed, then I check
alert(this);
it returns to me the window object.
So the question is , how could I get the id's value, which is 1.
Thanks.
You need to pass this to the function as follows
<input type="button" class="btn btn-default" onclick="updateLine(this)" value="Update">
function updateLine(obj) {
alert(obj);
$(obj).closest('.row').attr('id'); // will return the id, note that numeric values like 1 are invalid
}
You do not need to pass this to the function. In an event handler this is the element clicked. However, to use .parent() etc on it you need the jQuery object for that element which is $(this)
Also, I would strongly recomment using .closest instead of .parent().parent(). Something like
$(this).closest('div.row').attr('id')
Way less likely to break when you make small layout changes...
The comments about using jQuery events instead of inline javascript are also good advice.
Example:
<div class="row" id="1">
/*Other code has nothing to do with <div class="form-group col-lg-1">*/
<div class="form-group col-lg-1">
<input type="button" class="btn btn-default" value="Update">
</div>
</div>
<script type="text/javascript">
$(function(){
function updateLine(event){
alert( $(this).closest('.row').attr('id') );
}
// If you have other buttons add a class like 'btn-update' and use that instead
$('body').on('click', '.btn-default', updateLine);
});
</script>
If you want to do inline event handlers, you need to pass this:
onclick="updateLine(this)"
then in js:
function updateLine(obj) {
alert($(obj).closest('.row').attr("id"));
}
However, I'd recommend removing the inline handler if possible and using jQuery to do the binding:
$('button').click(function() {
alert($(this).closest('.row').attr("id"));
});
What you are trying do is very bad practice. It will never work.
Firs, you should not use inline javascript.
Second, you should use real jQuery code.
Below you can see a working example.
<div class="row" id="1">
<div class="form-group col-lg-1">
<input type="button" class="btn btn-default" value="Update" id="someID" />
</div>
</div>
And your jQuery code should be like:
$(function () {
$('#someID').click(function () {
alert($(this).parents('div:eq(1)').prop('id'));
});
});
Here is a working example: http://jsfiddle.net/avramcosmin/Z9snq/
A bit late but what worked for me:
$(document).on('click', '.id', function(event) {
const elem = $(this);
})