Develop Reference

How to remove plain text URL from data content column name offilneURL?

I face issue Cannot hide or remove URL exist as plain text on column name offilneUrl
I already do as link so that no need to plain text URL above
So I need to hide or remove or empty URL plain text above word page link .
<tbody>
<ng-container *ngFor="let repcon of ReportControl">
<tr *ngFor="let rep of contentBody">
<td *ngFor="let coln of headerCols">
<span>
{{rep[coln]}}
</span>
<div *ngIf="coln==repcon.fieldName">
<div *ngIf="repcon.columnType==1">
<a (click)="goToLink(rep.offilneURL)">page link</a>
</div>
</div>
</td>
</tr>
</ng-container>
</tbody>
I try as below
{{rep.offilneURL || " "}} but it repeated offlineURL with every row
so what i do to solve issue
see image below the text with green color that i need to remove because it .
post updated
structure of content body on ts file
this._displayreport.GetReportDetailsPaging(this.searchData).subscribe((data: any[]) => {
this.reportdetailslist = data;
this.headerCols = Object.keys(data[0]);
this.contentBody = data;
});
data structure for content body :
companyName: "Innovasic, Inc."
done: "0"
notImpacted: "0"
notificationDate: "2009-11-12"
offilneURL: "https://source.z2data.com/2019/1/13/8/55/47/351/662203977/21527_SPCN.PDF"
onlineURL: "N/A"
pending: "3"
reportDate: "2020-05-07"
revisionID: "272299243"
teamName: "MFG"
totalCount: 79
already have link
Updated post
https://stackblitz.com/edit/create-4ud1rg?file=app%2Fapp.component.html
according to my structure I need to change
<span *ngIf="coln != 'onlineURL'">
{{rep[coln]}}
</span>
to
<span *ngIf="coln != 'repcon.filedName'">
{{rep[coln]}}
</span>

It's just because:
<span>
{{rep[coln]}}
</span>
is still displaying the value regardless so just hide it if the column is the url
<span *ngIf="repcon.columnType != 1">
{{rep[coln]}}
</span>

Base on the content body structure and logic you shared, you can hide the link as follows.
Based on logic ==>
<span *ngIf="repcon.columnType!=1">
{{rep[coln]}}
</span>
I think you are showing the link based on the condition repcon.columnType==1, So check for converse to hide the offline link.
This can be handled in other way as well.
Based on structure ==>
<span *ngIf="coln != 'onlineURL'">
{{rep[coln]}}
</span>
Hope this helps.

how to bind data from dynamically named inputs inside a ng-repeat

my goal is to be able to copy data from a table row to another table row.
if the data from 2015 has not changed from 2016 the user needs a quick way of copying the values into the 2016 input fields. the models are dynamically created for these forms. the data you see in this image is assigned to a section. the input models are name 'price_min + section_id', price_max + section_id' , etc...
the history model does not have the section_id added to the end of the model names. so there needs to be a mapping function that i need help with. I need to map the history values to the current model convention and update the view with the values.
currently i have a click function that brings in the matched section history. here is a screen shot of what that looks like.
in that same function i have the 2016 object array with the current model naming convention.
i need to copy the history values into the inputArray. how i go about doing this, i dont know? I have complete control on how this works. and in the plunker you will see how i did this. if i need to change something else to make this work then that is ok. javascript, jquery, lodash, linq.js is currently being used in project.
working plunker
working plunker
$scope.copyHistoryData = function (section) {
var selected = Enumerable.From(sectionsHistory).Where("x => x.section_id == '" + section.section_id + "'").ToArray();
selected = selected[0];
var inputArry = section.sectionInputs;
};

