Replace null with a string using JavaScript - javascript

Does anyone know why my if statement doesn't do anything when running at the end of my program? I'm wanting to replace null returns with no office and I can't seem to run it afterwards.
for (z = 0; z < items.length; z++) {
var team = '<div class="row"><div class="col-sm-8"><p style="margin-bottom: 0px;">' + items[z].TeamName + '</p></div><div class="col-sm-4 office"><p style="margin-bottom: 0px;">' + items[z].Office + '</p></div></div>';
var single = '<div class="row"><div class="col-sm-8"><p style="margin-bottom: 0px;">' + items[z].Title + '</p></div><div class="col-sm-4"><p class="office" style="margin-bottom: 0px;">' + items[z].Office +
'</p></div></div>';
if (items[z].Office == 'null') {
$(".office").append('No office');
}
}
<div class="row" style="padding-bottom: 10px;">
<div class="col-md-6">
<div>
<div class="row title">
<div class="col-md-8">
<span>Single Users</span>
</div>
<div class="col-md-4" style="padding-left: 4px;">
<span>Office</span>
</div>
</div>
<div class="col-md-12 teamsSingles" style="padding-left:0px; border-right: solid 1px #DCE1E5;">
</div>
</div>
</div>
<div class="col-md-6">
<div>
<div class="row title">
<div class="col-md-8">
<span>Teams</span>
</div>
<div class="col-md-4" style="padding-left: 4px;">
<span>Office</span>
</div>
</div>
<div class="col-md-12 teamsTeams" style="padding-left:0px;">
</div>
</div>
</div>
</div>


Remove the quotes from around null (and add another = to check for type, so === instead of ==)

Related

How to append a div inside an appended div

$.each(v.Modifiers, function (_k, _v) {
$modifierDiv.append(
`<div class="col-xs-12 cart-modifier" style="padding: 0;" data-id="${_v.ModifierOptionID}">
<p class="text-muted" style="padding: 5px; margin: 0; line-height: 14px;">
${_v.ModifierOption.Name + " " + formatCurrency(_v.TotalPrice)}
</p>
</div>`
);
});
$(".cart-items-right").find('ul').append(
`<div class="row">
<li class="col-xs-12 receipt-item" data-order-line-id="${obj.OrderLineID}" data-id="${obj.ID}" data-qty="${obj.Qty}" data-remarks="${obj.Remarks}" data='${JSON.stringify(obj)}'>
<div class="row">
<div class="col-xs-9" style="padding: 0;">
<span class="col-xs-8 text-muted" style="padding:5px 0px;margin:0px;line-height:14px;">
${common.translate("Regular") + " " +formatCurrency(obj.Price)}
</span>
</div>
<div class="col-xs-12 hidden" style="margin: 8px 0;">${$modifierDiv}</div>
</div>
</div>
</li>
</div>`
);
I appended $modifierDiv inside a div that also append to .cart-items-right. But it just returned me [Object Object]. Need help. Thanks

You can create a jQuery object for the <li> then append within that object
Simplified example:
const $div = $('<div>',{text:'My Div'})
const $li = $(`<li><div class="hidden"></div></li>`);
$li.find('.hidden').append($div)
$('ul').append($li)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul></ul>

loop div in inline position

