I have created dynamic checkboxes using jQuery and showing in div and I have created checkbox onchange function.
static checkbox onchange function working but when I generate dynamic checkbox and same function call it didn't work.
Dynamic checkbox code:
$(document).on("click", "#item_modal", function() {
$.ajax({
url: '<?=base_url()?>extraItem',
type: 'post',
dataType: 'json',
data: {itemId: id}
})
.done(function(data) {
console.log(data);
var extraItems = "";
$.each(data, function(index, el) {
extraItems+='<div class="col-md-4 col-lg-4"> <label style="width:100%"> <div class="col-md-6 col-lg-6 col-sm-6 col-xs-6"> <div style="font-size:14px;color:#fff;" class="checkbox"> <input name="product" value="'+el.amt+'" type="checkbox" id="p'+el.id+'"> <b>'+el.name+'</b> </div></div><div class="col-md-6 col-lg-6 col-sm-6 col-xs-6"> <p style="color:#fff;padding:10px;font-size:12px"> <span class="fa fa-rupee"></span> <b>'+el.amt+'</b> </p></div></label> </div>';
});
$('.extraItemList').append(extraItems);
jQuery('#myModal .modal-content').html();
$('#myModal').modal({
"backdrop": "static"
});
});
});
Checkbox Onchange Function :
$(document).ready(function() {
$(":checkbox").on("change", function() {
console.log("check");
});
});
Html Static Checkbox : It's working
<div class="col-md-12 col-lg-12" style="padding:0 34px;">
<div class="col-md-4 col-lg-4">
<label style="width:100%">
<div class="col-md-6 col-lg-6 col-sm-6 col-xs-6">
<div style="font-size:14px;color:#fff;" class="checkbox"> <input name="product" value="60.00" type="checkbox" id="p4" class="checkboxes"> <b>Extra Veg</b> </div>
</div>
<div class="col-md-6 col-lg-6 col-sm-6 col-xs-6">
<p style="color:#fff;padding:10px;font-size:12px"> <span class="fa fa-rupee"></span> <b>60.00</b> </p>
</div>
</label>
</div>
</div>
Html Dynamic :
<div class="col-md-12 col-lg-12 extraItemList" style="padding:0 34px;">
</div>
I am adding dynamic checkboxes on .extraItemList class
I have spent lots of time to resolve it but could not find anything.
Is it any solution ? because it's weird.
You can bind checkbox change like this:
$(document).ready(function() {
$(".extraItemList").on("change", 'input[type="checkbox"]', function() {
console.log("check");
});
});
By doing so it will bind to all inputs of checkbox type which are inside the extraItemList class.
I hope this helps.
You should use event delegation for dynamic element like following.
$(".extraItemList").on("change", ":checkbox", function() {
console.log("check");
});
Change
$(document).ready(function() {
$(":checkbox").on("change", function() {
console.log("check");
});
});
To
$(document).ready(function() {
$(".extraItemList").on("change", ":checkbox", function() {
console.log("check");
});
});
If you go with you solution jQuery wil bind the event to the checkboxes currently available, if you go with mine jQuery will bind the event to the document and will check if the element is the checkbox and it will trigger the event. So it'll work for dynamic content
Related
before all thanks for reading.
So... I have a problem with bootstrap popover. I have tried many configurations with no success, so I'll try to explain the problem as clearer as I can.
I have multiple elements within bootstrap columns and when the user click on one of them a popover comes out with a form in its popover-content.
Every form is different due to its attributes, you can choose different options in the popover and then send the form.
Untill this point everything is fine, the popover works correctly. The thing is that when I click a second time over the same element in order to hide the popover, popover hides but not the title and the next popover I click content is empty, I mean, popover content stop working, it only show titles.
I think I'm missing something but I can't find out what.
The code that load the content:
$("[data-toggle=popover]").popover({
trigger: "click focus",
template:'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3>⊗<div class="popover-body"></div></div>',
content: function() {
var $html = $(this).parent().find(".prod-popover").eq(0).html();
return $(".popover-content").html($html);
}
});
I've tried with trigger focus, click, manual and a mix of them with the same results.
I have also tried changing the wrapper .popover-content with #popover-content.
Code to hide popover:
$(document).on("click", "a.popover-close", function(e) {
e.stopPropagation();
$(".popover-content").popover('hide');
return false;
});
Another for hiding found here in stack overflow
$(document).click(function(e) {
if ($(".popover").has(e.target).length == 0 || $(e.target).is(".close")) {
$("#popoverId").popover("hide");
}
});
Another one:
$("[data-toggle=popover]").on('click', function (e) {
e.preventDefault();
e.stopPropagation();
$("[data-toggle=popover]").not(this).popover('hide');
});
HTML:
<div class="col-md-6 col-sm-6 col-xs-12 bt-border k-item" data-placement="right" data-toggle="popover" data-title="Whatever" data-container="body" data-html="true">
<div class="hidden prod-popover">
<form class="cart" role="form" method="post" action="">
<div class="form-group">
<label>Label</label>
<textarea rows="2" placeholder="PLACEHOLDER"></textarea>
</div>
<div class="form-group">
<div class="btn-group pop-quantity" role="group">
<input type="text" value="1" min="1" step="1">
</div>
</div>
<button type="button">Send<button>
</form>
</div>
<div class="row">
<div class="col-md-2 col-sm-2 col-xs-2"><img src="SRC" alt=""></div>
<div class="col-md-8 col-sm-8 col-xs-8">
<h4 class="no-pad-bt">Whatever</h4>
<p class="no-pad-bt">Description</p>
</div>
<div class="col-md-2 col-sm-2 col-xs-2 text-right">
<p>Price</p>
</div>
</div>
Any help will be highly appreciated.
<div class="col-md-4 col-sm-6 dsitbl scrl_animxxxxx"></div>
<div class="col-md-4 col-sm-6 dsitbl scrl_dd applexxxxx"></div>
I want to know is there any way in jquery to remove last "xxxxx" from class
Do it like below:-
$(document).ready(function(){
$('div').each(function(){
$(this).attr('class',$(this).attr('class').slice(0,-5));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4 col-sm-6 dsitbl scrl_animxxxxx">Abc</div>
<div class="col-md-4 col-sm-6 dsitbl scrl_dd applexxxxx">Def</div>
Note:-
1. If you want to check first that class have xxxxx in it (at last) or not and then you want to replace,so you can do it like below:-
if (if ($(this).attr('class').substr($(this).attr('class').length - 5) == "xxxxx"){
// remove characters code here
}
Example:-
$(document).ready(function(){
$('div').each(function(){
if ($(this).attr('class').substr($(this).attr('class').length - 5) == "xxxxx"){
$(this).attr('class',$(this).attr('class').slice(0,-5));
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4 col-sm-6 dsitbl scrl_animxxxxx">Abc</div>
<div class="col-md-4 col-sm-6 dsitbl scrl_dd applexxxxx">Def</div>
<div class="col-md-4 col-sm-6 dsitbl scrl_dd mango">Ghi</div>
The only way I can think of is by removing the class then adding the changed class back to the element.
$('.applexxxxx').removeClass('applexxxxx').addClass('apple');
I am building an app using Angular JS. I am using ng-repeat to loop over list of items. My code is something like below,
<div class="names" ng-repeat="room in rooms" ng-click="getMessages(room.id); active = true; " ng-class="{'blue_act': active}">
<div class="con_cir col-lg-2 col-md-2 col-sm-2">
<div class="grey_cir">
<div class="wht_cir">
<div class="circle1">
<div class="cir_txt">{{room.title | nameInitials}}</div>
</div>
</div>
</div>
</div>
<div class="em_info col-lg-10 col-md-10 col-sm-10">
<div class="em_pr">
<div class="name boldfnt col-lg-7 col-md-7 col-sm-7" ng-class="{'normal-font': active}">
{{room.title}}
</div>
<div class="date col-lg-5 col-md-5 col-sm-5">
{{room.lastActivity | date: 'd/M/yyyy'}}
</div>
</div>
<div class="subject boldfnt col-lg-12 col-md-12 col-sm-12">
Here is your copy of your coupans.
</div>
</div>
</div>
Now I want to apply the class blue_act only when the particular row is selected. I don't want to write any function in the controller to achieve this.
For example When I click the Demo#16 only that row will have the blue background. And when I click the e2Spark only that row will be highlighted using the blue color. Is it possible with only ng-click and ng-class?
Screenshot
Create a new property on controller's scope, called 'selectedRow', and assign room name to it on click.
plnkr
var app = angular.module('plunker', []);
app.controller('MainCtrl', function() {
this.rooms = [
{name: 'room1'},
{name: 'room2'},
{name: 'room3'},
];
this.selectedRow = this.rooms[0].name;
});
.blue_act {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<body ng-app="plunker" ng-controller="MainCtrl as main">
selected row: {{main.selectedRow}}
<div class="names" ng-repeat="room in main.rooms" ng-click="main.selectedRow = room.name" ng-class="{'blue_act': main.selectedRow == room.name}">
<div class="con_cir col-lg-2 col-md-2 col-sm-2">
<div class="grey_cir">
<div class="wht_cir">
<div class="circle1">
<div class="cir_txt">{{room.name }}</div>
</div>
</div>
</div>
</div>
</div>
</body>
Replace your click event with this ng-click="getMessages(room.id); reset(); room.active = true; "
and do same for ng-class where you are using as like ng-class="{'normal-font': room.active}"
Add below reset function in your code if you want select at a time single row.
$scope.reset= function(){
angular.forEach($scope.rooms, function(room) {
room.active=false;
});
}
in your ng-click
ng-click="getMessages(room.id); room.active = !room.active;"
in your ng-class
ng-class="{'normal-font': room.active }"
With no controller function you could use
<div class="names" ng-repeat="room in rooms" ng-click="getMessages(room.id);room.active=!room.active;" ng-class="{'blue_act': room.active}">
...
</div>
Or if you just wanted to have one active at the same time this should work:
<div class="names" ng-repeat="room in rooms" ng-click="getMessages(room.id);selectedRoom=room.id;" ng-class="{'blue_act': selectedRoom===room.id}">
...
</div>
I have a this HTML Code in a separate file and I have to add it to a another HTML page.
<!-- TAGLIO DONNA MEDIO -->
<div class="form-inline divNoMargin col-md-12 def_taglioDonnaMedio noPadding ">
<!-- TITLE -->
<label class="col-md-5 noPaddingLeft divNoMargin defTaglioDonnaMedioTitle testoPiccolo">Taglio Donna Medio</label>
<!--OPRZIONI PREZZO -->
<!-- SELECT 1 -->
<div class=" col-md-8 divNoMargin select1">
<label class="testoPiccolo pull-left">prezzo:</label>
<label for="" id="" class="col-md-4 pull-right testoMedio text-right prezzo defPrezzoTagliodonnaMedio">,00</label>
</div>
<!-- SELECT 2 -->
<div class=" col-md-8 noMarginLeft2 hidden select2">
<label class="pull-left testoPiccolo">prezzo a partire da:</label>
<label for="" id="" class="pull-right col-md-4 testoMedio text-right prezzo noMarginLeft2 defPrezzoTagliodonnaMedio">,00</label>
</div>
</div>
I tried using this jquery but doesn't work. Anyone
var parentDiv2 = $(document).find('.nuoviServiziReview1');
$.get( "nuoviServiziReview.html", function( data ) {
var nuovoServizioReview = $('<div/>',{id:'Servizio'+ incremento}).append(parentDiv2);
nuovoServizioReview.html(data);
})
It is because, you are not doing anything to the DOM:
var parentDiv2 = $(document).find('.nuoviServiziReview1');
$.get( "nuoviServiziReview.html", function( data ) {
var nuovoServizioReview = $('<div/>',{id:'Servizio'+ incremento});
nuovoServizioReview.html(data);
nuovoServizioReview.appendTo(parentDiv2);
})
Have you tried load?
http://api.jquery.com/load/
Description: Load data from the server and place the returned HTML into the matched element.
$('.nuoviServiziReview1').load('nuoviServiziReview.html');
append(content) appends content to the inside of every matched element.
appendTo(selector) appends all of the matched elements to another specified set of elements.
Also
A.append(B) appends B to A
A.appendTo(B) appends A to B
So you need to use appendTo() instead of append() as:
var parentDiv2 = $(document).find('.nuoviServiziReview1');
$.get( "nuoviServiziReview.html", function( data ) {
var nuovoServizioReview = $('<div/>',{id:'Servizio'+ incremento});
nuovoServizioReview.html(data);
nuovoServizioReview.appendTo(parentDiv2);
});
This should work :)
How can I make the current option active and disable the others? I was trying this: https://jsfiddle.net/jpr33wnn/2/
I'm new to jQuery and getting stuck. Please tell if doing it wrong. Thanks.
<div class="col-lg-2 inner" id="dropdown1-parent">
<h6 class="right list-item">Hendrik de Zeeuw</h6>
</div>
<div class="dropdown" id="dropdown1" style="display:none;">
<div class="col-lg-3">
<p class="dropdown-header">
Gegevens wijzijen
</p>
</div>
</div>
<div class="col-lg-2 inner" id="dropdown2-parent">
<h6 class="right list-item">Hendrik de Zeeuw</h6>
</div>
<div class="dropdown" id="dropdown2" style="display:none;">
<div class="col-lg-3">
<p class="dropdown-header">
Gegevens wijzijen
</p>
</div>
</div>
.bg {
color: red;
}
(function() {
var object = {
dropdown1: $('#dropdown1'),
dropdown2: $('#dropdown2'),
dropdown1parent: function() {
if (object.dropdown1.is(':hidden')) {
object.dropdown1.show();
}
},
dropdown2parent: function() {
if (object.dropdown2.is(':hidden')) {
object.dropdown2.show();
}
}
}
$('#dropdown1-parent').on('click', function() {
$(this).addClass('bg');
object.dropdown1parent();
});
$('#dropdown2-parent').on('click', function() {
$(this).addClass('bg');
object.dropdown2parent();
});
})();
I have changed your markup little bit like:
HTML:
<div class="col-lg-2 inner ddparent" data-target='dropdown1' id="dropdown1-parent">
<h6 class="right list-item">Hendrik de Zeeuw</h6>
</div>
<div class="dropdown" id="dropdown1" style="display:none;">
<div class="col-lg-3">
<p class="dropdown-header">Gegevens wijzijen</p>
</div>
</div>
Added a class name 'ddparent' to the parent and 'dropdown' to the dropdowns div and an attribute data-target to target the specific ones.
Is this you want:
$(function () {
$('.ddparent').on('click', function () {
var target = $(this).data('target');
$(this).addClass('bg').siblings('.ddparent').removeClass('bg');
$('#'+target).show().siblings('.dropdown').hide();
});
});
An updated fiddle.
You can simplify your code by the use of common classes and DRY principles. This completely negates the need to both maintain an object to store the references to the individually identified dropdown and related parent elements. It also means that a single click handler can work for any number of dropdowns. Try this:
$(function () {
$('.dropdown-parent').click(function () {
var $parent = $(this);
$parent.toggleClass('bg').siblings().removeClass('bg');
var $dropdown = $parent.next('.dropdown');
$('.dropdown').not($dropdown).hide();
$dropdown.toggle($dropdown.is(':hidden'));
});
});
<div class="col-lg-2 inner dropdown-parent">
<h6 class="right list-item">Hendrik de Zeeuw</h6>
</div>
<div class="dropdown">
<div class="col-lg-3">
<p class="dropdown-header">Gegevens wijzijen</p>
</div>
</div>
Updated Fiddle