I'm trying to get handsonTable implemented in a salesforce lightning web component.
I understand that the audience here might not have Salesforce knowledge, but hoping to work together to find out what the problem could be.
Below is a very basic implementation taken from the examples, but extremely simplified.
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/handsontable#latest/dist/handsontable.full.min.css">
<link rel="stylesheet" type="text/css" href="https://handsontable.com/static/css/main.css">
<script src="https://cdn.jsdelivr.net/npm/handsontable#latest/dist/handsontable.full.min.js"></script>
</head>
<body>
<div id="hot"></div>
<script>
var dataObject = [{
id: 1,
currency: 'Euro'
}, {
id: 2,
currency: 'Japanese Yen'
}];
var hotElement = document.querySelector('#hot');
var hotElementContainer = hotElement.parentNode;
var hotSettings = {
data: dataObject,
columns: [{
data: 'id',
type: 'numeric',
width: 40
}, {
data: 'currency',
type: 'text'
}],
rowHeaders: true,
colHeaders: [
'ID',
'Currency'
]
};
var hot = new Handsontable(hotElement, hotSettings);
</script>
</body>
</html>
In order to use external libraries in Salesforce Lightning Web Components (LWC), I am using the format mentioned in https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.create_third_party_library
Modifying the HTML code above to the format mentioned gives me the LWC JS file as
import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';
import handsonTableResource from '#salesforce/resourceUrl/handsonTable';
export default class handsonTable extends LightningElement {
dataObject = [
{
id: 1,
currency: 'Euro'
},
{
id: 2,
currency: 'Japanese Yen'
}
];
renderedCallback() {
Promise.all([
loadScript(this, handsonTableResource + '/handsontable.full.js'),
loadStyle(this, handsonTableResource + '/handsontable.full.css')
])
.then(() => {
this.initialiseHandsOnTable();
})
.catch(error => {
alert(error);
});
}
hotElement;
hotSettings;
initialiseHandsOnTable() {
this.hotElement = this.template.querySelector('div.hotElement');
this.hotSettings = {
data: this.dataObject,
columns: [
{
data: 'id',
type: 'numeric',
width: 40
},
{
data: 'currency',
type: 'text'
}
],
rowHeaders: true,
colHeaders: [
'ID',
'Currency'
]
};
new Handsontable(this.hotElement, this.hotSettings);
}
}
and the LWC html as
<template>
<div class="slds-m-around_medium">
<div class="hotElement" lwc:dom="manual"></div>
</div>
</template>
Applying these, gives me the result as below in Salesforce
(source: handsontable.com)
The DOM generated is as below
<c-handson-table data-data-rendering-service-uid="188" data-aura-rendered-by="322:0">
<div class="slds-m-around_medium">
<div class="hotElement handsontable htRowHeaders htColumnHeaders" id="ht_917e38abdce11495">
<div class="ht_master handsontable" style="position: relative; overflow: visible;">
<div class="wtHolder" style="position: relative; overflow: visible;">
<div class="wtHider">
<div class="wtSpreader" style="position: relative;">
<table class="htCore">
<colgroup></colgroup>
<thead>
<tr></tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
<div class="ht_clone_top handsontable" style="position: absolute; top: 0px; left: 0px; overflow: hidden;">
<div class="wtHolder" style="position: relative;">
<div class="wtHider">
<div class="wtSpreader" style="position: relative;">
<table class="htCore">
<colgroup></colgroup>
<thead>
<tr></tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
<div class="ht_clone_bottom handsontable" style="position: absolute; top: 0px; left: 0px; overflow: hidden;">
<div class="wtHolder" style="position: relative;">
<div class="wtHider">
<div class="wtSpreader" style="position: relative;">
<table class="htCore">
<colgroup></colgroup>
<thead>
<tr></tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
<div class="ht_clone_left handsontable" style="position: absolute; top: 0px; left: 0px; overflow: hidden;">
<div class="wtHolder" style="position: relative;">
<div class="wtHider">
<div class="wtSpreader" style="position: relative;">
<table class="htCore">
<colgroup></colgroup>
<thead>
<tr></tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
<div class="ht_clone_top_left_corner handsontable" style="position: absolute; top: 0px; left: 0px; overflow: hidden;">
<div class="wtHolder" style="position: relative;">
<div class="wtHider">
<div class="wtSpreader" style="position: relative;">
<table class="htCore">
<colgroup></colgroup>
<thead>
<tr></tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div id="hot-display-license-info">The license key for Handsontable is missing. Use your purchased key to activate the product. Alternatively, you can activate Handsontable to use for non-commercial purposes by passing the key: 'non-commercial-and-evaluation'. <a target="_blank" href="https://handsontable.com/docs/tutorial-license-key.html">Read more</a> about it in the documentation or contact us at support#handsontable.com.</div>
</div>
</c-handson-table>
As you can see the DOM structure is being generated for handsonTable but none of the data or columns are being generated.
I do not see any errors or warning on the Chrome Dev Tools console (except the license warning from handson table)
One observation I found is that the row count seems to reflect what we see on screen.
a.countRows();
--> 2
a.countEmptyRows();
--> 0
a.countVisibleRows();
--> -1
a.countRenderedRows();
--> -1
I have been able to publish the implementation on a public facing URL. You can access my implementation at https://sandbox-business-java-1763-16aaf9f33bb.cs6.force.com/
I have added a debugger at the start of the initialiseHandsOnTable function to help.
Any assistance would be greatly appreciated.
The problem could be with Salesforce Locker Service.
Locker service restricts the scope of DOM navigation and manipulation allowed by components.
Debugging the script we found that the isVisible(elem) function was trying to navigate all the way up to the top level HTML node (which was blocked by the Locker Service).
The answer at https://forum.handsontable.com/t/handsontable-within-the-salesforce-locker-service/1014 helped in fixing this.
We updated the the isVisible(elem) function as below:
Change
next = next.parentNode; to
if(next.parentNode != null)
next = next.parentNode;
else
return true;
Now, the solution works.
Related
Need to open a pop-up along with cell data from DB based on the type on on ag-grid table by using the survey tag id?
I can able to fetch the survey tag id
emoji = () =>{
isPopup()=true;
}
onCellClicked = event => {
console.log(event);
let tag = event.data.survey_tag_id;
console.log(tag);
const column = event.colDef;
if (column.headerName === "emoji" ){
this.emoji();
}else{
this.showNotification("clicked", "success");
}
console.log(
"onCellClicked: " + event.data.name + ", col " + event.colIndex
);
};
maybe this answer can help, but this applies in angular sorry if you can not translate it into the react
parent.html
<div >
<ag-grid-angular
style="width: 100%; height: 750px; border-radius: 5px; text-align: left;"
class="ag-theme-balham-dark"
[rowData]="rowData"
[columnDefs]="columnDefs"
[enableFilter]="true"
[enableSorting]="true"
[defaultColDef]="defaultColDef"
[rowSelection]="rowSelection"
[animateRows]="true"
[enableStatusBar]="true"
[enableColResize]="true"
[enableRangeSelection]="true"
[alwaysShowStatusBar]="false"
(gridReady)="onGridReady($event)"
(cellClicked)="onCellClicked($event)"
>
</ag-grid-angular>
</div>
parent.ts
graphAlarm(apn:any): void {
const dialogRef = this.dialog.open(graphAlarm, {
width: '1000px',
height: '700px',
data : apn,
});
dialogRef.afterClosed().subscribe(result => {
});
}
onCellClicked(event){
this.graphAlarm(event)
console.log('get dialog : ',event.data)
}
in this part pop up or dialog in angular material graphAlarm child/part from file parent
graphAlarm.ts
#Component({
selector: 'graph-alarm',
templateUrl: '
<div>
<div class="row">
<div class="row col-sm-8">
<div class="col">
{{name.kpi}}
</div>
<div class="col">
<mat-icon>help</mat-icon>
</button>
</div>
</div>
<div class="col-sm-4">
<button style="border-radius: 10px; background-color: #044c94;color: white" (click)="sendChangeThreshold()">
save
</button>
</div>
</div>
<div class="row">
<div class="col-sm-8" style="border-radius: 10px;">
<div class="row" style="font-size: 12px; ">
<table id="table" mat-table [dataSource]="dataSource.nameKPI" class="mat-elevation-z8"
style="width: 100%; background-color: #230162; color: white;">
<!-- Position Column -->
<ng-container matColumnDef="header">
<th mat-header-cell *matHeaderCellDef style="color: white;"> KPI</th>
<td mat-cell *matCellDef="let element" style="color: white;"> {{element.header}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="threshold_up">
<th mat-header-cell *matHeaderCellDef style="color: white; text-align: center;"> Threshold Up | 4G</th>
<td mat-cell *matCellDef="let element">
<input *ngIf="element.threshold_up && element.header != 'Throughput'"
(change)="save(element.header,'up',thresholdUp.value)"
style="width: 150px; border-radius: 15px; text-align: center; background-color: #230162; color: white;"
ngModel="{{element.threshold_up}}" #thresholdUp>
<input *ngIf="element.threshold_up && element.header == 'Throughput'"
style="width: 150px; border-radius: 15px; text-align: center; background-color: #230162; color: white;"
ngModel="{{element.threshold_up}}" disabled>
<input *ngIf="element.threshold_up_4g"
(change)="save(element.header,'4g up',thresholdUp4G.value)"
style="width: 150px; border-radius: 15px; text-align: center; background-color: #230162; color: white;"
ngModel="{{element.threshold_up_4g}}" #thresholdUp4G>
<!-- (input)="onSearchChange($event.target.value)">-->
</td>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="threshold_down">
<th mat-header-cell *matHeaderCellDef style="color: white; text-align: center;"> Threshold Down | 4G</th>
<td mat-cell *matCellDef="let element">
<input *ngIf="element.threshold_down && element.header != 'Throughput'"
(change)="save(element.header,'low',thresholdDown.value)"
style="width: 150px; border-radius: 15px; text-align: center; background-color: #230162; color: white;"
ngModel="{{element.threshold_down}}" #thresholdDown>
<!-- (input)="onSearchChange($event.target.value)">-->
<input *ngIf="element.threshold_down && element.header == 'Throughput'"
style="width: 150px; border-radius: 15px; text-align: center; background-color: #230162; color: white;"
ngModel="{{element.threshold_down}}" disabled>
<input *ngIf="element.threshold_down_4g"
(change)="save(element.header,'4g low',threshold4GDown.value)"
style="width: 150px; border-radius: 15px; text-align: center; background-color: #230162; color: white;"
ngModel="{{element.threshold_down_4g}}" #threshold4GDown>
<!-- (input)="onSearchChange($event.target.value)">-->
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
</div>
<div class="col-sm-4" style="border-radius: 10px; padding-top: 15px; text-align: center;">
<div class="box_down">
<div class="material-icons" style="font-size: 100px;">note_add</div>
<input style="padding-bottom: 10px;font-size: 10px;" type="file" (change)="fileChange($event)"
placeholder="Upload file" accept=".pdf,.doc,.docx">
<div class="listFile">
list file
</div>
</div>
<br>
<div class="box_down1">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Alarm Triggered</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck2">
<label class="custom-control-label" for="customCheck1">Telegram Bot Alarm</label>
</div>
</div>
</div>
</div>
</div>
',
styleUrls: ['graph-alarm.scss'],
animations: [
trigger('detailExpand', [
state('collapsed', style({height: '0px', minHeight: '0'})),
state('expanded', style({height: '*'})),
transition(
'expanded <=> collapsed',
animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')
)
])
]
})
export class graphAlarm implements OnInit {
constructor(
public apn_service: ApnDashboardService,
private _snackBar: MatSnackBar,
public dialogRef: MatDialogRef<graphAlarm>,
#Inject(MAT_DIALOG_DATA) public selected_apn: any,
) {
console.log('anu tour', selected_apn.nameKPI);
this.dataSource = selected_apn;
this.kpi_threshold_up = selected_apn.threshold_up;
}
ngOnInit() {
}
onNoClick(): void {
this.dialogRef.close();
}
}
This is my HTML:
<div ng-repeat="product in productsCurrency"
value="{{product}}"
style="margin-bottom: 0px;">
<div style="display: inline-flex; width: calc(100% - 10px);margin-bottom: 0px;height: 90px; padding-left: 10px !important;"
class="row"
ng-class="{'beacon_shipping_selected': $root.shippingMethod == (product.id + ''),
'beacon_padding_bottom': $root.isUsingDevice}">
<input checked
id="{{product.id}}"
type="radio"
name="shipping_method"
value="{{product.id}}"
ng-model="$root.shippingMethod"
style="align-self: center;">
<label for="{{product.id}}"
ng-class="{'beacon_margin_left': $root.isUsingDevice === false}"
style="margin-top: 28px; margin-left: 5px;">
</label>
<span style="margin-left: 10px; width: calc(100% - 120px);margin-bottom: 20px;">
<p class="beacon_text beacon_text_title beacon_shipping_title" style="font-weight: 400 !important;">
{{ product.name}}
</p>
<p class="beacon_text beacon_shipping_subtitle">
{{ product.description}}
</p>
</span>
<span class="beacon_text beacon_sum beacon_shipping_sum"
ng-class="{'beacon_shipping_sum_selected': $root.shippingMethod == (product.id + ''),
'beacon_sum_mobile': $root.isUsingDevice}">
{{unit.currencySymbol(product.currency) + roundPrice(product.price,1)}}
</span>
</div>
<div style="width: 100%; height: 1px; background: #979797;"
ng-class="{'beacon_remove_margin_divider': $root.isUsingDevice === false}">
</div>
</div>
I am using AngularJS and it goes through a list of products, and creates a div (view) for all of them.
Now I want the <input> that I have included in the div, to be selected when the user pressed on the view. How can I achieve this?
This is actually simple to achieve. You can use label for every product row and put content inside it as shown below.
It seems that you're trying to adjust a lot to create a product row with inline CSS styles. I suggest that you use CSS flexbox properties to achieve a predictable layout without doing a lot of width, height, margin related properties, only if you need further help on this.
angular.module('ExampleApp', [])
.controller('ExampleController', function($scope) {
console.log('ExampleController');
$scope.productsCurrency = [
{
id: 1,
name: 'Product 1'
},
{
id: 2,
name: 'Product 2'
},
{
id: 3,
name: 'Product 3'
}
]
});
.layout,
.layout-row,
.layout-column {
display: flex;
}
.layout-row {
flex-direction: row;
}
.layout-column {
flex-direction: column;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ExampleApp" ng-controller="ExampleController">
<div ng-repeat="product in productsCurrency"
value="{{product}}"
style="margin-bottom: 0px;">
<label for="{{product.id}}" style="display: inline-flex; width: calc(100% - 10px);margin-bottom: 0px;height: 90px; padding-left: 10px !important;"
class="row"
ng-class="{'beacon_shipping_selected': $root.shippingMethod == (product.id + ''),
'beacon_padding_bottom': $root.isUsingDevice}">
<input checked
id="{{product.id}}"
type="radio"
name="shipping_method"
value="{{product.id}}"
ng-model="$root.shippingMethod"
style="align-self: center;">
<div for="{{product.id}}"
ng-class="{'beacon_margin_left': $root.isUsingDevice === false}"
style="margin-top: 28px; margin-left: 5px;">
</div>
<span style="margin-left: 10px; width: calc(100% - 120px);margin-bottom: 20px;">
<p class="beacon_text beacon_text_title beacon_shipping_title" style="font-weight: 400 !important;">
{{ product.name}}
</p>
<p class="beacon_text beacon_shipping_subtitle">
{{ product.description}}
</p>
</span>
<span class="beacon_text beacon_sum beacon_shipping_sum"
ng-class="{'beacon_shipping_sum_selected': $root.shippingMethod == (product.id + ''),
'beacon_sum_mobile': $root.isUsingDevice}">
{{unit.currencySymbol(product.currency) + roundPrice(product.price,1)}}
</span>
</label>
<div style="width: 100%; height: 1px; background: #979797;"
ng-class="{'beacon_remove_margin_divider': $root.isUsingDevice === false}">
</div>
</div>
</div>
I used a ng-click on the div like this:
HTML:
<div style="display: inline-flex; width: calc(100% - 10px);margin-bottom: 0px;height: 90px; padding-left: 10px !important;" class="row" ng-class="{'beacon_shipping_selected': $root.shippingMethod == (product.id + ''), 'beacon_padding_bottom': $root.isUsingDevice}" ng-click="selectInput(product.id)">
JS:
$scope.selectInput = function(input) {
$rootScope.shippingMethod = input;
};
My input watches $rootScope.shippingMethod, so it will change accordingly
I have a multiple tab Html page . On one tab i have add 3 input box and an add button. Whenever the add button is clicked the data to be added into a grid below. But scope is not accessing these variables. Attaching my code below :
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div id="tabs">
<ul>
<li ng-repeat="tab in tabs"
ng-class="{active:isActiveTab(tab.url)}"
ng-click="onClickTab(tab)">{{tab.title}}</li>
</ul>
<div id="mainView">
<div ng-include="currentTab"></div>
</div>
</div>
<script type ="text/javascript" id="one.tpl.html">
<div class="form-group">
<label class="col-md-2 control-label">Name</label>
<div class="col-md-4">
<input type="text" class="form-control" name="name"
ng-model="names" />{{name}}
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Employees</label>
<div class="col-md-4">
<input type="text" class="form-control" name="employees"
ng-model="employeess" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Headoffice</label>
<div class="col-md-4">
<input type="text" class="form-control" name="headoffice"
ng-model="headoffices" />
</div>
</div>
<div class="form-group">
<div style="padding-left:110px">
<input type="button" value="Add" ng-click="addRow()" class="btn btn-primary"/>
</div>
</div>
<div>
<table class="table">
<tr>
<th>Name
</th>
<th>Employees
</th>
<th>Head Office
</th>
</tr>
<tr ng-repeat="company in companies">
<td>{{company.name}}
</td>
<td>{{company.employees}}
</td>
<td>{{company.headoffice}}
</td>
</tr>
</table>
</div>
</script>
<script type="text/ng-template" id="two.tpl.html">
<div id="viewTwo">
<h1>View Two</h1>
<p>Test 2</p>
</div>
</script>
<script type="text/ng-template" id="three.tpl.html">
<div id="viewThree">
<h1>View Three</h1>
<p>Test 3</p>
</div>
</script>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.companies = [];
$scope.tabs = [{
title: 'One',
url: 'one.tpl.html'
}, {
title: 'Two',
url: 'two.tpl.html'
}, {
title: 'Three',
url: 'three.tpl.html'
}];
$scope.currentTab = 'one.tpl.html';
$scope.onClickTab = function(tab) {
$scope.currentTab = tab.url;
}
$scope.isActiveTab = function(tabUrl) {
return tabUrl == $scope.currentTab;
}
$scope.addRow = function(){
$scope.companies.push({ 'name':$scope.names, 'employees': $scope.employeess, 'headoffice':$scope.headoffices });
$scope.names='';
$scope.employeess='';
$scope.headoffices='';
}
});
</script>
<style>
#tabs ul {
list-style: none;
padding: 0;
margin: 0;
}
#tabs li {
float: left;
border: 1px solid #000;
border-bottom-width: 0;
margin: 3px 3px 0px 3px;
padding: 5px 5px 0px 5px;
background-color: #CCC;
color: #696969;
}
#mainView {
border: 1px solid black;
clear: both;
padding: 0 1em;
}
.active {
background-color: #FFF;
color: #000;
}
</style>
</body>
</html>
Following variables are not accessible in scope :
$scope.names
$scope.employeess
$scope.headoffices
That's because ng-template creates child scope, so you can basically do one of 2 things:
Access properties via $parent (like $parent.employeess). Example:https://plnkr.co/edit/2LLakRumEB25wyNhNmDg?p=preview)
Define object for new item like below.
Example:
https://plnkr.co/edit/sFkim5WwN5ffPsWtdcDP?p=preview
$scope.newRow = {
names: '',
employeess: '',
headoffices: ''
}
And access them via the same prefix:
ng-model="newRow.employeess"
Explanation:
Scopes have common structure, where $parent property is the parent scope e.t.c up to $rootScope.
When you're using ng-template it creates a new child scope, so the values, assigned within it are stored in the child scope and not in $parent (your controllers scope). The values you're searching for are in child scope because ng-model works in current scope. So you need to make sure that ng-model knows which scope to write. It can be done via $parent parameter or within object. As for 2nd option - the reason is simple. Object value can't be assigned when object is undefined, so search goes to upper level and so on.
I'm using slider in my web, it works when i used it in a simple page without Angular, but when i using Angular routing it does not work!! it makes me confuse, what is the problem?
this is the slider:
<div id="leo-slideshow" class="clearfix">
<div class="banner" style="padding-right: 20px !important;height:375px;padding: 0px; margin: 0px; overflow: visible;">
<div class="columns-container">
<div id="columns" class="container">
<div id="slider_row" class="row">
<div id="top_column" class="center_column col-xs-12 col-sm-12 col-md-12">
<!-- Module HomeSlider -->
<div id="homepage-slider" class="col-xs-8 col-sm-8 col-md-8">
<div class="bx-wrapper" style="max-width: 779px; margin: 0px auto;">
<div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 448px;">
<ul id="homeslider" style="max-height: 448px; width: 515%; position: relative; left: -2336.98px;">
<li class="homeslider-container" style="float: left; list-style: none; position: relative; width: 779px;">
<a href="http://www.prestashop.com/?utm_source=back-office&utm_medium=v16_homeslider&utm_campaign=back-office-EN&utm_content=download" title="sample-2">
<img src="~/Content/Images/Slider/sample-2.jpg" width="779" height="448" alt="sample-2">
</a>
</li>
<li class="homeslider-container" style="float: left; list-style: none; position: relative; width: 779px;">
<a href="http://www.prestashop.com/?utm_source=back-office&utm_medium=v16_homeslider&utm_campaign=back-office-EN&utm_content=download" title="sample-3">
<img src="~/Content/Images/Slider/sample-3.jpg" width="779" height="448" alt="sample-3">
</a>
</li>
<li class="homeslider-container bx-clone" style="float: left; list-style: none; position: relative; width: 779px;">
<a href="http://www.prestashop.com/?utm_source=back-office&utm_medium=v16_homeslider&utm_campaign=back-office-EN&utm_content=download" title="sample-1">
<img src="~/Content/Images/Slider/sample-1.jpg" width="779" height="448" alt="sample-1">
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- /Module HomeSlider -->
<div id="htmlcontent_top " class="animation_group_165 animated fadeInUp ">
<ul class="htmlcontent-home clearfix row">
<li class="htmlcontent-item-1 col-xs-4 col-sm-4 col-md-4 pull-left ">
<a href="http://www.prestashop.com/" class="item-link" title="">
<img src="~/Content/Images/SitePic/banner-img6.jpg" class="item-img " title="" alt="" width="381" height="219">
</a>
</li>
<li class="htmlcontent-item-2 col-xs-4 col-sm-4 col-md-4 ">
<a href="http://www.prestashop.com/" class="item-link" title="">
<img src="~/Content/Images/SitePic/banner-img7.jpg" class="item-img " title="" alt="" width="381" height="219">
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
and the script:
$(document).ready(function(){
if (typeof(homeslider_speed) == 'undefined')
homeslider_speed = 500;
if (typeof(homeslider_pause) == 'undefined')
homeslider_pause = 3000;
if (typeof(homeslider_loop) == 'undefined')
homeslider_loop = true;
if (typeof(homeslider_width) == 'undefined')
homeslider_width = 779;
$('.homeslider-description').click(function () {
window.location.href = $(this).prev('a').prop('href');
});
if ($('#htmlcontent_top').length > 0)
$('#homepage-slider').addClass('col-xs-8');
else
$('#homepage-slider').addClass('col-xs-12');
if (!!$.prototype.bxSlider)
$('#homeslider').bxSlider({
useCSS: false,
maxSlides: 1,
slideWidth: homeslider_width,
infiniteLoop: homeslider_loop,
hideControlOnEnd: true,
pager: false,
autoHover: true,
auto: homeslider_loop,
speed: parseInt(homeslider_speed),
pause: homeslider_pause,
controls: true
});
});
Note: i am using bxslider.
I have simple angularjs tab on html and i want to post the data to rest based api.
My Query is how to get the control value from tab and post to rest based api
Here i my code...
I have tired several example to getting tabs,but got no success.
validationApp.controller('TabsCtrl', function($scope, $http, $location, $window, $routeParams) {
var headerValue = $routeParams.auth;
alert(headerValue);
$scope.tabs = [{
title: 'Upload Configuration',
url: 'upload.tab.html'
}
];
$scope.currentTab = 'upload.tab.html';
$scope.onClickTab = function(tab) {
$scope.currentTab = tab.url;
}
$scope.isActiveTab = function(tabUrl) {
return tabUrl == $scope.currentTab;
}
$scope.uploadFile = function(vmUploadme, myName) {
var fd = new FormData();
//Take the first selected file
// fd.append("file", files[0]);
debugger;
fd.append("file", $scope.vmUploadme);
fd.append("name", $scope.myName);
alert($routeParams.auth);
uploadUrl = "MyLinktoRESTBASEAPIupload1";
$http.post(uploadUrl, fd, {
withCredentials: true,
headers: {
'Content-Type': undefined,
'Authorization': $routeParams.auth
},
transformRequest: angular.identity
}).
success(function(data, status, headers, config) {
alert(data);
//TODO
}).
error(function(data, status, headers, config) {
alert("failure");
});
};
});
<style>
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
float: left;
border: 1px solid #000;
border-bottom-width: 0;
margin: 3px 3px 0px 3px;
padding: 5px 2px 5px 5px;
background-color: #CCC;
font: 12px tahoma, arial, verdana, sans-serif;
color: #696969;
}
#mainView {
border: 1px solid black;
clear: both;
padding: 0 1em;
height: 450px;
}
.active {
background-color: #FFF;
color: #000;
}
</style>
<!DOCTYPE html>
<html>
<head>
<!-- JS -->
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script src="script/angular/js/angular.js"></script>
<script src="script/angular/js/angular-route.min.js"></script>
<script src="script/angular/js/ngProgress.js"></script>
<script src="script/custom/js/app.js"></script>
<script src="script/custom/js/landingPage.js"></script>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body id="ng-app" ng-app="LoginApp">
<script type="text/ng-template" id="html/login.html">
<div ng-controller="mainController">
<form name="userForm" ng-submit="submitForm()" novalidate>
<div id="area" class="area">
</div>
</form>
</div>
</script>
<div ng-view></div>
<script type="text/ng-template" id="html/landingPage.html">
<div id="tabs" ngController="TabsCtrl" class="area">
<table class="stdTable" border="0">
<tr>
<td>
<table width="100%" height="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<cols width="95%">
<cols width="5%">
<tr>
<td rowspan="3" align="center">
<h2> Landing Page</h2>
</td>
<td align="right">
<a ng-click="logout();">
<label class="avLogin-Label">Logout</label>
</a>
</td>
</tr>
<tr>
<td align="right">
<label class="avLogin-Label">Status:Running</label>
</td>
</tr>
<tr>
<td align="right">
<label class="avLogin-Label">Welcome:Administrator</label>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="100%">
<ul>
<li ng-repeat="tab in tabs" ng-class="{active:isActiveTab(tab.url)}" ng-click="onClickTab(tab)">{{tab.title}}</li>
</ul>
<div id="mainView">
<div ng-include="currentTab"></div>
</div>
</td>
</tr>
</table>
</div>
</script>
<script type="text/ng-template" id="upload.tab.html">
<div id="viewOne">
<h1>View One</h1>
<input type="text" name="name" ng-model="myName" />
<input type="file" fileread="vmUploadme" />
<input type="button" name="button" value="Upload" ng-click='uploadFile(vmUploadme,myName)' />
</div>
</script>
<script type="text/ng-template" id="bulk.tab.html">
<div id="viewTwo">
<h1>View Two</h1>
<h2> Bulk User Setup </h2>
{{message}}
</div>
</script>
</body>
</html>
The Problem was with scope of div in angularjs
$scope.upload = { fileName: '', uploadFile: '' };
$scope.uploadFile = function(){
alert($scope.upload.uploadFile);
}