Careers
An error occurred while processing the template.
The following has evaluated to null or missing:
==> formInstanceId [in template "20116#20152#46029905" at line 278, column 37]
----
Tip: If the failing expression is known to be legally refer to something that's sometimes null or missing, either specify a default value like myOptionalVar!myDefault, or use <#if myOptionalVar??>when-present<#else>when-missing</#if>. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)??
----
----
FTL stack trace ("~" means nesting-related):
- Failed at: ${formInstanceId} [in template "20116#20152#46029905" at line 278, column 35]
----
1<style>
2.notification{
3 position: fixed;
4 top: 20px;
5 right: 20px;
6 z-index: 99999;
7 display: none;
8 max-width: 350px;
9 border: 1px solid;
10}
11.notification-text{
12 padding: 30px;
13}
14.error{
15 background-color: #fff;
16}
17.success{
18 background-color: #fff;
19}
20.notification-tittle{
21 display: block;
22 font-weight: bold;
23 padding: 30px;
24 background-color: #D53F43;
25 color: #fff;
26 font-size: 18px;
27}
28
29.notification-tittle .glyphicon{
30 margin-left: 5px;
31}
32
33.b-form__component-container input.form-control{
34 background-color: #fafafa;
35 border: 1px solid #cccccc;
36 border-width: 1px;
37 height: 40px;
38}
39
40.b-form__component-container select.form-control{
41 background-color: #fafafa;
42 border: 1px solid #cccccc;
43 border-width: 1px;
44}
45
46.b-form__component-container textarea.form-control{
47 background-color: #fafafa;
48 border: 1px solid #cccccc;
49 border-width: 1px;
50 resize:none;
51}
52
53.b-form__component-container .form-group label{
54 color: #000;
55 font-size: 16px;
56 line-height: 24px;
57 font-family: "Roboto", sans-serif;
58 text-transform: capitalize;
59 margin-bottom: 15px;
60}
61
62.b-form__component-container .form-group label.checkbox-default{
63 padding-left: 20px;
64}
65
66.b-form__component-container .custom-file-upload{
67 border: solid 1px #000000;
68 font-size: 11px;
69 font-family: "Roboto", sans-serif;
70 text-transform: uppercase;
71 letter-spacing: 2px;
72 line-height: 10px;
73 padding: 16px;
74 font-weight: bold;
75 width:90px;
76 height: 40px;
77}
78
79.b-form__component-container .b-form__inputFile{
80 display: block;
81 margin-bottom: 38px;
82}
83.b-form__component-container .b-form__inputFile-text{
84 display: inline-block;
85 padding-left: 10px;
86}
87
88.b-form__component-container .radio-inline+.radio-inline, .checkbox-inline+.checkbox-inline{
89 margin-left: 0;
90}
91.b-form__component-container .radio-inline{
92 margin-right: 0;
93 padding-left: 20px;
94}
95
96.b-form__component-container .btn.btn-lg.btn-primary{
97 border: solid 1px #000000;
98 font-size: 11px;
99 font-family: "Roboto", sans-serif;
100 text-transform: uppercase;
101 letter-spacing: 2px;
102 line-height: 10px;
103 padding: 10px;
104 font-weight: bold;
105 background-color: white;
106 color: black;
107 border-radius: 0;
108 width: 221px;
109 height: 40px;
110 float: none !important;
111 left: 50%;
112 position: relative;
113 transform: translateX(-50%);
114 margin-bottom: 40px;
115 margin-top: 40px;
116}
117
118.b-form__component-container .ddl-form-basic-info{
119 display: none;
120}
121
122.b-form__component-container .liferay-ddm-form-field-paragraph .control-label{
123 padding: 20px 0;
124 margin: 0;
125}
126
127.b-form__component-container .liferay-ddm-form-field-paragraph hr{
128 border-top: 0px solid #999;
129 margin-bottom: 0px;
130 margin-top: 0px;
131 margin-bottom: 0px;
132 border: 1px solid;
133 border-top: 0px solid #eee;
134}
135
136
137
138.b-form__component-container .active.lfr-ddm-form-page .row input, .b-form__component-container .active.lfr-ddm-form-page .row .input-group-container, .b-form__component-container .active.lfr-ddm-form-page .row label.control-label, .b-form__component-container .active.lfr-ddm-form-page .row select, .b-form__component-container .active.lfr-ddm-form-page .row textarea, .b-form__component-container .lfr-ddm-form-container .lfr-ddm-form-pagination-controls {
139 width: 100%;
140}
141@media (max-width: 768px) {
142 .b-form__component-container .active.lfr-ddm-form-page .row input[type="checkbox"],
143 .b-form__component-container .active.lfr-ddm-form-page .row input[type="radio"]{
144 width: auto !important;
145 }
146 .b-form__component-container .form-group label{
147 width: 50%
148 }
149
150 .b-cemex-button__inline {
151 display: block;
152 width: 90%;
153 margin-bottom: 10px;
154 }
155}
156
157/*START: Job Application specific styles*/
158 #job-application-container .form-group.liferay-ddm-form-field-paragraph > label{
159 font-family: Roboto;
160 font-size: 40px !important;
161 font-weight: bold;
162 font-style: normal;
163 font-stretch: normal;
164 line-height: normal;
165 letter-spacing: normal;
166 text-align: left;
167 color: #000000;
168 margin-bottom: 48px;
169 }
170
171 .b-form__component-container .liferay-ddm-form-field-paragraph div p{
172
173 font-family: Roboto;
174 font-size: 24px;
175 font-weight: normal;
176 font-style: normal;
177 font-stretch: normal;
178 line-height: 1.5;
179 letter-spacing: 0.5px;
180 text-align: left;
181 color: #000000;
182 border-bottom: 2px solid #45474e;
183 padding-bottom: 48px;
184 margin-bottom: 48px;
185 }
186
187 #b-form-input-File-name-loaded{
188 width: 200px;
189 display: inline-block;
190 margin-right: 20px;
191 }
192
193 .b-form-file-label{
194 display: block;
195 margin-bottom: 16px;
196 }
197
198 .lfr-ddm-form-content > .lfr-ddm-form-pages > .active.lfr-ddm-form-page .row:not(:first-child){
199 margin-bottom: 32px !important;
200 }
201
202 .active.lfr-ddm-form-page .row textarea{
203 height: 149px;
204 max-height: 149px;
205 min-height: 149px;
206 }
207
208 .help-block{
209 color: #a94442;
210 }
211 .lfr-ddm-form-container .lfr-ddm-form-field-container .icon-asterisk.text-warning{
212 display: inline !important;
213 }
214/*END: Job Application specific styles*/
215
216</style>
217
218<#function getParamsOfInputFiles items>
219<#assign isFirstItem = true />
220<#assign itemsToCreate = "" />
221<#assign emailProfileValue = "" />
222
223<#if emailProfile?? && emailProfile.getData()?? && emailProfile.getData()?trim != "">
224 <#assign emailProfileValue = emailProfile.getData() />
225</#if>
226
227<#list items as item>
228<#if !isFirstItem>
229<#assign itemsToCreate = itemsToCreate+","/>
230</#if>
231<#assign itemsToCreate = itemsToCreate + "${item.inputName.getData()?trim}" />
232<#assign isFirstItem = false />
233</#list>
234<#assign itemsToCreate = itemsToCreate+"" />
235
236<#return itemsToCreate/>
237</#function>
238
239
240<#assign currentUrl = themeDisplay.getPortalURL() + themeDisplay.getURLCurrent() />
241<#assign croppedUrl = currentUrl?keep_before_last("/job-application.aspx") + "/thank-you-page-job-application.aspx">
242
243
244<#if FormLocale.getSiblings()?has_content>
245<#list FormLocale.getSiblings() as formLocale>
246<#if locale == formLocale.getData() >
247<#assign formInstanceId = "portlet_com_liferay_dynamic_data_lists_form_web_portlet_DDLFormPortlet_INSTANCE_"+FormGroupId.getData()+"_"+formLocale.getData()>
248
249
250<#if emailProfile?? && emailProfile.getData()?? && emailProfile.getData()?trim != "">
251 <#assign emailProfileValue = emailProfile.getData() />
252</#if>
253
254<div id="job-application-container" class="row">
255 <div class="col-sm-offset-2 col-sm-8">
256 <div class="b-form__component-container ${formLocale.getData()}">
257 <@liferay_portlet["runtime"]
258 defaultPreferences=""
259 instanceId="${FormGroupId.getData()}_${formLocale.getData()}"
260 portletName="com_liferay_dynamic_data_lists_form_web_portlet_DDLFormPortlet"
261 />
262 </div>
263 </div>
264</div>
265
266
267</#if>
268</#list>
269</#if>
270<#if inputFile.getSiblings()?has_content>
271 <#assign items2 = getParamsOfInputFiles(inputFile.getSiblings()) />
272</#if>
273<script type="text/javascript">
274 AUI().ready(function(){
275 "use strict";
276
277 (function () {
278 var id = "${formInstanceId}";
279 var some = "${items2}";
280
281 var url_string = window.location.href;
282 var url = new URL(url_string);
283 var vacancyName = url.searchParams.get("vacancy-name");
284
285 var inputContainers = $('.input-group-container > input');
286 var jobPositionContainer = inputContainers[0];
287 jobPositionContainer.value = vacancyName;
288
289 function setformAccions(){
290
291
292 var form = $("#" + id).find("form");
293
294 var formName = $(form).find(".ddl-form-name").html();
295 var formID = form.attr("id");
296 var formbutton = form.find("button[type='submit']");
297 var action = form.attr("action");
298 var formValues = form.serialize();
299 $(formbutton).prop("type", "button");
300 formbutton.on("click", function () {
301 form.submit();
302 });
303
304 var inputContainers = $('.input-group-container > input');
305 var jobPositionContainer = inputContainers[0];
306 jobPositionContainer.value = vacancyName;
307
308 setAttatchments(formID);
309 form.on("submit", function ($event) {
310
311 var allRequiredFieldsVerification = checkRequiredFields();
312
313 if(allRequiredFieldsVerification){
314 $.ajax({
315 type: "POST",
316 url: action,
317 data: form.serialize(),
318 success: function success(data) {
319 var successCounter = data.match(/successfully/g).length;
320 if (successCounter > 2) {
321 var values = {};
322 $.each(form.serializeArray(), function (i, field) {
323 if (field.name.indexOf("$$") !== -1) {
324 var name = field.name.split("$$")[1].split("$")[0];
325 if (!!values[name]) {
326 values[name] = [field.value].concat(values[name]);
327 } else {
328 values[name] = field.value;
329 }
330 }
331 });
332
333 var nform = $('#b-form-input-Files-Div')[0];
334
335 var newform = new FormData(nform);
336
337 var content = "";
338 var keys = Object.keys(values);
339
340 keys.forEach(function (key) {
341 if (Array.isArray(values[key])) {
342 content += "<p style=\"color:#9aa2a6; font-size:18px; margin:32px 0 16px 0\">" + key + "</p><p style=\"font-size:16px; margin:0\">" + values[key].toString() + "</p>";
343 } else {
344 content += "<p style=\"color:#9aa2a6; font-size:18px; margin:32px 0 16px 0\">" + key + "</p><p style=\"font-size:16px; margin:0\">" + values[key] + "</p>";
345 }
346 });
347
348 var user = Liferay.ThemeDisplay.getUserName() !== "" ? Liferay.ThemeDisplay.getUserName(): "Guest";
349 var messageContent = "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"><html xmlns=\"http://www.w3.org/1999/xhtml\"><head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\"/><title>Email From Liferay</title><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"/><style></style></head><body style=\"margin: 0; padding: 0;\"><table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\"><tr><td><table align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"600\" style=\"background-color:#e4e9ec; padding:40px\"><tbody><tr><td><div id=\"x_introduction\" style=\"background-color:#fff; border-radius:4px; margin:0 auto 24px auto; padding:40px\"><h1 align=\"center\" style=\"margin-bottom:24px; margin-top:0\">Guest</h1><h2 align=\"center\" style=\"margin-bottom:24px; margin-top:0\">Hi,</h2><p style=\"line-height:30px; margin-bottom:24px; margin-top:0\"><b>"+ user +"</b> submitted an entry for "+ formName +" form.</div></td></tr><tr><td><h3 style=\"color:#9aa2a6; font-weight:300; margin:8px 0 8px; text-align:center\">Here's what was entered into the form:</h3><div style=\"background-color:#fff; border-radius:4px; margin:0 auto 24px auto; padding:40px\"><h4 style=\"color:#9aa2a6; font-size:21px; font-weight:500; margin:0\"></h4>"+content+"</div></td></tr></tbody></table></td></tr></table></body></html>";
350
351 newform.append("bodyMail", messageContent);
352
353 var group = defineGroupToSend();
354 newform.append("groupToSend", group);
355
356 $.ajax({
357 url : "/o/mailer/send",
358 type: "POST",
359 enctype: 'multipart/form-data',
360 cache: false,
361 contentType: false,
362 processData: false,
363 data : newform,
364 success: function(response){
365 cleanForm(form);
366 cleanForm(nform);
367 showNotification({
368 title: 'Success!',
369 text: "Your information was sent successfully",
370 type: 'success',
371 time: 3000,
372 });
373 location.href = "${croppedUrl}"
374 },
375 error: function(response){
376 showNotification({
377 title: 'Error!',
378 text: "Ooops, looks like we have a problem with the server, try again!",
379 type: 'error',
380 time: 3000,
381 });
382 }
383 });
384
385 }else{
386 showNotification({
387 title: 'Error!',
388 text: "Ooops, looks like we have a problem with your info, try again!",
389 type: 'error',
390 time: 3000,
391 });
392
393 }
394 }
395 });
396 }
397
398 $event.preventDefault();
399 });
400
401}
402
403function checkRequiredFields(){
404
405 var allFieldsChecked = false;
406
407 var requiredFields = $('span.icon-asterisk.text-warning').parent().parent().parent();
408 var requiredFieldsIds = [];
409 for(i = 0; i<requiredFields.length; i++){
410 requiredFieldsIds[i] = requiredFields[i].id;
411 }
412
413 var missingFields = [];
414 var missingFieldsId = [];
415 var fieldValue = "";
416 for(i = 0; i<requiredFields.length; i++){
417 if(requiredFieldsIds[i] != "b-form-input-Files-Div"){
418 fieldValue = $('#' + requiredFieldsIds[i]).children().children().children()[1].value;
419 if(fieldValue == "" || fieldValue == null){
420 missingFields.push( $('#' + requiredFieldsIds[i]).children().children().children()[1] );
421 missingFieldsId.push('#' + requiredFieldsIds[i]);
422 }
423 } else{
424 fieldValue = $('#' + requiredFieldsIds[i] + " input")[0].value;
425 if(fieldValue == "" || fieldValue == null){
426 missingFields.push( $('#' + requiredFieldsIds[i] + " input")[0] );
427 missingFieldsId.push('#' + requiredFieldsIds[i]);
428 }
429
430 }
431 }
432
433 if (missingFields.length != 0){
434 allFieldsChecked = false;
435
436 if( $(missingFieldsId[0]).find(".help-block").length == 0){
437 $("<div class='help-block'>This field is required.</div>").insertAfter($(missingFields[0]));
438 } else {
439 }
440
441
442
443 var firstMissingField = AUI().one(missingFieldsId[0]);
444 firstMissingField.scrollIntoView();
445
446 } else{
447 allFieldsChecked = true;
448 }
449
450 return allFieldsChecked;
451}
452
453
454
455function defineGroupToSend(){
456 var isEnableCustomDestination = "${customDestination.getData()}";
457 var emailProfile = "${emailProfileValue}";
458 var groupToSend = "default";
459 var fistVariable = "";
460 var secondVariable = "";
461 if(isEnableCustomDestination === "true"){
462 $(".input-select-wrapper").each(function(i, element){
463 var label = $(element).find("label");
464 if(label[0].innerText.toLowerCase() === "area / location"){
465 var select = $(element).find("select");
466 fistVariable = select.val().toLowerCase();
467 }
468 });
469
470 $(".radio.radio-options").each(function(i, element){
471 var label = $(element).siblings("label");
472 if(label[0].innerText.toLowerCase() === "products"){
473 var select = $(element).find("input:checked");
474 secondVariable = select.val().toLowerCase();
475 }
476 });
477
478 if(!!secondVariable && secondVariable !== '' && !!fistVariable && fistVariable !== ''){
479 if(secondVariable === 'aggregates'){
480 if ( fistVariable === "cheshire" || fistVariable === "cumbria" || fistVariable === "durham" || fistVariable === "east riding of yorkshire" || fistVariable === "greater manchester" || fistVariable === "lancashire" || fistVariable === "merseyside" || fistVariable === "northumberland" || fistVariable === "north yorkshire" || fistVariable === "south yorkshire" || fistVariable === "teeside" || fistVariable === "tyneside" || fistVariable === "west yorkshire" || fistVariable === "wales - north"){
481 groupToSend = "group1-"+slugfy(secondVariable.toLowerCase());
482 }else if(fistVariable === "scotland"){
483 groupToSend = "group2-"+slugfy(secondVariable.toLowerCase());
484 }else{
485 groupToSend = ""+slugfy(secondVariable.toLowerCase());
486 }
487 }
488 }else{
489 groupToSend = slugfy(secondVariable.toLowerCase());
490 }
491 } else {
492 if(emailProfile != "")
493 groupToSend = emailProfile;
494 }
495
496 return groupToSend;
497}
498
499function setAttatchments(formID){
500 if(some !== ""){
501 var elements = some.split(",");
502
503 var contenedor = document.querySelector("#"+formID+" .lfr-ddm-form-content .active.lfr-ddm-form-page");
504
505
506 var inputFilesDiv = document.createElement("form");
507 inputFilesDiv.id = "b-form-input-Files-Div";
508 var attatchmentsLabel = document.createElement("label");
509
510 elements.forEach(function (e) {
511 var divInput = document.createElement("div");
512
513
514
515 var span = document.createElement("span");
516 span.classList = "b-form-file-label";
517
518 var asterisk = document.createElement("span");
519 asterisk.classList.add("icon-asterisk", "text-warning");
520
521
522
523 var label = document.createElement("label");
524 var text = document.createTextNode("Browse");
525
526
527 var spanText = document.createTextNode(e);
528 var divInputFileText = document.createElement("div");
529 divInput.classList = "b-form__inputFile";
530 divInputFileText.classList = "b-form__inputFile-text "+e;
531
532 var fileInput = document.createElement("input");
533 fileInput.className += "input form-control";
534 fileInput.id = "b-form-input-File-name-loaded";
535 fileInput.disabled = true;
536
537 label.setAttribute("for", slugfy(e));
538 label.classList = "custom-file-upload";
539
540 span.appendChild(spanText);
541
542 span.append(asterisk);
543 label.appendChild(text);
544
545 divInput.appendChild(span);
546 divInput.appendChild(fileInput);
547 divInput.appendChild(label);
548
549
550
551 divInput.appendChild(divInputFileText);
552
553
554
555
556 var input = document.createElement("input");
557 input.type = "file";
558 input.name = slugfy(e);
559 input.id = slugfy(e);
560 input.classList="hidden";
561 input.accept = ".jpg, .jpeg, .png, .doc, .docx, .pdf";
562 divInput.appendChild(input);
563 inputFilesDiv.appendChild(divInput);
564 });
565
566
567 var here = $(".lfr-ddm-form-content > .lfr-ddm-form-pages > .active.lfr-ddm-form-page .row")[4];
568 $(inputFilesDiv).insertAfter(here);
569
570 }
571
572 $('#b-form-input-Files-Div input[type="file"]').on("change", function($event){
573 $('#b-form-input-File-name-loaded').val($event.target.files[0].name);
574 });
575
576 $(".checkbox-multiple-options").find("label").addClass("col-xs-6 col-md-4");
577 $(".radio.radio-options").find("label").addClass("col-xs-6 col-md-4");
578
579}
580
581function cleanForm(form){
582 $(form).find('input:text, input:password, input:file, select, textarea').val('');
583 $(form).find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
584 $(form).find('.b-form__inputFile-text').html("No file chosen");
585 $(form).find('.help-block').remove();
586}
587
588function slugfy(e){
589 return e.replace(/ /g, "-");
590}
591
592
593
594function showNotification(notificationObj){
595 var divTop = document.createElement("div");
596 divTop.classList.add("notification");
597 divTop.classList.add(notificationObj.type);
598 divTop.setAttribute("id", "notificationPopUp");
599
600 var divContent = document.createElement("div");
601 divContent.classList.add("nofitication-content");
602
603 var spanTitle = document.createElement("span");
604 spanTitle.classList.add("notification-tittle");
605 spanTitle.classList.add("text-capitalize");
606 var titleText = document.createTextNode(notificationObj.title);
607
608
609 var spanTitleIcon = document.createElement("span");
610 spanTitleIcon.classList.add("glyphicon");
611 if(notificationObj.type === "error"){
612 spanTitleIcon.classList.add("glyphicon-remove-circle");
613 }else{
614 spanTitleIcon.classList.add("glyphicon-ok-circle");
615 }
616
617 var divTextContent = document.createElement("div");
618 divTextContent.classList.add("notification-text");
619
620 var spanContent = document.createElement("span");
621 var contentText = document.createTextNode(notificationObj.text);
622
623 spanTitle.appendChild(titleText);
624 spanTitle.appendChild(spanTitleIcon);
625 spanContent.appendChild(contentText);
626 divTextContent.appendChild(spanContent);
627
628 divContent.appendChild(spanTitle);
629 divContent.appendChild(divTextContent);
630
631 divTop.appendChild(divContent);
632 document.body.appendChild(divTop);
633 $("#notificationPopUp").slideToggle( "slow" );
634
635 setTimeout(function(){
636 $("#notificationPopUp").slideToggle( "slow" );
637 }, notificationObj.time );
638
639 setTimeout(function(){
640 $("#notificationPopUp").remove();
641 $("#b-email-modal-component__content .lfr-alert-container").hide();
642 }, notificationObj.time + 1500);
643
644}
645
646var interval = setInterval(function(){
647 if(some !== "" && $("#b-form-input-Files-Div").length === 0){
648 setformAccions();
649 clearInterval(interval);
650 }else{
651 clearInterval(interval);
652 }
653}, 500);
654
655
656})(jQuery);
657});
658</script>