i have that div. It's ok!
<div class="product"><div class="product-list-td col-xs-12 col-sm-12" ng-repeat="products in showProduct">
<div class="numeric-prod col-xs-12 col-sm-2">
{{$index+1}}
</div>
<div class="col-xs-12 col-sm-2">
{{ products.name }}
</div>
<div class="col-xs-12 col-sm-2">
{{ products.article }}
</div>
<div class="col-xs-12 col-sm-2">
{{ products.description }}
</div>
<div class="col-xs-12 col-sm-2">
{{ products.cost }}
</div>
<div class="col-xs-12 col-sm-2"">
<button type="button" class="btn btn-warning delete-product col-xs-12 col-sm-12" data-ng-click="deleteProduct( products.id )">Delete</button>
</div>
</div></div>
i'm try add that div after ng-repeat function. He work. (that code)
$scope.productClick = function (event) {
if ($scope.testId != event)
{
$scope.testId = event;
if ($scope.testId != undefined)
{
$scope.productTableName = $filter('filter')($scope.ShopTable, {id: $scope.testId}, true);
$scope.showProduct = $filter('filter')($scope.ProductTable, {shop_id: $scope.testId}, true);
$('.product').appendTo('#'+event);
$('.tr-table .product').css({'display' : 'block'});
if ($scope.showProduct[0]== undefined)
{
$scope.ProductsShopName = 'No Products';
}
else
{
$scope.ProductsShopName = $scope.productTableName[0].name+' product list';
}
}
} else {
$scope.testId = 0 ;
$('.tr-table .product').css({'display' : 'none'});
$('.product').appendTo('.container');
}
}
Why do I ask - after moving to a new page (dir pagination angularjs), the div added to me in the .tr-table Automatically deleted.
You can see how it happens here http://point.salesdep.by/
Click the button "product" (once), then go to the next page of the table. And click button "product" again. ("not work") because div '.product' removed from the first page. Help please guys!
It would be easier to do it the angular way. Update you parent div (the ng-repeat shops) and add your div with a boolean to display it or not:
<div class="row dragger">....</div>
<div class="product" data-ng-show="shop.showList">
<div class="product-list-td col-xs-12 col-sm-12" ng-repeat="products in shop.showProduct">
<div class="numeric-prod col-xs-12 col-sm-2">
{{$index+1}}
</div>
<div class="col-xs-12 col-sm-2">
{{ products.name }}
</div>
<div class="col-xs-12 col-sm-2">
{{ products.article }}
</div>
<div class="col-xs-12 col-sm-2">
{{ products.description }}
</div>
<div class="col-xs-12 col-sm-2">
{{ products.cost }}
</div>
<div class="col-xs-12 col-sm-2"">
<button type="button" class="btn btn-warning delete-product col-xs-12 col-sm-12" data-ng-click="deleteProduct( products.id )">Delete</button>
</div>
</div>
</div>
And update your controller accordingly (my response probably doesn't work, it's just to give you the main idea):
$scope.productClick = function (shop) {
//if you want to hide all other div, you can loop here over shops to
//set all showList at false
shop.showList = !shop.showList;
if(true === shop.showList){
//this part is probably false
//you need to fetch the data here so you can display it
$scope.testId = shop.id;
$scope.productTableName = $filter('filter')($scope.ShopTable, {id: $scope.testId}, true);
shop.showProduct = $filter('filter')($scope.ProductTable, {shop_id: $scope.testId}, true);
if (shop.showProduct[0]== undefined)
{
$scope.ProductsShopName = 'No Products';
}
else
{
$scope.ProductsShopName = $scope.productTableName[0].name+' product list';
}
}
}
}
Related
I have a screen like this:
So what I am trying to do is when the CLICK button is clicked, return the image on the right and show the result box (which is div).
So the section is like this:
<section class="weight__calculations">
<div class="container calculations__content">
<div class="row contents">
<div class="col-lg-2 col-md-12 col-sm-12"></div>
<div class="col-lg-4 col-md-12 col-sm-12 calculate__content">
<form>
<div class="form-group">
<div class="calorie__button__area">
<button
type="submit"
class="button-secondary button__calculate"
>
HESAPLA
</button>
</div>
</form>
</div>
<div class="col-lg-6 col-md-12 col-sm-12 calculate__content">
<img
src="./assets/img/calculate.png"
alt="Weight Calculation Image"
/>
</div>
<div class="col-lg-6 col-md-12 col-sm-12 calculate__content__result">
<div class="result__box">
<div class="title">RESULT</div>
</div>
</div>
</div>
</div>
</section>
And I hided calculate__content__result in css:
.calculate__content__result {
display:none;
}
But I dont know how to show it again and display none picture with the return effect.
Thanks for your help.
check this out it may help in your needs... Same time you toggle the class name of image too.
css
.calculate__content__result_show{
display : block ;
}
jquery
$(document).on('click','.click',function(){
$('.calculate__content__result').toggleClass('calculate__content__result_show');
});
javascript
var clickBtn = document.querySelector('.click');
var result = document.querySelector('.calculate__content__result');
clickBtn.addEventListerner('click',function(){
result.classList.toggle('calculate__content__result_show');
});
Add an ID in the element you want to hide/show
<div id="imageDiv" class="col-lg-6 col-md-12 col-sm-12 calculate__content">
and add functions to hide/show with javascript at the the begining of the html
<script>
function showImage(){
document.getElementById("imageDiv").style.display = "block";
}
function hideImage(){
document.getElementById("imageDiv").style.display = "none";
}
</script>
Call the functions when needed, for example:
<button onclick="showImage()" class="button-secondary button__calculate">
Click
</button>
JQuery noob here, I'm trying to make appear/disappear divs depending on multiple form select options.
My problem is that the div hide successfully, but I can't manage to make them appear back again when an option is selected.
Here is my JQuery code
<script type="text/javascript">
$(document).ready(function () {
$('#areaFields').hide();
$('#areaItems').hide();
$('#areaPartners').hide();
$('#hidden3').hide();
$('#items').hide();
$('#partners').hide();
$('#fields').hide();
$('#hidden2').hide();
$('#block').hide();
$('#ORDER').hide();
$('#type').change(function () {
$('#ORDER').hide();
$('#' + $(this).val()).show();
});
});
</script>
and here is my HTML
<div class="container">
<div class="content-section">
<form method="POST" action="">
{{ form.hidden_tag() }}
<fieldset class="form-group">
<legend class="border-bottom mb-4">Customizing</legend>
<div class="container">
<div class="form-group default1">
<div class="row">
<div class="col">
<div id="taille" class="form-group">
{{ form.tailleDocX.label }}
{{ form.tailleDocX }}
{{ form.tailleDocY.label }}
{{ form.tailleDocY }}
</div>
</div>
</div>
<div class="row">
<div class="col">
<div id="type" class="form-group">
{{ form.type.label }}
{{ form.type }}
</div>
</div>
<div class="col">
<div id="customer" class="form-group">
{{ form.customer.label }}
{{ form.customer }}
</div>
</div>
</div>
</div>
<div id="ORDER" class="form-group">
<hr>
<div class="row">
<div class="col">
<div id="block" class="form-group">
{{ form.block.label }}
{{ form.block }}
</div>
</div>
</div>
<div id="hidden2" class="form-group">
<hr>
<div class="row">
<div class="col">
<div id="items" class="form-group">
{{ form.itemsFields.label }}
{{ form.itemsFields }}
</div>
<div id="partners" class="form-group">
{{ form.partnersFields.label }}
{{ form.partnersFields }}
</div>
<div id="fields" class="form-group">
{{ form.fields.label }}
{{ form.fields }}
</div>
</div>
</div>
</div>
<div id="hidden3" class="form-group">
<hr>
<div class="row">
<div class="col">
<div id="areaFields" class="form-group">
{{ form.areaFields }}
</div>
<div id="areaItems" class="form-group">
{{ form.areaItems }}
</div>
<div id="areaPartners" class="form-group">
{{ form.areaPartners }}
</div>
</div>
</div>
</div>
<div class="form-group default2">
<hr>
<div class="row">
<div class="col">
{{ form.submit }}
</div>
</div>
</div>
</div>
</div>
</fieldset>
</form>
</div>
To create the form I'm using WTForm from FLASK, if needed here is the code :
class AreaFields(FlaskForm):
area1 = IntegerField("X0")
area2 = IntegerField("X1")
area3 = IntegerField("Y0")
area4 = IntegerField("Y1")
textArea = StringField("Texte")
class AreaItems(FlaskForm):
name = StringField("Name")
class AreaPartners(FlaskForm):
area1 = IntegerField("X0")
area2 = IntegerField("X1")
area3 = IntegerField("Y0")
area4 = IntegerField("Y1")
rolePartners = SelectField("Role", id="role")
class AjouterForm(FlaskForm):
type = SelectField("Type",
choices=[("INVOICE", "invoice"), ("ORDER", "order"), ("SERVICE_REQUEST", "service_request")],
id="type")
block = SelectField("Block", choices=[("ITEMS", "items"), ("PARTNERS", "partners"), ("fields", "fields")],
id="block")
itemsFields = SelectField("Champs", id="items")
partnersFields = SelectField("Champs", id="partnersFields")
fields = SelectField("Champs", id="fields")
tailleDocX = IntegerField("Taille X", validators=[DataRequired()])
tailleDocY = IntegerField("Taille Y", validators=[DataRequired()])
customer = SelectField("Customer", choices=[("NotFinalData", "NotFinalData")])
areaFields = FormField(AreaFields)
areaItems = FormField(AreaItems)
areaPartners = FormField(AreaPartners)
submit = SubmitField('Voir le résumer')
For the moment what I want is : to hide all the div like I did, then show the div #ORDER if order is selected in the form, or to hide the div again if another option is selected, then I'll do the same for the others select and div once I can manage to make it work.
Thanks for reading !
Edit 1 : My first select that manage the first hide/show is form.type, it contains 3 options : INVOICE, ORDER, SERVICE_REQUEST
When I select INVOICE or SERVICE_REQUEST, everything must stay hide because thoose option aren't ready for the moment, but when I select ORDER, I wish to make appear the divs #ORDER and #block. #ORDER contains all the other divs specific to the ORDER option, #block contain another select that will make appear/disappear another div depending on the option selected.
Here is a picture to show the actual form without being hidden
The first select is Type, it must make appear Block if order is selected, and block make appear a Champs depending on the option selected.
Edit 2 : BIG NEWS, I just found out what was my problem, it's so dumb of me for not seeing this at first, I used the same ID for the div and for the WTForm select... so basicly I was checking for changement for the div and not for the select... I just feel so dumb right now, thank you for trying to help me !
You just have to hide only the element your previously showed. your code should look like this.
<script type="text/javascript">
$(document).ready(function () {
var current_element = '';
$('#areaFields').hide();
$('#areaItems').hide();
$('#areaPartners').hide();
$('#hidden3').hide();
$('#items').hide();
$('#partners').hide();
$('#fields').hide();
$('#hidden2').hide();
$('#block').hide();
$('#ORDER').hide();
$('#type').change(function () {
var id = $(this).val()
$('#' + id).show();
// hide previously showed element
if(current_element != '') $('#' + current_element).hide();
// store id of previously selected element
current_element = id
});
});
</script>
I am trying to make a mod on an existing app. All I want to do is create an href that contains a url, but using the handlebars lookup function. When I try it just returns a blank value.
Here is my function:
var cardLink = function generateCardLink() {
var url = `"url/container-scan-reports/${vendor}/${product}/${image}"`
return url;
}
//...
res.render('vendor', {
title: 'Vendor Images',
images: images,
tags: tags,
cardLink: cardLink
});
I am then trying to pass in href this way on the top div of template.
<div class="row row-cards-pf ">
{{#each images}}
<div href={{lookup ../cardLink #index }} class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<div class="card-pf card-pf-view card-pf-view-select card-pf-view-single-select">
<div class="card-pf-body">
<div class="card-pf-top-element">
<span class="pficon-image card-pf-icon-circle"></span>
</div>
<h2 class="card-pf-title text-center">
{{ this }}
</h2>
<div class="card-pf-items text-center">
<div class="card-pf-item">
{{{ lookup ../tags #index}}}
</div>
</div>
<!-- <p class="card-pf-info text-center"><strong>Most recent image</strong> {{ lookup ../mostRecentImages #index}}</p> -->
</div>
<div class="card-pf-view-checkbox">
<input type="checkbox">
</div>
</div>
</div><!-- /col -->
{{/each}}
Can anyone help me?
You don't need lookup in this case. I think you want to display the url, so #index is not the right reference. Try it this way:
<div href={{../cardLink}} class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
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 the following code -
<div ng-attr-title="{{myProductName}}!" class="col-md-4 col-sm-4 col-xs-12 align-center whitecolor fontSize28 headerText">
{{ myProductName}}!
</div>
and in my HTML elements on chrome developer tool:
<div ng-attr-title="{{ myProductName}}!" class="col-md-4 col-sm-4 col-xs-12 align-center whitecolor fontSize28 headerText ng-binding" title="Welcome to , !">
Welcome to, !
</div>
But, the "Product Name (Say "ABCD" is not displaying. What might be the problem? I use AJS 1.3.x
My controller:
products.productName = $http.defaults.headers.common[PROD_CONST.PROD_NAME];
if (products.productName !== 'SM_PROD') {
products.productName = products.productName;
} else {
products.productName = '';
}