I have this code below to create a loop of div using javascript. It's working fine on looping the div that I wanted. But the problem is the alignment of the div. Its in alternate position. What I want to accomplish here is to have my design div to be aligned.
Expected Output
First Div | Second Div <<-- First Loop
First DIv | Second Div <<-- Second Loop
Current Design in my code
| First DIv
First Div |
function isOdd(n) {
var IsOdd = false;
if (Math.abs(n % 2) == 1) {
IsOdd = true;
}
return IsOdd;
}
$("#click").click(function(e) {
e.preventDefault();
var odd = [1, 3, 5, 7, 9];
var even = [2, 4, 6, 8, 10];
var counter = 0;
var FireCounter = [1, 2, 3]
for (var i = 0; i < FireCounter.length; i++) {
var ArchPlanDetails = $("#frmPlanDetails").find("div.divHide:visible").find("div#collapse" + FireCounter[i]).find(".req");
var cardTitle = $("#frmPlanDetails").find("div.divHide:visible").find("div#collapse" + FireCounter[i]).parent().find(".card-title")[0]; //.innerText;
console.log(cardTitle);
var dividedAlertPlanDetails = FireCounter.length / 2;
var mainCard = "";
mainCard = '<div class="row">' +
'<div class="col-md-6" id="divBody_' + i + '">' +
'</div>' +
'<div class="col-md-6" id="divBody2_' + i + '">' +
'</div>' +
'</div>';
$("#modalAlert .modal-body").append(mainCard);
var fieldSet = '<fieldset class="border p-2 mt-2">' +
'<legend style="color:black !important; font-size:30px !important">' + cardTitle + '</legend>' +
'<div id="fieldDivID' + i + '"></div>' +
'<fieldset>';
//var cards = '<div class="card" id="HelloWorld_' + i + '"> <div class="card-header bg-success"><h3 class="card-title">' + cardTitle + ' </h3 ></div> <div class="card-body"> </div>'
if (isOdd(i)) {
$("#modalAlert .modal-body #divBody_" + i).append(fieldSet);
} else {
$("#modalAlert .modal-body #divBody2_" + i).append(fieldSet);
}
counter++;
$.each(ArchPlanDetails, function(Index, Value) {
var appendBody = "";
var id = "#fieldDivID" + i;
var divID = "#divBody_" + i;
var divID2 = "#divBody2_" + i;
var textboxValue = $(Value).find("input[type=text],[type=number]").val();
var InnerText = Value.innerText.trim();
appendBody = '<div class="row mt-2" style="font-size:20px">' +
'<div class="col-md-12"> ' + InnerText + ' </div >' +
'</div >';
if (textboxValue == "") {
if (isOdd(i)) {
$(divID + " " + id).append(appendBody);
} else {
$(divID2 + " " + id).append(appendBody);
}
}
});
}
$("#modalAlert .modal-header").html("Header");
$("#modalAlert").modal("show");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<form id="frmPlanDetails">
<div class="col-md-12 divHide" id="dvFireCounter1">
<div id="card_one" class="card">
<div class="card-header bg-success pt-0 pb-0">
<h3 class="card-title pt-1">
<span id="FireCounter1"></span> Plan A
<a class="fa fa-window-minimize float-right FAHide" id="min" data-toggle="collapse" data-target="#collapse1" href="#collapseOne"></a>
<a class="custom-control custom-checkbox float-right">
<input type="checkbox" class="custom-control-input" id="Fire" name="FireIsComplied" value="true">
<label class="custom-control-label font-weight-normal" for="Fire">
Complied
</label>
</a>
</h3>
</div>
<div id="collapse1" class="collapse show pt-3 pl-4 pr-4" data-parent="#accordion">
<fieldset class="border p-2">
<div class="row">
<div class="col-md-6 req">
Ave. Cover(mm)
<input type="text" class="form-control flat" name="FireAveCover" id="" placeholder="25">
</div>
<div class="col-md-6 req">
Overall Depth(mm)
<input type="text" class="form-control flat" name="FireOverAll" id="" placeholder="150">
</div>
</div>
</fieldset>
</div>
</div>
</div>
<div class="col-md-12 divHide" id="dvFireCounter2">
<div id="card_one" class="card">
<div class="card-header bg-success pt-0 pb-0">
<h3 class="card-title pt-1">
<span id="FireCounter2"></span> Plan B
<a class="fa fa-plus float-right FAHide" id="min" data-toggle="collapse" data-target="#collapse2" href="#collapseOne"></a>
<a class="custom-control custom-checkbox float-right">
<input type="checkbox" class="custom-control-input" id="BP" name="BPIsComplied" value="true">
<label class="custom-control-label font-weight-normal" for="BP">
Complied
</label>
</a>
</h3>
</div>
<div id="collapse2" class="collapse pt-3 pl-4 pr-4" data-parent="#accordion">
B
</div>
</div>
</div>
<div class="col-md-12 divHide" id="dvFireCounter3">
<div id="card_one" class="card">
<div class="card-header bg-success pt-0 pb-0">
<h3 class="card-title pt-1">
<span id="FireCounter3"></span> Plan C
<a class="fa fa-plus float-right FAHide" id="min" data-toggle="collapse" data-target="#collapse3" href="#collapseOne"></a>
<a class="custom-control custom-checkbox float-right">
<input type="checkbox" class="custom-control-input" id="AS" name="ASIsComplied" value="true">
<label class="custom-control-label font-weight-normal" for="AS">
Complied
</label>
</a>
</h3>
</div>
<div id="collapse3" class="collapse pt-3 pl-4 pr-4" data-parent="#accordion">
C
</div>
</div>
</div>
<button id="click">Click</button>
</form>
<div class="modal fade" id="modalAlert" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header bg-success">
<h4 class="modal-title"></h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="row">
</div>
</div>
<!-- Modal footer -->
</div>
</div>
</div>
jsFiddle

printing a page in javascript not following the css

I am printing a div in a javascript and i was putting a css within it, why it doesn't follow my css? anything i put in my css was something nothing or it doesn't have an effect to arrange my print section. Can anyone teach me how to arrange the printing page in a javascript code with css to arrange my print?.
how do i apply my css in this situation,
Here is my code:
function printDiv() {
var divToPrint = document.getElementById('printme');
var htmlToPrint = '' +
'<style >' +
'body {' +
'font-family: arial, sans-serif ;' +
'font-size: 12px ;' +
'}' +
'header-cert{' +
'text-align: center;' +
'text-decoration: underline;' +
'}' +
'</style>';
htmlToPrint += divToPrint.outerHTML;
newWin = window.open("");
newWin.document.write(htmlToPrint);
newWin.print();
newWin.close();
}
<div id="printme">
<div class="border">
<div class="row">
<div class="cliniclogo" style="background-image: url()">
</div>
<div class="col-md-12 text-center">
<div class="header-cert">
<p class="certheader"></p>
<p class="certheader" id="clinic_name"></p>
<p class="certheader"><label id="clinic_address"></label>, <label id="city_name"></label> </p>
<p class="certheader"><label id="province_name"></label>, <label id="zipcode"></label> </p>
</div>
<!-- header-cert -->
</div>
<div class="col-md-12 text-center">
<p class="medcert">MEDICAL CERTIFICATE</p>
</div>
</div>
<!-- row -->
<div class="row">
<div class="col-md-4 col-md-offset-10">
<p>Date: <u><?php echo "".date(' M j, Y'); ?></u></p>
</div>
</div>
<!-- row -->
<div class="row">
<div class="col-md-4">
<p class="certmarg">To Whom It May Concern:</p>
</div>
<!-- col-md-4 -->
</div>
<!-- row -->
<div class="row">
<div class="col-md-12">
<p class="startindent">THIS IS TO CERTIFY that <label id="cert_name"></label> of <label id="cert_address"></label> was examined and treated at the <label id="cert_clinic_name"></label> on <label id="cert_check_up_date"></label> with the following diagnosis: <label id="cert_diagnosis"></label> and would need medical attention for <label id="cert_physician"></label> days barring complication.</p>
</div>
</div>
<!-- row -->
<div class="signatory">
<div class="row">
<div class="col-md-4 col-md-offset-10">
<u><p id="cert_physician_signatory"><label id="cert_physician_sig"></label>, M.D.</p></u>
</div>
</div>
</div>
<!-- signatory -->
</div>
<!-- printme -->
why does it not makes my header-cert centered in printing? it didn't follow the css that i've put.

I think you missed . in header-cert, so use .header-cert.
function printDiv() {
var divToPrint = document.getElementById('printme');
var htmlToPrint = '' +
'<style rel="text/stylesheet">' +
'body {' +
'font-family: arial, sans-serif ;' +
'font-size: 12px ;' +
'}' +
'.header-cert{' +
'text-align: center;' +
'text-decoration: underline;' +
'}' +
'</style>';
htmlToPrint += divToPrint.outerHTML;
//newWin = window.open("");
newWin = window;
newWin.document.write(htmlToPrint);
newWin.print();
newWin.close();
}
document.getElementById('printBtn').addEventListener('click', function(){
printDiv();
})
<div id="printme">
<div class="border">
<div class="row">
<div class="cliniclogo" style="background-image: url()">
</div>
<div class="col-md-12 text-center">
<div class="header-cert">
<p class="certheader">Cerheader title</p>
<p class="certheader" id="clinic_name"></p>
<p class="certheader"><label id="clinic_address"></label>, <label id="city_name"></label> </p>
<p class="certheader"><label id="province_name"></label>, <label id="zipcode"></label> </p>
</div><!-- header-cert -->
</div>
<div class="col-md-12 text-center">
<p class="medcert">MEDICAL CERTIFICATE</p>
</div>
</div><!-- row -->
<div class="row">
<div class="col-md-4 col-md-offset-10">
<p>Date: <u><?php echo "".date(' M j, Y'); ?></u></p>
</div>
</div><!-- row -->
<div class="row">
<div class="col-md-4">
<p class="certmarg">To Whom It May Concern:</p>
</div><!-- col-md-4 -->
</div><!-- row -->
<div class="row">
<div class="col-md-12">
<p class="startindent">THIS IS TO CERTIFY that <label id="cert_name"></label> of <label id="cert_address"></label>
was examined and treated at the <label id="cert_clinic_name"></label> on <label id="cert_check_up_date"></label>
with the following diagnosis: <label id="cert_diagnosis"></label> and would need medical attention for
<label id="cert_physician"></label> days barring complication.</p>
</div>
</div><!-- row -->
<div class="signatory">
<div class="row">
<div class="col-md-4 col-md-offset-10">
<u><p id="cert_physician_signatory"><label id="cert_physician_sig"></label>, M.D.</p></u>
</div>
</div>
</div><!-- signatory -->
<button id="printBtn">Print<button>

Spring, Thymeleaf and asynchronous data loading

Im right now facing a huge problem because i have a fragment containing a list with very big amount of data. What i do until now is the following:
When the user clicks a button I perform a javascript post like this:
function loadEvaluations() {
$.ajax({
url : "/evaluation/data",
type : "POST",
headers : createAuthorizationTokenHeader(),
async : !1,
data : {
from: rangeFrom,
to: rangeTo
},
success : function(data) {
$("#portal_container").html(data);
},
error : function(data) {
$("#portal_container").html(data);
}
});
}
In the Spring backend i select the data from the database, put it inside the model and return the fragment:
#RequestMapping(HelperUrls.URL_WEB_EVALUATION_DATA)
public String data(Model model, HttpServletRequest request,
#RequestParam(value = Params.PARAM_FROM, required = true) long from,
#RequestParam(value = Params.PARAM_TO, required = true) long to) {
final IDM_USER user = this.idm_user_repository.findByEmail(request.getUserPrincipal().getName());
if (user != null) {
final int unit = user.getUnit();
final Locale locale = LocaleContextHolder.getLocale();
final String unitValue = HelperShortcuts.getUnitForShortcut(this.messageSource, locale, unit);
Set<IDM_BREAD> breads = this.idm_bread_repository.findByDatesBetweenAndUser(new Date(from), new Date(to), user);
Set<IDM_FOOD> foods = this.idm_food_repository.findByDatesBetweenAndUser(new Date(from), new Date(to), user);
Set<IDM_INSULIN> insulins = this.idm_insulin_repository.findByDatesBetweenAndUser(new Date(from), new Date(to), user);
Set<IDM_MEASURE> measures = this.idm_measure_repository.findByDatesBetweenAndUser(new Date(from), new Date(to), user);
Set<IDM_MOOD> moods = this.idm_mood_repository.findByDatesBetweenAndUser(new Date(from), new Date(to), user);
Set<IDM_NOTE> notes = this.idm_note_repository.findByDatesBetweenAndUser(new Date(from), new Date(to), user);
Set<IDM_SPORT> sports = this.idm_sport_repository.findByDatesBetweenAndUser(new Date(from), new Date(to), user);
List<DatatransferListEntry> entries = new ArrayList<>();
entries.addAll(breads);
entries.addAll(foods);
entries.addAll(insulins);
entries.addAll(measures);
entries.addAll(moods);
entries.addAll(notes);
entries.addAll(sports);
entries = this.initHeaders(entries, locale);
model.addAttribute(ReturnKeys.TIME, Helper.getDateTimePatternEvaluation(this.messageSource, locale, from, to));
model.addAttribute(ReturnKeys.ENTRIES, entries);
model.addAttribute(ReturnKeys.USER_UNIT_VALUE, unitValue);
}
return Htmls.WEB_FRAGMENT_EVALUATION_DATA_F;
}
This is getting presented in the fragment like the following:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<body>
<div th:fragment="fragment_evaluations_data" class="margin-top-100 margin-bottom-100">
<div th:each="entry: ${ENTRIES}">
<div class="container page-small page-small-header" th:if="${entry.type == 0}">
<div class="row page-row-evaluation">
<span th:text="${entry.timestampLabel}"></span>
</div>
<div class="row page-row-evaluation"></div>
</div>
<div class="container page-small page-small-header-sub" th:if="${entry.type == 1}">
<div class="row page-row-evaluation">
<span th:text="${entry.timestampLabel}"></span>
</div>
<div class="row page-row-evaluation"></div>
</div>
<div class="container page-small" th:if="${entry.type == 2}">
<div class="row page-row-evaluation">
<div class="col-md-12">
<span class="evaluation-font" th:text="${entry.value} + ' ' + ${USER_UNIT_VALUE}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:text="${entry.timestampLabel} + ' '"></span>
<span th:if="${entry.mealtime == 0}" th:text="'- ' + #{label.meal_before}"></span>
<span th:if="${entry.mealtime == 1}" th:text="'- ' + #{label.meal_after}"></span>
</div>
</div>
<div class="row page-row-evaluation"></div>
</div>
<div class="container page-small" th:if="${entry.type == 3}">
<div class="row page-row-evaluation">
<div class="col-md-12">
<span class="evaluation-font" th:text="${entry.units} + ' ' + #{label.insulin_units}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:text="${entry.timestampLabel}"></span>
</div>
</div>
<div class="row page-row-evaluation"></div>
</div>
<div class="container page-small" th:if="${entry.type == 4}">
<div class="row page-row-evaluation">
<div class="col-md-12">
<span class="evaluation-font" th:text="${entry.units} + ' ' + #{label.bread}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:text="${entry.timestampLabel}"></span>
</div>
</div>
<div class="row page-row-evaluation"></div>
</div>
<div class="container page-small" th:if="${entry.type == 5}">
<div class="row page-row-evaluation">
<div class="col-md-12">
<span class="evaluation-font" th:text="${entry.sporttype.sporttype}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:if="${entry.intensity == 0}" th:text="#{label.intensity_easy}"></span>
<span th:if="${entry.intensity == 1}" th:text="#{label.intensity_moderate}"></span>
<span th:if="${entry.intensity == 2}" th:text="#{label.intensity_hard}"></span>
<span th:if="${entry.intensity == 3}" th:text="#{label.intensity_very_hard}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:text="${entry.duration} + ' ' + #{label.minutes}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:text="${entry.timestampLabel}"></span>
</div>
</div>
<div class="row page-row-evaluation"></div>
</div>
<div class="container page-small" th:if="${entry.type == 6}">
<script>
function loadFoodImage(id) {
$.ajax({
url : "/rest/evaluation/foodiamgeid",
type : "POST",
headers : createAuthorizationTokenHeader(),
async : 1,
data : {
image_id: id
},
success : function(data) {
var image = JSON.parse(data).USER_IMAGE;
if (image != null) {
var selector = "#evaluation_food_image_" + id;
$(selector).attr("src", image);
}
},
error : function(data) {
}
});
}
</script>
<div class="row page-row-evaluation">
<div class="col-md-12">
<span class="evaluation-font" th:text="#{label.food}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:text="${entry.timestampLabel}"></span>
</div>
<div class="col-md-12 margin-top-5">
<img th:id="'evaluation_food_image_' + ${entry.imageId}" src="/img/ic_rolling.gif" class="center-block img-responsiv image-upload-image" th:onload="|loadFoodImage('${entry.imageId}')|" />
</div>
</div>
<div class="row page-row-evaluation"></div>
</div>
<div class="container page-small" th:if="${entry.type == 7}">
<div class="row page-row-evaluation">
<div class="col-md-12">
<span class="evaluation-font" th:text="#{label.note}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:text="${entry.timestampLabel}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:text="${entry.note}"></span>
</div>
</div>
<div class="row page-row-evaluation"></div>
</div>
<div class="container page-small" th:if="${entry.type == 8}">
<div class="row page-row-evaluation">
<div class="col-md-12">
<span class="evaluation-font" th:text="#{label.mood}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:text="${entry.timestampLabel}"></span>
</div>
<div class="col-md-12 text-center">
<img th:if="${entry.mood == 1}" class="image-mood" src="/img/ic_mood_very_bad_red.png"></img>
<img th:if="${entry.mood == 2}" class="image-mood" src="/img/ic_mood_bad_orange.png"></img>
<img th:if="${entry.mood == 3}" class="image-mood" src="/img/ic_mood_neutral_yellow.png"></img>
<img th:if="${entry.mood == 4}" class="image-mood" src="/img/ic_mood_good_green.png"></img>
<img th:if="${entry.mood == 5}" class="image-mood" src="/img/ic_mood_very_good_green.png"></img>
</div>
</div>
<div class="row page-row-evaluation"></div>
</div>
</div>
</div>
</body>
</html>
The Problem
Loading the data this way is a very bad user experience because the loading takes round about 10 seconds and the ui freezes and the user is not able to do something. He stays on the old page, has to wait 10 seconds and after that gets "navigated" to the new fragment.
What i need
I need a thymeleaf/spring solution to load the data asynchronously. So i want the user to see the new page immediatley after he clicked the link and is then getting presented some kind of loading animation while the data is gathered from the server. When the server is done the view should get updated automatically.
Is that possible?

You can have two separate controllers so that when the button is clicked on the other page it just calls the url to display the page:
#RequestMapping(HelperUrls.URL_WEB_EVALUATION)
public String page(Model mode, HttpServletRequest request){
model.addAttribute(ReturnKeys.TIME, new Date());
model.addAttribute(ReturnKeys.ENTRIES, new ArrayList<>());
model.addAttribute(ReturnKeys.USER_UNIT_VALUE, "");
return Htmls.WEB_FRAGMENT_EVALUATION_DATA_F;
}
#RequestMapping(HelperUrls.URL_WEB_EVALUATION_DATA)
public String data(Model model, HttpServletRequest request,
#RequestParam(value = Params.PARAM_FROM, required = true) long from,
#RequestParam(value = Params.PARAM_TO, required = true) long to) {
final IDM_USER user = this.idm_user_repository.findByEmail(request.getUserPrincipal().getName());
if (user != null) {
final int unit = user.getUnit();
final Locale locale = LocaleContextHolder.getLocale();
final String unitValue = HelperShortcuts.getUnitForShortcut(this.messageSource, locale, unit);
Set<IDM_BREAD> breads = this.idm_bread_repository.findByDatesBetweenAndUser(new Date(from), new Date(to), user);
Set<IDM_FOOD> foods = this.idm_food_repository.findByDatesBetweenAndUser(new Date(from), new Date(to), user);
Set<IDM_INSULIN> insulins = this.idm_insulin_repository.findByDatesBetweenAndUser(new Date(from), new Date(to), user);
Set<IDM_MEASURE> measures = this.idm_measure_repository.findByDatesBetweenAndUser(new Date(from), new Date(to), user);
Set<IDM_MOOD> moods = this.idm_mood_repository.findByDatesBetweenAndUser(new Date(from), new Date(to), user);
Set<IDM_NOTE> notes = this.idm_note_repository.findByDatesBetweenAndUser(new Date(from), new Date(to), user);
Set<IDM_SPORT> sports = this.idm_sport_repository.findByDatesBetweenAndUser(new Date(from), new Date(to), user);
List<DatatransferListEntry> entries = new ArrayList<>();
entries.addAll(breads);
entries.addAll(foods);
entries.addAll(insulins);
entries.addAll(measures);
entries.addAll(moods);
entries.addAll(notes);
entries.addAll(sports);
entries = this.initHeaders(entries, locale);
model.addAttribute(ReturnKeys.TIME, Helper.getDateTimePatternEvaluation(this.messageSource, locale, from, to));
model.addAttribute(ReturnKeys.ENTRIES, entries);
model.addAttribute(ReturnKeys.USER_UNIT_VALUE, unitValue);
}
return Htmls.WEB_FRAGMENT_EVALUATION_DATA_F;
}
then when the page loads you can have an onload function in the body tag or somewhere in the page that calls your javascript function and display an animation image somewhere in the page and hide it when the ajax call returns thus:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<body onload="loadEvaluations()">
<img src="animation-image.jpg" style="display:none" id="animationImage"/>
<div th:fragment="fragment_evaluations_data" class="margin-top-100 margin-bottom-100">
<div th:each="entry: ${ENTRIES}">
<div class="container page-small page-small-header" th:if="${entry.type == 0}">
<div class="row page-row-evaluation">
<span th:text="${entry.timestampLabel}"></span>
</div>
<div class="row page-row-evaluation"></div>
</div>
<div class="container page-small page-small-header-sub" th:if="${entry.type == 1}">
<div class="row page-row-evaluation">
<span th:text="${entry.timestampLabel}"></span>
</div>
<div class="row page-row-evaluation"></div>
</div>
<div class="container page-small" th:if="${entry.type == 2}">
<div class="row page-row-evaluation">
<div class="col-md-12">
<span class="evaluation-font" th:text="${entry.value} + ' ' + ${USER_UNIT_VALUE}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:text="${entry.timestampLabel} + ' '"></span>
<span th:if="${entry.mealtime == 0}" th:text="'- ' + #{label.meal_before}"></span>
<span th:if="${entry.mealtime == 1}" th:text="'- ' + #{label.meal_after}"></span>
</div>
</div>
<div class="row page-row-evaluation"></div>
</div>
<div class="container page-small" th:if="${entry.type == 3}">
<div class="row page-row-evaluation">
<div class="col-md-12">
<span class="evaluation-font" th:text="${entry.units} + ' ' + #{label.insulin_units}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:text="${entry.timestampLabel}"></span>
</div>
</div>
<div class="row page-row-evaluation"></div>
</div>
<div class="container page-small" th:if="${entry.type == 4}">
<div class="row page-row-evaluation">
<div class="col-md-12">
<span class="evaluation-font" th:text="${entry.units} + ' ' + #{label.bread}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:text="${entry.timestampLabel}"></span>
</div>
</div>
<div class="row page-row-evaluation"></div>
</div>
<div class="container page-small" th:if="${entry.type == 5}">
<div class="row page-row-evaluation">
<div class="col-md-12">
<span class="evaluation-font" th:text="${entry.sporttype.sporttype}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:if="${entry.intensity == 0}" th:text="#{label.intensity_easy}"></span>
<span th:if="${entry.intensity == 1}" th:text="#{label.intensity_moderate}"></span>
<span th:if="${entry.intensity == 2}" th:text="#{label.intensity_hard}"></span>
<span th:if="${entry.intensity == 3}" th:text="#{label.intensity_very_hard}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:text="${entry.duration} + ' ' + #{label.minutes}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:text="${entry.timestampLabel}"></span>
</div>
</div>
<div class="row page-row-evaluation"></div>
</div>
<div class="container page-small" th:if="${entry.type == 6}">
<script>
function loadFoodImage(id) {
$.ajax({
url : "/rest/evaluation/foodiamgeid",
type : "POST",
headers : createAuthorizationTokenHeader(),
async : 1,
data : {
image_id: id
},
success : function(data) {
var image = JSON.parse(data).USER_IMAGE;
if (image != null) {
var selector = "#evaluation_food_image_" + id;
$(selector).attr("src", image);
}
},
error : function(data) {
}
});
}
</script>
<div class="row page-row-evaluation">
<div class="col-md-12">
<span class="evaluation-font" th:text="#{label.food}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:text="${entry.timestampLabel}"></span>
</div>
<div class="col-md-12 margin-top-5">
<img th:id="'evaluation_food_image_' + ${entry.imageId}" src="/img/ic_rolling.gif" class="center-block img-responsiv image-upload-image" th:onload="|loadFoodImage('${entry.imageId}')|" />
</div>
</div>
<div class="row page-row-evaluation"></div>
</div>
<div class="container page-small" th:if="${entry.type == 7}">
<div class="row page-row-evaluation">
<div class="col-md-12">
<span class="evaluation-font" th:text="#{label.note}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:text="${entry.timestampLabel}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:text="${entry.note}"></span>
</div>
</div>
<div class="row page-row-evaluation"></div>
</div>
<div class="container page-small" th:if="${entry.type == 8}">
<div class="row page-row-evaluation">
<div class="col-md-12">
<span class="evaluation-font" th:text="#{label.mood}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:text="${entry.timestampLabel}"></span>
</div>
<div class="col-md-12 text-center">
<img th:if="${entry.mood == 1}" class="image-mood" src="/img/ic_mood_very_bad_red.png"></img>
<img th:if="${entry.mood == 2}" class="image-mood" src="/img/ic_mood_bad_orange.png"></img>
<img th:if="${entry.mood == 3}" class="image-mood" src="/img/ic_mood_neutral_yellow.png"></img>
<img th:if="${entry.mood == 4}" class="image-mood" src="/img/ic_mood_good_green.png"></img>
<img th:if="${entry.mood == 5}" class="image-mood" src="/img/ic_mood_very_good_green.png"></img>
</div>
</div>
<div class="row page-row-evaluation"></div>
</div>
</div>
</div>
</body>
</html>
then your javascript can do:
function loadEvaluations() {
$('#animationImage').show();
$.ajax({
url : "/evaluation/data",
type : "POST",
headers : createAuthorizationTokenHeader(),
async : !1,
data : {
from: rangeFrom,
to: rangeTo
},
success : function(data) {
$('#animationImage').hide();
$("#portal_container").html(data);
},
error : function(data) {
$('#animationImage').hide();
$("#portal_container").html(data);
}
});
}

Angularjs - wrong behavior when remove item from ng-repeat

In the code below I'm trying to delete rows. There are two level of rows, to remove the inner level I simply use:
$scope.remove = function(array, index, parent, parent_index){
array.splice(index, 1);
if(array.length==0){
parent.splice(parent_index, 1);
}
}
Removing the inner row is working as expected but the outter row never get deleted.
Even if i change the code to try delete the outter row only the inner row disappear which it blows my mind. What is going wrong?
$scope.remove = function(array, index, parent, parent_index){
if(array.length==1){
parent.splice(parent_index, 1);
}
}
HTML code
<v-accordion id="subNestedAccordionB">
<v-pane class="hidePane" ng-repeat="child in item.investmentProposalGrouping"
ng-init="nivel3index = $index" expanded="isExpanded" id="{{ ::child.id }}">
<v-pane-header id="{{ child.id }}-header" aria-controls="{{ child.id }}-header"
class="hide-header">
<h5>
<div class="row hide">
<div class="item-accordion sub-item item-text-wrap col col-20">
{{child.agrupacionDesc}}
</div>
<div class="col col-10"></div>
<div class="col col-10"></div>
<div class="col col-10"></div>
<div class="col col-10"></div>
<div class="col col-10">{{child.agrupacionSaldo | number:2}}</div>
<div class="col col-10">{{child.agrupacionPcrt | number:2}} %</div>
<div class="col col-10"></div>
<div class="col col-10"></div>
</div>
</h5>
</v-pane-header>
<v-pane-content id="{{ child.id }}-content" aria-labelledby="{{ child.id }}-content">
<ul>
<li ng-repeat="distrib in child.distribucion" class="li_product">
<div class="productLink">
<div class="row">
<div style="margin-top: 10px;" class="col col-20 productIndent">
{{distrib.producto.nombreProducto}}
</div>
<div style="margin-top: 10px;" class="col col-10">{{distrib.producto.reqProducto}}
</div>
<div style="margin-top: 10px;" class="col col-10">
{{distrib.producto.iLiquidezProducto}}
</div>
<div style="margin-top: 10px;" class="col col-10">{{distrib.producto.cotizacion |
number:2}}
</div>
<div style="margin-top: 10px;" class="col col-10">{{distrib.producto.numTitulos |
number:2}}
</div>
<!--<<<<<<< HEAD-->
<!--<div class="col col-10 bold" id="producto-{{distrib.producto.idProducto}}">{{distrib.saldo | number:2}}<span ng-click="modal2.show();pasarImporte(child.distribucion, $index)">O</span></div>-->
<!--<div class="col col-10">{{distrib.saldoPcrt | number:2}} %</div>-->
<!--=======-->
<div style="margin-top: 10px;"
ng-if="(isDiscreccional($parent.$parent.$parent.group.agrupacionTipo)==false)"
class="col col-10">{{distrib.saldo | number:2}}
</div>
<div ng-if="(isDiscreccional($parent.$parent.$parent.group.agrupacionTipo)==true)"
class="col col-10">
<img src="img/updown.png"
style=" margin-top: 9px;width: 15px; margin-left: 5px; float: left;"
ng-click="modal3.show();pasarImporte(child.distribucion, $index);"
value="C"/>
<input style=" float: left;width: 59%;text-align: right;"
id="producto-{{distrib.producto.idProducto}}"
ng-change="changeProductPrice(distrib.producto.idProducto)" type="number"
ng-model="distrib.saldo"/>
<span style=" float: left;margin-top: 10px;">{{distrib.producto.divisaProducto}}</span>
</div>
<!--<div ng-if="(isDiscreccional($parent.$parent.$parent.group.agrupacionTipo)==true)" class="col col-10">
<input style="float: left;width: 89%;" type="number" ng-model="distrib.saldoPcrt" disabled />
<span style="float: left;margin-top: 10px;">%</span>
</div>-->
<div style="margin-top: 10px;" class="col col-10">{{distrib.saldoPcrt | number:2}}
</div
<div style="margin-top: 10px;" style="text-align: center;" class="col col-10">
{{showaAndSaveVariation(Initials, distrib.saldo, nivel1index, nivel2index,
nivel3index, $index) | number:2}}
</div>
<!--
<div class="col col-10"><input text="text" ng-model="distrib.producto.saldo"/> €</div>
<div class="col col-10"><input text="text" ng-model="distrib.producto.saldoPcrt"/></div>-->
<!--<div class="col col-10">{{distrib.producto.comDistribucion + distrib.producto.comGestion | number:2}}</div>-->
<div style="margin-top: 10px;" class="col col-10"><img src="img/closeWindow.png"
ng-click="remove(child.distribucion, $index,item.investmentProposalGrouping, nivel3index)">
</div>
</div>
</div>
</li>
</ul>
</v-pane-content>
</v-pane>
</v-accordion>
This is the model:
{
hashKey: "object:180"
agrupacionDesc: "Alternativo"
agrupacionId: "IN"
agrupacionPcrt: 0.00014727422522060096
agrupacionSaldo: 3.05
investmentProposalGrouping:[
{
$$hashKey: "object:195"
agrupacionDesc: "Alternativo"
agrupacionId: "IN"
agrupacionPcrt: 0.00014727422522060096
agrupacionSaldo: 3.05
distribucion: [
{
$$hashKey: "object:204"
producto: Object
saldo: 3.05
saldoPcrt: 0.00014727422522060096
}
]
]
}

Categories

Resources