I'm not sure why you use such complex data structure, but here is my take on it
$scope.copyHistoryData = function (section, input) {
var historyId=input.model.split('-')[0];
var historyVal=section.sectionHistory[section.sectionHistory.length-1][historyId];
$scope.model[input.model]=historyVal;
};
To fill all fields:
$scope.copyHistoryData = function (section) {
angular.forEach(section.sectionHistory[section.sectionHistory.length-1], function (historyVal, historyId) {
var inputModel=historyId+"-"+section.section_id;
$scope.model[inputModel]=historyVal;
});
};
http://plnkr.co/edit/OOEmgzKB1pqKjSJMayVF?p=preview

I agree with #ssh. The data structure is a mess. I think this is a better representation of what it should look like. Probably not the best but you shouldn't have to iterate through the data to then display it like that.
http://plnkr.co/C9DWV1dSvkk8lcYdm0An?p=preview
<div class="hpanel" ng-repeat="section in sections">
<div class="panel-body">
<div class="row">
<div class="col-xs-12">
<ul class="list-inline">
<li>
<h5>
<b>SecID</b>
</h5>
<span>{{section.section_id}}</span>
</li>
<li>
<h5>
<b>Section Name</b>
</h5>
<span>{{section.section_name}}</span>
</li>
</ul>
<hr/>
<button ng-click="section.new_section_history = section.section_history">copy row</button>
<table>
<tr>
<td ng-repeat="label in labelIndex">
{{label.label}}
</td>
</tr>
<tr>
<td ng-repeat="label in labelIndex">
{{section.section_history[label.index]}}
</td>
</tr>
<tr>
<td ng-repeat="label in labelIndex">
<input ng-model="section.new_section_history[label.index]"/>
</td>
</tr>
<tr>
<td ng-repeat="label in labelIndex">
<button ng-click="section.new_section_history[label.index] = section.section_history[label.index]">copy</button>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>

I have checked your code, and I agree with #Steven Kaspar, the anchors in every row doesn't make much sense. I have solved it using jQuery (I know it doesn't follow your scheme with Angular, but it's another solution).
I have added a new <tr> to add a button inside it.
Check this out:
<tr>
<td colspan="10"><button class="copyRow">Copy complete row</button></td>
</tr>
And in the app.js:
$(document).on("click", ".copyRow", function(){
var $btn = $(this),
$tbody = $btn.parent().parent().parent(),
$trs = $tbody.find("tr");
$.each($trs.eq(0).find("td"), function(index, td){
$trs.eq(1).find("td").eq(index).find("input").val(parseFloat($(td).text().replace("$", "")));
});
})
Here is the updated plunker. I hope it helps

Pass object to isolated directive

When my application loads a function to get items from a server runs, this function get the title and Id of all items on the server,
then puts them in an array.
In my main html I have a table that displays this array, and when i click the title of an Item, I call another function (onView)
which gathers more information about that item from the server. This new information is passed to
a variable called '$scope.currentItem'.
I also have a directive called 'currentItem', this is used to display that item for the user.
myApp.directive('currentItem',function(){
return{
restrict:'E',
scope:{
data:'='
},
templateUrl: 'currentItem.html',
controller:function($scope){
}
};
});
To know if a user has clicked an item I have a boolean called isView, so when the function to gather more information runs
the isView is set to 'true'.
My html looks like this:
<div ng-app="myApp">
<hr>
<div ng-controller="appCtrl">
<div ng-hide="isView" class="col-md-12">
<table id="mainTable" ng-table="tableParams" class="table">
<tbody ng-repeat="item in items">
<tr>
<td id="Title" data-title="'Title'">
{{item.id}} |<a ng-click="onView(item.id)">{{item.title}}</a>
</td>
<td data-title="'Description'">
{{item.description | date:'dd-MM-yyyy'}}
</td>
<td data-title="'Created'">
{{item.created | date:'dd-MM-yyyy'}}
</td>
</tr>
</tbody>
</table>
</div>
<div ng-show="isView" class="col-md-12">
<current-item data="currentItem"></current-item>
</div>
</div>
</div>
This can't be the correct way to pass an object to a directive, seeing I always use the same 'currentItem' object.
How could I improve this, so that each object is isolated and editable in a seperate view?

