html wont render using ng-bind-html-unsafe - html

i was able to break string to chars array and surround each char in <span></span> but when im trying to pass this array to table the html wont render.
breaking the string:
//parse cron_format and edit each digit individually
$scope.parse = function (cron_format){
var parsed = cron_format.split('');
for(var i = 0; i < parsed.length; i++) {
parsed[i] = '<span>' + parsed[i] + '</span>';
}
return parsed;
}
when i try to create the table like this:
<table class="table table-bordered table-hover">
<thead>
<td>user name</td>
<td>script name</td>
<td>cron format</td>
</thead>
<tbody ng-repeat="(user_id,script_id) in data | filter: test">
<tr ng-repeat="(script_id, cron_format) in script_id">
<td>{{user(user_id)}}</td>
<td>{{script(script_id)}}</td>
<td ng-bind-html-unsafe="{{parse(cron_format)}}"></td>
</tr>
</tbody>
</table>
there are no values in cron_format:
without trying to render -> <td>{{parse(cron_format)}}</td>
the table looks like this:
what am i doing wrong?
UPDATE:
i changed function's two last rows :
$scope.parsed.htmlSafe = $sce.trustAsHtml(parsed.html);
return parsed;
and i get this error:
Can't interpolate: {{parse(cron_format)}}
TypeError: Cannot set property 'htmlSafe' of undefined
can someone explain whats the mistake im doing here?

Related

GEt element By id angular 7

