I have following HTML code.
Here 2 add/remove link exists. 1) Add More Details(+) 2) Add(+)
when I click on Add(+) link its clone the tour_wrap class div and counting the number of trip_counting class div cloned/added. Like: Trip 1, Tip 2, Trip 3 etc..
And, I have another link called Add More Details (+) which is clone the tour_wrap div.
So when I click on this link twice for e.g then it's clone the tour_wrap div 2 times, That's good.
Now I have 3 tour_wrap div. In this div's you can see that I have the link Add(+) 3 times, right? Yes. So when I click on any Add(+) link then it's counting the Total number of trip_counting classes added But I want to count only corresponding trip_counting classes.
Check this image:
HTML Code:
<div class="tour_wrap">
<!-- some other html code for the tour -->
<div class="trip_wrap">
<h5 class="badge badge-success trip_counting">Trip 1</h5>
<div class="col-md-4">
<div class="form-group">
<label>From</label>
<input type="text" name="ow_from[]" class="form-control" placeholder="From">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>To</label>
<input type="text" name="to[]" class="form-control" placeholder="To">
</div>
</div>
<div class="col-md-12">
<div class="change_trip text-right">
<a class="btn add_button_trip trip_btn">Add(+)</a>
</div>
</div>
</div> <!-- end trip_wrap -->
</div> <!-- end tour wrap -->
<div class="row">
<div class="col-md-12">
<div class="form-group change text-right">
<a class="btn add_button add_more add_more_btn"><strong>Add More Details (+)</strong></a>
</div>
</div>
</div> <!-- end row -->
jQuery Code:
// for all way
$("body").on("click",".add_button",function(){
var html = $(".tour_wrap").first().clone();
$(html).find(".change").html("<a class='btn remove remove_more'>Remove Details(-)</a>");
$(".tour_wrap").last().after(html);
$('.counting').each(function(i, elm) {
$(elm).text('Detail ' + (i + 1));
});
});
$("body").on("click",".remove",function(){
$(this).parents(".tour_wrap").remove();
});
// add more trip
$("body").on("click",".add_button_trip",function(){
var html = $(".trip_wrap").first().clone();
$(html).find(".change_trip").html("<a class='btn remove_trip remove_more trip_btn_remove'>Delete(-)</a>");
//$(".trip_wrap").last().after(html);
$('.trip_wrap').each(function(i, elm) {
$(elm).last().after(html);
});
$('.trip_counting').each(function(i, elm) {
$(elm).text('Trip ' + (i + 1));
});
});
$("body").on("click",".remove_trip",function(){
$(this).parents(".trip_wrap").remove();
});
Related
I have multiple divs in my HTML with sample class name and I want these divs to behave like a radio button, that is when a div is clicked / selected, I want to achieve following.
1: Change the selected div background color
2: Get values from different elements those are inside the selected div and save the values in variables.
I am able to change the color but I am not able to get the unique values from inside the selected div.
Here is the HTML
<div class="col-lg-4 text-center">
<div class="package">
<input type="hidden" class="packageId" value="5" />
<p class="small">Deep</p>
<h4 class="packageTitle">Deep Cleaning</h4>
<p>All-inclusive cleaning service</p>
<p class="small">Price Per Cleaner</p>
<p class="price packagePrice">41.90 <span class="small">/h</span></p>
</div>
</div>
<div class="col-lg-4 text-center">
<div class="package">
<input type="hidden" class="packageId" value="4" />
<p class="small">Last Minute</p>
<h4 class="packageTitle">Last-Minute Cleaning</h4>
<p>Last minute & after party cleaning</p>
<p class="small">Price Per Cleaner</p>
<p class="price packagePrice">43.90 <span class="small">/h</span></p>
</div>
</div>
<div class="col-lg-4 text-center">
<div class="package">
<input type="hidden" class="packageId" value="3" />
<p class="small">Moving</p>
<h4 class="packageTitle">Move-In-Out Cleaning</h4>
<p>For move-ins, and move-outs</p>
<p class="small">Price Per Cleaner</p>
<p class="price packagePrice">41.90 <span class="small">/h</span></p>
</div>
</div>
And here the the Script
var packageId = "";
var packageTitle = "";
var packagePrice = "";
var packages = document.getElementsByClassName('package');
Array.prototype.forEach.call(packages, function (element) {
element.addEventListener('click', function () {
$('.package').css("background-color", "#FFFFFF");
$(this).css("background-color", "#FCF6CC");
packageId = $('.packageId').attr('value');
packageTitle = $('.packageTitle').text();
packagePrice = $('packagePrice').text();
console.log(packageId);
console.log(packageTitle);
console.log(packagePrice);
});
});
The reason that youre not getiing the unique value is because you are using get element by class ,
ie packagePrice = $('.packagePrice').text();
and there are 3 elements with same class name , to fix this issue
const elem = $(this);
packagePrice = elem.find('.packagePrice').text();
So currently I can easily add and remove multiple textarea
But what I'm trying to do is to put numbering per specific textarea
Here's my textarea
as you notice my default text area is Step 1
But I wanted to do is when I clicked add it will show another textarea that says
Step 2
<div class="optionBox">
<div class="block">
<div class="form-group">
<label for="exampleFormControlTextarea1">Step 1</label>
<textarea class="form-control rounded-0" id="exampleFormControlTextarea1" rows="10"></textarea>
</div>
<span class="remove">Remove</span>
</div>
<div class="block"> <span class="add">Add Option</span>
</div>
</div>
My Javascript
$('.add').click(function () {
$('.block:last').before(' <div class="block"><div class="form-group"><label for="exampleFormControlTextarea1">Step</label><textarea class="form-control rounded-0" id="exampleFormControlTextarea1" rows="10"></textarea></div><span class="remove">Remove</span></div>');
});
Here's the current output
To make this work you can add a span element with no content to the label within each .block. Then you can create a function which updates the number within that span based on the index of the element every time you add or remove a .block.
I would also strongly suggest that you clone elements instead of adding lots of HTML in to your JS logic, as this violates the Separation of Concerns principle due to tying the JS too closely with the HTML. In your case this can be done by simply adding one extra class on to the .block which holds the textarea elements. Try this:
$('.add').click(function() {
let $lastBlock = $('.block.step:last');
let $clone = $lastBlock.clone().insertAfter($lastBlock);
$clone.find('textarea').val('');
updateStepCounts();
});
$('.optionBox').on('click', '.remove', function() {
if ($('.block.step').length > 1) {
$(this).closest('.block').remove();
updateStepCounts();
}
});
let updateStepCounts = () => $('.block label span').text(i => i + 1);
updateStepCounts();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="optionBox">
<div class="block step">
<div class="form-group">
<label for="exampleFormControlTextarea1">Step <span></span></label>
<textarea class="form-control rounded-0" id="exampleFormControlTextarea1" rows="10"></textarea>
</div>
<span class="remove">Remove</span>
</div>
<div class="block">
<span class="add">Add Option</span>
</div>
</div>
I removed the div.block surrounding the "add option" span and used .append on the newly added div.block-container element instead of .before to add the next textarea to the bottom of the options container. i think this reads a little better symantically.
Also using string interpolation i am able to insert the total number of div.block + 1 to track the number of textareas visible on the page.
Hope this helps.
$('.add').click(function () {
const numberOfBlocks = $(".block").length;
$(".block-container")
.append(`
<div class="block">
<div class="form-group">
<label for="exampleFormControlTextarea1">Step ${numberOfBlocks + 1}</label>
<textarea class="form-control rounded-0" id="exampleFormControlTextarea1" rows="10"></textarea>
</div>
<span class="remove">Remove</span>
</div>`
);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="optionBox">
<div class="block-container">
</div>
<span class="add">Add Option</span>
</div>
I created the popup when I am trying to call action on click for close pop up icon no change is shown.
In index.html in bottom there is code for pop up, this will be shown when user will click on change zip code link.
<!-- Pop up div -->
<div class="popup" ng-show="myModal" ng-controller="utilityCtrl">
<!-- Modal content -->
<div class="popup-content">
<span class="close" ng-click="closePopup">×</span>
<div class="dynamicContect" id="dynamicContect"> Loading ...
</div>
</div>
</div>
<!-- html of change zip code -->
<div class="hidden" id="updateZipContent">
<div class="zipContent">
<div class="padding-bt-2">Please enter new zip code</div>
<div class="row">
<div class="text-left col-md-6 padding-bt-2">
<input ng-model="zipCode" type="text" class="form-control" maxlength="5" data-required="true" number-only>
</div>
<div class="text-left col-md-4">
<button class="btn btn-primary form-control">Update</button>
</div>
</div>
</div>
</div>
Change zip code action is written in autoQuotectrl.js
$scope.changeZipCode = function()
{
$rootScope.myModal = true;
var firstDivContent = document.getElementById('updateZipContent');
var secondDivContent = document.getElementById('dynamicContect');
secondDivContent.innerHTML = firstDivContent.innerHTML;
}
To keep other action separate I wrote new controller utilityCtrl.js.
Here I wrote action for hide this popup .
$scope.closePopup = function ()
{
console.log('here in utility');
$rootScope.myModal = false;
document.getElementById('dynamicContect').innerHTML = "";
}
But nothing is working, please help me to understand what I am missing here.
It seems $rootScope.myModal is not accessible in utilityCtrl
You don't invoke function closePopup in template.
See example on plunker.
<div class="popup" ng-show="myModal" ng-controller="utilityCtrl">
<!-- Modal content -->
<div class="popup-content">
<span class="close" ng-click="closePopup()">×</span>
<div class="dynamicContect" id="dynamicContect"> Loading ...
</div>
</div>
</div>
they are in two controller,so the $scope is diferent ,you can use $rootScope.$broadcast and $scope.$on
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 :)
I have created a photo album and a uib-pagination and now I want to add a search box. My pagination consists of 5 pages. The filter that I have used just search the photos which are in that current page.for example if I go to page 10 and want to search a picture which is in page 1 is not working.but it searches and shows me the pictures that are in page 10.
I am wondering which filter should I use to give me the possibility of searching pictures of all pages.
js codes:
paintApp.controller('intController', ['$scope','$location','$log', function($scope,$location, $log){
this.images = [];
for(i = 1 ; i <51 ; i++){
this.images.push(i);
}
this.currentPage = 1 ;
this.numPerPage = 9 ;
this.maxSize = 6;
this.pageChanged = function() {
$location.path( "int/"+this.currentPage , false);
};
}]);
paintApp.filter('imgThumb', function(){
return function(images, start){
return images.slice(start);
}
});
HTML codes:
<div ng-controller="intController as intCtrl ">
<div class="container">
<uib-pagination
ng-model="intCtrl.currentPage"
total-items="intCtrl.images.length"
max-size="intCtrl.maxSize"
ng-click="intCtrl.pageChanged()"
>
</uib-pagination>
<div class="row">
<div class="col-lg-3">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for..." name="mySearch" ng-model="search" >
<span class="input-group-btn">
<button class="btn btn-default" type="button" >Go!</button>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
<br>
<br>
<div class="row">
</div>
<div class="col-md-4 uib-pagination" ng-repeat="img in intCtrl.images | imgThumb:(intCtrl.currentPage -1 )* intCtrl.numPerPage| limitTo:intCtrl.numPerPage | filter: search ">
<div class="thumbnail ">
<img src="src/images/sample{{img}}.jpg" >
<div class = "caption" >
<h3>{{img}} </h3>
<p>
<a href = "#" class = "btn btn-primary" role = "button">
Button
</a>
<a href = "#" class = "btn btn-default" role = "button">
Button
</a>
</p>
</div>
</div>
</div>
</div>
</div>
Right now you are first applying the limitTo filter, which will yield an array of nine elements, then applying the filter filter to that array.
What you want is to first apply the filter filter then the limitTo, so change the order of the filters:
... | filter: search | limitTo:intCtrl.numPerPage
Demo: http://plnkr.co/edit/wBxVaVCXtgOeBEY3Kh9G?p=preview