Google Custom Search - don't want trunated title

I am trying to do a simple Google Search where I just get back the titles linked to the pages. I have bought the business search and I have everything working (see code below) - I just want to get the full title of the page, not the truncated title. Can anyone help me?
In my head I have:
<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
// Load the Search API
google.load('search', '1');
// Set a callback to load the Custom Search Element when you page loads
google.setOnLoadCallback(
function(){
var customSearchControl = new google.search.CustomSearchControl('011927268382499158334:cuvurabmo-o');
// Use "mysite_" as a unique ID to override the default rendering.
google.search.Csedr.addOverride("mysite_");
// Draw the Custom Search Control in the div named "CSE"
customSearchControl.draw('cse');
},
true);
</script>
In the body I have:
<div style="display:none">
<!-- Return the unescaped result URL.-->
<div id="mysite_webResult" >
<div class="gs-webResult gs-result"
data-vars="{longUrl:function() {
var i = unescapedUrl.indexOf(visibleUrl);
return i < 1 ? visibleUrl : unescapedUrl.substring(i);}}">
<!-- Build the result data structure.-->
<table width="50%" cellpadding="0" cellspacing="0" >
<tr>
<td valign="top">
<!-- Append results within the table cell.-->
<div class="gs-title">
<a class="gs-title" style="color:#990000;font-family:'Times New Roman',serif;font-size:8.0pt;font-decoration:underline;" data-attr="{href:unescapedUrl,target:target}"
data-body="html(title)"></a>
</div>
<!-- Render results.-->
<div data-if="Vars.richSnippet && Vars.richSnippet.action" class="gs-actions"
data-body="render('action',richSnippet,{url:unescapedUrl,target:target})"></div>
</td>
</tr>
</table>
</div>
</div>
<!-- Div container for the searcher.-->
<div id="cse"></div>

Call javascript function on onChange event of an element loaded with Ajax in Spring MVC

I have a drop down list with two values (for now..) with other elements in a form. What I'd like to do is enable four components if the user selects the first value and disable them otherwise.
There's a main page, and the user navigates through other pages opening and closing tabs loaded dynamically with ajax calls, that remove the current page and load the new page into a specific div.
In those pages loaded with Ajax I need to put the javascripts that will be used in those pages, so in this case the javascript that enables/disables the desired components, but I cannot call it because I get "Uncaught ReferenceError: soggettiNaturaChangeEvent is not defined", where soggettiNaturaChangeEvent is the name of the function.
Here's where I call it, in the page newEditSoggetti.jsp:
<form:select id="soggetti_soggettiNatura" path="soggettiNatura" cssStyle="width:300px;" onChange="javascript:soggettiNaturaChangeEvent();">
...
...
...
In that page too I put the javascript function:
<script id="function1" type="text/javascript">
alert("soggettiNaturaChangeEvent");
function soggettiNaturaChangeEvent()
{
alert("function soggettiNaturaChangeEvent");
var natura = document.getElementById('soggetti_soggettiNatura');
var datanascita = document.getElementById('soggetti_soggettiDataNascita');
var luogonascita = document.getElementById('soggetti_soggettiLuogoNascita');
var sesso1 = document.getElementById('soggettiSessoID1');
var sesso2 = document.getElementById('soggettiSessoID2');
if(natura.value == "Persona fisica")
{
datanascita.disabled=false;
luogonascita.disabled=false;
sesso1.disabled=false;
sesso2.disabled=false;
}
else
{
datanascita.disabled=true;
luogonascita.disabled=true;
sesso1.disabled=true;
sesso2.disabled=true;
}
}
</script>
Here's my tab refresh function, which calls an initScript specified in a parameter:
//reset stuff, reorder tabs, etc...
$.ajax(action,
{
success : function(result)
{
//finds the div where to put new content
var doc = document.getElementById(newid);
doc.innerHTML = doc.innerHTML + result;
//finds the initScript "scriptId" and runs it (THIS WORKS)
scripts = $('#' + scriptId);
eval(scripts.html());
//here I try to find all the scripts tag that begin with "function" and eval them
var jScripts = $("[id^=function]");
for(var i = 0; i < jScripts.size(); i++)
{
eval(jScripts.html());
jScripts = jScripts.next();
}
}
});
The page prints the first alert when (I think) it appends the function to the DOM, but when I click on the component that should invoke the function I get the error.
What I'd like to do is to have this function get executed when I click on the component soggettiNatura, not when ajax finished loading my page.
Thanks to everyone who will try to help me, and to everyone that has posted useful content I read in the past.
Keep with the great work.
Andrea
P.S.: sorry for the bad indentation, I'm in a bit of a hurry :P
Edit: a little append: if I try to load the page normally (not with Ajax) the javascript works...
I have a function in the main page that shows me the actual html code after the various javascripts and ajax modifications (this is purely to debug) and the javascript function I'm trying to call is there in the dom...
Please help a newbie in this world..