hello I need to retrieve the values entered by a form after the post method so I inserted at the service level this code :
list:Client[];
constructor(private http:HttpClient) { }
postClient(formData:Client){
return this.http.post(this.rootURL+'/Clients/',formData);
}
putClient(formData:Client){
return this.http.put(this.rootURL+'/Clients/'+formData.Engagement,formData);
}
getClient(formData:Client){
return this.http.get(this.rootURL+'/Clients/GetClientByName/'+formData.Engagement);
}
and at the component level like this :
getClient(form:NgForm){
this.clientservice.getClient(form.value).subscribe(
res =>{this.client = res as Client}
)
}
and in the HTML code this:
<table class="table table-hover">
<tr>
<th class="tname">Client</th>
<th class="tname">Enagement</th>
<th class="tname">ERP</th>
</tr>
<tr *ngFor="let clt of client">
<td >{{clt.Clientname}}</td>
<td >{{clt.Engagement}}</td>
<td >{{clt.ERP}}</td>
and I can’t get the values by ID with the get I don’t know what is the problem I have neither result or error message
I think your http service(this.rootURL+'/Clients/GetClientByName/) return Client[] not Client.
So, You should cast like this.
this.clientservice.getClient(form.value).subscribe(
res =>{this.client = res as Client[]}
)
But, your response is fixed
{"Engagement":"56789","Clientname":"ClLIENT","ERP":"ERP"}
at component level, no need to edit
getClient(form:NgForm){
this.clientservice.getClient(form.value).subscribe(
res =>{this.client = res as Client}
)
}
you should edit html file.
<table class="table table-hover">
<tr>
<th class="tname">Client</th>
<th class="tname">Enagement</th>
<th class="tname">ERP</th>
</tr>
<tr>
<td >{{client.Clientname}}</td>
<td >{{client.Engagement}}</td>
<td >{{client.ERP}}</td>
</tr>
---------------------------
or need to use ngFor loop, edit component level. and no need to edit component level.
client: Client[] = [];
getClient(form:NgForm){
this.clientservice.getClient(form.value).subscribe(
res =>{
const cli = res as Client;
this.client.length = 0;
Array.prototype.push.apply(this.client, cli)
}
)
}

Change columns of a table in WordPress

I have a large table in WordPress, I need to change the order of the columns, but I have to do it manually every time, when I need. Is there any plugin out there, in which all table loads up and I drag and drop the whole column from there as my choice?
The website is here
Based on your question, i can give you a demo to show you how to move forward with your requirements.
Please check this UPDATED FIDDLE. As you requested we are using Dragtable js.
Once sorting is completed we checks each row of the table finds each column of the respective row and create a json tree structure.
Html
<table id="sort_table">
<thead>
<tr>
<th></th>
<th class="draggable">Col1</th>
<th class="draggable">Col2</th>
<th class="draggable">Col3</th>
<th class="draggable">Col4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row1</td>
<td>Data11</td>
<td>Data12</td>
<td>Data13</td>
<td>Data14</td>
</tr>
<tr>
<td>Row2</td>
<td>Data21</td>
<td>Data22</td>
<td>Data23</td>
<td>Data24</td>
</tr>
<tr>
<td>Row3</td>
<td>Data31</td>
<td>Data32</td>
<td>Data33</td>
<td>Data34</td>
</tr>
<tr>
<td>Row4</td>
<td>Data41</td>
<td>Data42</td>
<td>Data43</td>
<td>Data44</td>
</tr>
</tbody>
</table>
JS (UPDATED)
$(document).ready(function() {
$('#sort_table').dragtable({
dragaccept: '.draggable',
beforeStop: function() {
var tree = {};
var rows = [];
$('#sort_table tr').each(function() {
var col_count = 0;
var cols = [];
$(this).children().each(function() {
cols[col_count] = $(this).html();
col_count++;
});
rows.push(cols);
});
tree.data = rows;
var tree_json = JSON.stringify(tree); // use the variable to save to DB
console.log(tree_json);
}
});
});
You can save the variable tree_json to database (Call ajax to php and save to DB)
On each page load you could take the value from database to a variable and using json_decode to make the string a json object
$table_structure = ; // Code to take from db
$table_structure = json_decode($table_structure);
You can copy and paste json from console to check if its valid using JSONLint

Bind first value and remove all other repeating value from a ng-repeat

I have a scenario to bind a html table using angular js. In my table i need to show an a tag based on another column value(Payment Status). If its fully paid no need to show the a tag, else need to show it for very next element. I am a new one in angular.
<table>
<thead>
<tr>
<th>Month</th>
<th>Installement</th>
<th>PaymentAmount</th>
<th>PaymentDate</th>
<th>Payment Status</th>
<th>Pay</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="row in rowCollection|orderBy:type:reverse|filter:searchKeyword|itemsPerPage:maxsize">
<td>{{row.Month}}</td>
<td>{{row.MonthlyInstallement}}</td>
<td>{{row.PaymentAmount}}</td>
<td>{{row.PaymentDate}}</td>
<td>{{row.PaymentStatus}}</td>
<td ng-if="row.PaymentStatus == 'UNPAID'">
Pay Online
</td>
<td ng-if="row.PaymentStatus == 'FULLY_PAID'">
</td>
</tr>
</tbody>
</table>
function bindFinanceDetails() {
var finUrl = baseurl + 'api/FinancialStatement/GetCarFinanceInfo';
var req = {
method: 'post',
data: {
LoginID: LoginID,
ContractNumber: 11170200669,
CustomerId: 2355898046
},
url: finUrl,
headers: {
RequestedPlatform: "Web",
RequestedLanguage: cookiePreferredLanguage,
Logintoken: $cookieStore.get('LoginToken'),
LoginId: LoginID
}
};
$http(req).then(function(response) {
var getData = response.data.FinanceList;
$scope.rowCollection = getData;
}, function(error) {
toastr.error($filter('translate')('Error Occured'));
});
}
A quite hacky solution will be something like the following (just showing you the needed change in the unpaid td element):
<td ng-if="row.PaymentStatus === 'UNPAID'" ng-show="$index === data.payOnlineIndex"
ng-init="data.payOnlineIndex = (!data.payOnlineIndex || (data.payOnlineIndex > $index)) ? $index : data.payOnlineIndex">
Pay Online
</td>
This way ng-init will run for all unpaid elements, setting the smallest index to the payOnlineIndex variable. ng-show will make sure to only show that one element that has the smallest index.
I encapsulate payOnlineIndex with a data object to keep a stable reference to it. This also requires the following addition to the controller code:
$scope.data = { payOnlineIndex: null };
See a working jsFiddle example here: https://jsfiddle.net/t3vktv0r/
Another option is running your filter and orderBy in the controller, searching for the first occurrence of an "unpaid" row, and marking that element for the "pay online" feature with some flag you can test with ng-if in your view.

Selecting a date from the calendar using selenium

I want to select any date from the calendar to test some application .
I cant find the table or tr or td elements here .
I think i can get the table divison but not able to go ahead of this .
This is my solution
public String findElementInTable(WebDriver driver,String elementXpath) {
WebElement select2Element = driver.findElement(By.xpath(elementXpath));
select2Element.click();
WebElement datepicker = driver.findElement(By.xpath("//div[#class='period_picker_days']/table"));
List<WebElement> rows_table = datepicker.findElements(By.tagName("tr"));
int rows_count = rows_table.size();
// Loop will execute till the last row of table.
for (int row = 0; row < rows_count; row++) {
// To locate columns(cells) of that specific row.
List<WebElement> Columns_row = rows_table.get(row).findElements(By.tagName("td"));
// To calculate no of columns(cells) In that specific row.
int columns_count = Columns_row.size();
// Loop will execute till the last cell of that specific row.
for (int column = 0; column < columns_count; column++) {
// To retrieve text from that specific cell.
if (Columns_row.get(column).getText().equals(name)) {
String celtext = Columns_row.get(column + 2).getText();
System.out.println("Cell Value Of row number " + row + " and column number " + (column) + " Is "
+ celtext);
return Columns_row.get((column + 2)).getText();
}
}
}
return null;
}
Here is a detailed html snippet of the calendar
<div class="ParkingWidgetParkingLanding period_picker_box xdsoft_noselect animation xdsoft_norange visible active periodpickerstart" style="left: 487.467px; top: 857px; width: 511px; height: 294px;" unselectable="on">
<div class="period_picker_head">
<div class="period_picker_work">
<div class="period_picker_days">
<a class="periodpicker_btn_prev" href="#">Prev</a>
<table>
<tbody>
<tr>
<td class="period_picker_month5 periodpicker_table_container">
<table>
<tbody>
<tr>
<th class="period_picker_month" title="May 2016" colspan="7" data-dateend="2016/05/31" data-datestart="2016/05/1">May 2016</th>
</tr>
<tr class="period_picker_first_letters_tr">
<th class="period_picker_holiday">Sun</th>
<th class="">Mon</th>
<th class="">Tue</th>
<th class="">Wed</th>
<th class="">Thu</th>
<th class="">Fri</th>
<th class="period_picker_holiday">Sat</th>
</tr>
<tr>
<td class="period_picker_gray_period">1</td>
<td class="period_picker_gray_period">2</td>
<td class="period_picker_gray_period">3</td>
<td class="period_picker_gray_period">4</td>
<td class="period_picker_cell period_picker_weekday" data-date="2016/05/5">5</td>
<td class="period_picker_cell period_picker_weekday" data-date="2016/05/6">6</td>
<td class="period_picker_cell period_picker_holiday period_picker_last_cell" data-date="2016/05/7">7</td>
</tr>
<tr>
<tr>
<tr>
<tr>
</tbody>
</table>
</td>
<td class="period_picker_month6 periodpicker_table_container">
<table>
Hi please do it like below (answer is as per the html source provided)
List<WebElement> dates = driver.findElements(By.xpath("//*[#class='period_picker_month5 periodpicker_table_container']/table/tbody/tr[3]/td"));
// for printing every date
// and selecting a date form the calender
String MyDate = "6";
for (int j = 0; j < dates.size(); j++) {
String date = dates.get(j).getText();
System.out.println(date);
if(dates.get(j).getText().equals(MyDate)){
dates.get(j).click();
break;
}
}
Try this for first date //html/body/div/div/div/div/table/tbody/tr/td/table/tbody/tr[3]/td[1]
Also you can download xpath finder, it's mozzila add-on i think it helps a lot.
When you install it just right click on element, choose Xiew xpath-> and it will show xpath for element.

IE7 with rowspan when dynamically collapsing multiple rows (extra space at bottom)

I'm trying to dynamically hide/unhide multiple table rows using Javascript to mimic collapse/expand. here are relevant code snippets:
function selectionFilter(check, filter){
var elem = document.getElementById('myScrollTable').rows;
for(i = 0; i < elem.length; i++){
var type = elem[i].getAttribute('type');
if(type== filter){
if(check == true){
elem[i].style.display='';
}else{
elem[i].style.display='none';
}
}
}
}
and here is the sample HTML:
<input type="checkbox" checked="true" value="t1" onclick="selectionFilter(this.checked, this.value);">some type 1</input >
<input type="checkbox" value="t2" onclick="selectionFilter(this.checked, this.value);">some type 2</input ><br><br>
<table cellspacing="1" cellpadding="2" class="" id="myScrollTable">
<thead>
<tr>
<th>Data1</th>
<th>Data2</th>
</tr>
</thead>
<tbody>
<tr type="t1">
<td rowspan="50">something1</td><td>something2</td>
</tr>
<tr type="t1">
<td>something2</td>
</tr>
.
.
<tr type="t2" style="display:none;">
<td rowspan="50">something1</td><td>something2</td>
</tr>
<tr type="t2" style="display:none;">
<td>something2</td>
</tr>
.
.
</tbody>
</table>
In Firefox everything is fine. However in IE, after the first time any row is hidden, when it is unhidden it has some extra space appending at the bottom. This does not happen when rowspan is not used. I tried many things but couldn't get rid of the extra space.
I would truly appreciate if anyone could give me some hint.
Did you try using block instead of an empty string?
you should try using
elem[i].style.display = 'block';
and if this fails you should try
elem[i].style.display = 'table-row';
and allways you should check the w3schools documentation, its really usefull
http://www.w3schools.com/css/pr_class_display.asp
tellme if this works for you