I finally made it. I'm posting a sample web page with all the relevant code:
<%# page language="java" isELIgnored="false" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<jsp:directive.include file="/WEB-INF/sitemesh-decorators/include.jsp"/>
<fmt:setBundle basename="bundles.settori-resources"/>
<!-- !!!!! important for popup !!!!! I have a boolean param passed from the server to know if I'm opening in popup mode or in tab mode -->
<% Boolean isPopup = (Boolean)request.getAttribute("popup"); %>
<!-- !!!!! important for popup !!!!! -->
<div id="contentarea" >
<div id="lb"><div id="rb"><div id="bb"><div id="blc">
<div id="brc"><div id="tb"><div id="tlc"><div id="trc">
<div id="content">
<h2><fmt:message key="navigation.management"/> <fmt:message key="settori.title"/></h2>
<div id = "initScriptSettori"></div>
<form:form id="tabSettoriForm" method="POST" commandName="settori">
<!-- !!!!! important for popup !!!!! I'm saving the id of the element of the calling page I'm going to edit with the selected element in the popup -->
<form:hidden path="hiddenCallerFormElementId" />
<!-- !!!!! important for popup !!!!! -->
<table cellpadding="0" cellspacing="0" id="viewTable">
<tbody>
<tr>
<td class="label" valign="top">
<fmt:message key="settori.settoreid.title"/>:
</td>
<td>
<form:input id="settori_settoreId" path="settoreId" cssStyle="width:300px;"/>
</td>
<td class="label" valign="top">
<fmt:message key="settori.settoredescrizione.title"/>:
</td>
<td>
<form:input id="settori_settoreDescrizione" path="settoreDescrizione" cssStyle="width:300px;"/>
</td>
</tr>
</tbody>
</table>
<!-- !!!!! important for popup !!!!! It triggers two different search functions based on the popup staying open or not: the first updates the popup with the search results, the second updates the tab -->
<% if(isPopup == null || isPopup == false) {%>
<span class="inputbutton"><input class="refreshbutton" type="button" id="searchSettori" onClick="javascript:refreshTabWithPost('tabSettori', 'tabSettori', '${pageContext.request.contextPath}/searchSettori', '<fmt:message key="navigation.management"/> <fmt:message key="settori.title"/>', 'initScriptSettori')" value="<fmt:message key="navigation.searchSettori"/>"/></span>
<% } else {%>
<span class="inputbutton"><input class="refreshbutton" type="button" id="searchSettoriPopup" onClick="javascript:postColorbox('/DeliDete/searchSettoriPopup', '', 'tabSettoriForm','initScriptSettori')" value="<fmt:message key="navigation.searchSettori"/>"/></span>
<% } %>
<!-- !!!!! important for popup !!!!! -->
</form:form>
<div class="clear"> </div>
<!-- !!!!! important for popup !!!!! If I'm on the tab version shows the new entity button, else it is hidden -->
<% if(isPopup == null || isPopup == false) {%>
<div class="navitem"><a class="button" href="javascript:refreshTab('tabSettori', 'tabSettori', '${pageContext.request.contextPath}/newSettori', '<fmt:message key="navigation.new"/> <fmt:message key="settori.singular"/>', 'initScriptSettori')"><span><img src="${pageContext.request.contextPath}/images/icons/new.gif" /><fmt:message key="navigation.new"/> <fmt:message key="settori.singular"/></span></a></div>
<% } %>
<!-- !!!!! important for popup !!!!! -->
<div id="tablewrapper">
<table id="listTable" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th class="thead"> </th>
<th class="thead"><fmt:message key="settori.settoreid.title"/></th>
<th class="thead"><fmt:message key="settori.settoredescrizione.title"/></th>
</tr>
</thead>
<tbody>
<c:forEach items="${settoris}" var="current" varStatus="i">
<c:choose>
<c:when test="${(i.count) % 2 == 0}">
<c:set var="rowclass" value="rowtwo"/>
</c:when>
<c:otherwise>
<c:set var="rowclass" value="rowone"/>
</c:otherwise>
</c:choose>
<tr class="${rowclass}">
<td nowrap="nowrap" class="tabletd">
<!-- !!!!! important for popup !!!!! If I'm in the tab version of the page it shows the view,edit and delete buttons, if I'm in the popup version it shows the select button, which triggers the closing of the popup and the update of the calling element -->
<% if(isPopup == null || isPopup == false) {%>
<a title="<fmt:message key="navigation.view" />" href="javascript:refreshTab('tabSettori', 'tabSettori', '${pageContext.request.contextPath}/selectSettori?settoreIdKey=${current.settoreId}&', '<fmt:message key="navigation.view"/> <fmt:message key="settori.title"/>','initScriptSettori')"><img src="images/icons/view.gif" /></a>
<a title="<fmt:message key="navigation.edit" />" href="javascript:refreshTab('tabSettori', 'tabSettori', '${pageContext.request.contextPath}/editSettori?settoreIdKey=${current.settoreId}&', '<fmt:message key="navigation.edit"/> <fmt:message key="settori.title"/>', 'initScriptSettori')"><img src="images/icons/edit.gif" /></a>
<a title="<fmt:message key="navigation.delete" />" href="javascript:refreshTab('tabSettori', 'tabSettori', '${pageContext.request.contextPath}/confirmDeleteSettori?settoreIdKey=${current.settoreId}&', '<fmt:message key="navigation.delete"/> <fmt:message key="settori.title"/>','initScriptSettori')"><img src="images/icons/delete.gif" /></a>
<% } else {%>
<a title="<fmt:message key="navigation.select" />" href="javascript:closeColorbox('${current.settoreId}', '${current.settoreDescrizione}', '${settori.hiddenCallerFormElementId}')"><img src="images/icons/select.png" /></a>
<% } %>
<!-- !!!!! important for popup !!!!! -->
</td>
<td nowrap="nowrap" class="tabletd">
${current.settoreId}
</td>
<td nowrap="nowrap" class="tabletd">
${current.settoreDescrizione}
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
</div></div></div></div>
</div></div></div></div>
</div>
<!-- !!!!! important for popup !!!!! -->
<script>
function initLoad()
{
//necessary for the popup init script loading
if(jQuery1_6_2("#initScriptSettori").length != 0)
{
jQuery1_6_2.getScript("javascripts/pagesJs/" + "initScriptSettori" + ".js", function()
{
window["initScriptSettori"]();
});
}
else
setTimeout("initLoad()",500);
}
initLoad();
</script>
<!-- !!!!! important for popup !!!!! -->
The initScriptSettori.js:
function initScriptSettori()
{
}
In this case I had nothing to initialize, but there are so many cases in which you need some javascripts events being fired at the end of the loading of the page, well I put them inside the function initScriptSettori.
Hope this helps guys.