How do I populate this popup with the corresponding data?
What follows is my ongoing attempt to learn Nodejs while simultaneously learning Nodejs. I've got a fair amount of a tutorial done, but I'm still baffled more than I am productive.
So, here's my question: I'm trying to figure out where the data is coming from that's showing up on a popup window. Up to this point, I've been able to mirror some of the syntax, but now I'm at a point where I've got to do more than just "dig."
Here's what I've got:
When you click on the button you see below (Edit Activity)...
...you're triggering a bunch of code to display a popup that looks like this:
To get the form to display...
Here's the link:
The "note-link" class triggers the "note-link" method which looks like this:
It's the CAMS.showActivityForm that takes it to the next step and that looks like this:
var model = objectModels[type], is going to reach out to "object-models.js" and find the "type" that matches, what in this case is, "note." That looks like this:
options: {'call': 'Call Note', 'visit': 'Visit Note', 'reminder': 'Reminder'} will dictate the fields that are displayed in the form. They'll be merged into the "opts" variable which then passed to the "formit.js" file in the last line of the "showActivityForm" method referenced earlier.
The "formit.js" code looks like this (you probably don't need all this, but here you go)
So I've got the form that's used to add a note. But what I need to do is populate the fields of the form with the info that corresponds to the already existing note.
How?
I've been able to find the "service" that's populating the list of companies, but I don't where to be looking for list of "activities," and then, once I find that list, I don't know how to write a query that's going to populate the form fields as they're being constructed in "formit.js"
What am I looking for and how do I get this done?
arrow.png
assign.png
note.png
So, here's my question: I'm trying to figure out where the data is coming from that's showing up on a popup window. Up to this point, I've been able to mirror some of the syntax, but now I'm at a point where I've got to do more than just "dig."
Here's what I've got:
When you click on the button you see below (Edit Activity)...
...you're triggering a bunch of code to display a popup that looks like this:
To get the form to display...
Here's the link:
<a href="#" style="float:right;"><i class="fas fa-fw fa-trash"></i></a><a href="#" class="note-link" data-prospect-id="{{ data._id }}" data-route="companies" data-company-name="{{ data.name|e('html_attr') }}" data-user-id="{{ (data.owner is empty?'undefined':data.owner._id) }}" data-toggle="tooltip" title="Edit Activity" data-activity-type="note" data-activityId={{ activity._id }}" style="float:right;"><i class="fas fa-fw fa-pencil fa-pencil-alt"></i></a>The "note-link" class triggers the "note-link" method which looks like this:
$(document).on('click', '.note-link', function () {
console.log("boom");
var id = (typeof $(this).attr('data-company-id') != 'undefined') ? $(this).attr('data-company-id') : $(this).attr('data-prospect-id');
//var cId = $(this).attr('data-company-id'),
var cId = id,
pId = $(this).attr('data-proposal-id'),
type = $(this).attr('data-activity-type');
route = ((typeof $(this).attr('data-route') == 'undefined') ? route : $(this).attr('data-route'));
if (typeof cId == 'undefined' || typeof type == 'undefined') {
CAMS.alert('Invalid Link', 'The selected link is not properly formatted. Please refresh the page or contact support.', 'error');
}
CAMS.showActivityForm(cId, pId, type);
// Engage / Add Activity for filtered or bulk dataset
$companySelect = $(document).find('select[name="company"].select2');
if (typeof $companySelect != 'undefined') {
if ($companySelect.length > 0) {
if (cId == 'bulk') {
// add the select2 elements
CAMS.createCompanySelector($companySelect);
// check for a company id in the opts
var _company = pickedList_s();
if (typeof _company != 'undefined') {
if (Array.isArray(_company)) {
_company.forEach((item) => {
$companySelect.append('<option value="' + item.id + '" selected="selected">' + item.name + '</option>').trigger('change');
});
}
}
} else {
$companySelect.closest('.form-group').remove();
}
}
}
});It's the CAMS.showActivityForm that takes it to the next step and that looks like this:
this.showActivityForm = function (companyId, proposalId, type) {
console.log(type);
[b]var model = objectModels[type],[/b]
fc = model.singular.substring(0, 1),
config = {
title: 'Add a' + ((fc == 'a' || fc == 'e' || fc == 'i' || fc == 'o' || fc == 'u') ? 'n' : '') + ' ' + ucwords(model.singular),
directionsText: 'Complete the form below to add a new ' + model.singular + '.',
fields: model.fields,
onShow: function (self) {
// add in the additional events and plugins
// add in datetime support
self.$el.find('input.field-datetime').datepicker({
autoClose: true,
language: 'en',
timepicker: true,
dateFormat: 'mm/dd/yyyy',
timeFormat: 'h:ii AA',
showEvent: 'focus',
minutesStep: 5
});
},
ajax: {
path: '/companies/add-activity',
params: {
company: companyId,
proposal: proposalId,
type: type,
},
onComplete: function (resp, self) {
if (resp.error) {
self.addMsg(resp.msg);
return false;
}
companyId = (companyId == 'bulk' ? resp.data.id : companyId);
recordId = companyId;
$(window).trigger('open-company-details', [companyId, ((typeof route != 'undefined') ? route : '/companies/'), 'history']);
}
}
};
// show the form
[b] formIt.show(config);[/b]
};var model = objectModels[type], is going to reach out to "object-models.js" and find the "type" that matches, what in this case is, "note." That looks like this:
note: {
singular: 'note/reminder',
plural: 'note/reminders',
fields: {
activityType: {
type: 'string',
required: true,
[b]options: {'call': 'Call Note', 'visit': 'Visit Note', 'reminder': 'Reminder'}[/b]
},
date: {
type: 'datetime',
required: true
},
notes: {
type: 'string',
required: true,
multiline: true
},
company: {
type: 'id',
required: true,
lookup: 'companies',
display: '{{ name }}',
class: 'select2'
}
}
},options: {'call': 'Call Note', 'visit': 'Visit Note', 'reminder': 'Reminder'} will dictate the fields that are displayed in the form. They'll be merged into the "opts" variable which then passed to the "formit.js" file in the last line of the "showActivityForm" method referenced earlier.
The "formit.js" code looks like this (you probably don't need all this, but here you go)
'use strict';
function FormIt(options) {
// Create the defaults we will extend
this.defaults = {
fields: {},
title: 'New Form',
directionsText: 'Complete the form below.',
directionsClass: 'lead',
containerClass: 'mfp-hide white-popup white-popup-md',
submitButtonText: '<i class="fas fa-fw fa-check"></i> Save',
submitButtonClass: 'btn btn-success',
cancelButtonText: 'Cancel',
cancelButtonClass: 'btn btn-link',
loadDataFromUrl: '',
onShow: function(self){},
onDataReceived: function(data, self){ return data; },
onDataLoaded: function(data, self){},
onValid: function(data, self){},
onSubmit: function(data, self){}
};
// create a new form uniq id
this.formId = this._uniqid();
// establish the opts that will be used
this.opts = {};
this.$el;
}
FormIt.prototype.init = function() {
// create the base container to use
var html = '<div id="formit-' + this.formId + '" class="' + this.opts.containerClass + '">' +
'<h3>' + this.opts.title + '</h3>' +
'<hr />' +
'<p class="' + this.opts.directionsClass + '">' + this.opts.directionsText + '</p>' +
'<div class="formit-errors"></div>' +
'<div class="loading">' +
'<h3 class="text-center"><i class="fas fa-fw fa-cog fa-spin"></i> Loading...</h3>' +
'</div>' +
'<form class="needs-validation d-none" novalidate>' +
'<div class="field-list"></div>' +
'<hr />' +
'<div class="buttons-footer">' +
'<button type="submit" class="btn-formit-submit ' + this.opts.submitButtonClass + '">' + this.opts.submitButtonText + '</button>' +
'<button type="button" class="btn-formit-cancel ' + this.opts.cancelButtonClass + '">' + this.opts.cancelButtonText + '</button>' +
'</div>' +
'</form>' +
'</div>';
if ($('#formit-' + this.formId).length === 0) {
$('body').append(html);
} else {
$('#formit-' + this.formId).replaceWith(html);
}
this.$el = $('#formit-' + this.formId);
// add in the events
this._addEvents();
};
FormIt.prototype.show = function(opts) {
// create the instance specific options
this.opts = $.extend({}, this.defaults, opts);
// ensure there are fields for the form
if ( this._getObjectKeys(this.opts.fields).length === 0 ) {
throw 'Invalid fields option provided.';
}
// delete any existing form
$('div[id^="formit-"]').remove();
// create the base form
this.init();
// build the html form
this._buildForm();
// open the form
$.magnificPopup.open({
alignTop: true,
items: {
type: 'inline',
src: this.$el
}
});
// hide the loading screen if we do not need to load any external data
if (this.opts.loadDataFromUrl === '') {
this.hideLoading();
this.opts.onDataLoaded({}, this);
} else {
this.loadData();
}
// call the callback
if (typeof this.opts.onShow == 'function') {
this.opts.onShow(this);
}
};
FormIt.prototype.close = function() {
$.magnificPopup.close();
};
FormIt.prototype.getData = function() {
var data = {},
fields = this.$el.find('form').serializeArray();
for (var i in fields) {
data[ fields[i].name ] = fields[i].value;
}
return data;
};
FormIt.prototype.loadData = function() {
// set a local reference to the object for inside the ajax callback
var self = this;
// show the loading screen
this.showLoading();
// look up the data
$.get(this.opts.loadDataFromUrl, {}, function(resp){
if (resp.error) {
self.close();
return CAMS.alert('Oh no!', resp.msg, 'error');
}
// set a reference
var data = (typeof resp.data.rows != 'undefined') ? resp.data.rows[0] : resp.data;
// call a lifecycle method
data = self.opts.onDataReceived(data, this);
// stop on false
if (!data) {
return self.close();
}
// load the form
self._loadDataIntoForm(data);
// show the form
self.hideLoading();
}, 'json').fail(function(){
self.close();
CAMS.alert('Oh no!', 'An unexpected error was encountered while trying to load your data. Please try again.', 'error');
});
};
FormIt.prototype.reset = function(options) {
};
FormIt.prototype.addMsg = function(msg, type) {
type = type || 'danger';
this.clearMsg();
this.$el.find('.formit-errors').append('<p class="alert alert-'+type+'">'+msg+'</p>');
};
FormIt.prototype.clearMsg = function() {
this.$el.find('.formit-errors').empty();
};
FormIt.prototype.hideLoading = function() {
this.$el.find('.loading').addClass('d-none');
this.$el.find('form').removeClass('d-none');
};
FormIt.prototype.showLoading = function() {
this.$el.find('form').addClass('d-none');
this.$el.find('.loading').removeClass('d-none');
};
FormIt.prototype._addEvents = function() {
var self = this;
// add in the submission form
this.$el.on('submit', 'form', function(e){
var $f = $(this);
e.preventDefault();
e.stopPropagation();
$f.addClass('was-validated');
if ($f[0].checkValidity() === false) {
self.addMsg('Please check the highlighted fields.');
return false;
}
self.clearMsg();
var data = self.getData(),
resp;
if (typeof self.opts.onValid == 'function') {
resp = self.opts.onValid(data, self);
if (resp === false) {
return false;
}
}
if (typeof self.opts.onSubmit == 'function') {
resp = self.opts.onSubmit(data, self);
if (resp === false) {
return false;
}
}
if (typeof self.opts.ajax == 'undefined') {
self.close();
}
self._ajax();
});
this.$el.on('click', 'button.btn-formit-cancel', function(){
self.close();
});
};
FormIt.prototype._ajax = function() {
if (typeof this.opts.ajax.path == 'undefined' || this.opts.ajax.path === '') {
throw 'Invalid or missing ajax.path value.';
}
var self = this,
$btn = this.$el.find('button[type="submit"]'),
btnText = $btn.html(),
params = (typeof this.opts.ajax.params != 'undefined') ? '&' + this._serialize(this.opts.ajax.params) : '',
data = this.$el.find('form').serialize() + params;
$btn.html('<i class="fas fa-fw fa-spinner-third fa-spin"></i> Processing...');
$.post(this.opts.ajax.path, data, function(resp){
if (typeof self.opts.ajax.onComplete == 'function') {
var check = self.opts.ajax.onComplete(resp, self);
if (check === false) {
return false;
}
}
self.close();
}, 'json').fail(function(){
if (typeof self.opts.ajax.onError == 'function') {
self.opts.ajax.onError(self);
}
}).always(function(){
$btn.html(btnText)
});
};
FormIt.prototype._buildForm = function() {
var fields = [];
for (var fid in this.opts.fields) {
fields.push( this._createField(fid, this.opts.fields[fid]) );
}
this.$el.find('form .field-list').empty().append( fields.join('') );
};
FormIt.prototype._getObjectKeys = function(obj) {
var keys = [];
for (var k in obj) {
keys.push(k);
}
return keys;
}
FormIt.prototype._loadDataIntoForm = function(data) {
var $field, model;
for (var fid in data) {
// load the field
$field = $('#formit-' + fid);
if ($field.length === 0) {
continue;
}
// look for the field model
model = this.opts.fields[fid];
// load the value based on the type of field
switch (true) {
// look for a select2
case (typeof model.lookup != 'undefined'):
if (typeof data[fid] == 'object' && typeof data[fid]._id != 'undefined') {
$field.empty().append('<option value="'+data[fid]._id+'">'+data[fid].text+'</option>');
}
break;
default:
$field.val( data[fid] );
break;
}
}
// call the loaded lifecycle method
this.opts.onDataLoaded(data, this);
};
FormIt.prototype._createField = function(fid, field) {
var name = field.name || fid,
label = field.label || this._fieldLabelFromId(fid),
placeholder = field.placeholder || label,
classes = field.class || '',
help = field.help || '',
input = '';
switch (true) {
// static text
case (field.type == 'static'):
var htmlType = field.htmlType || 'p';
return '<' + htmlType + ' class="' + classes + '">' + label + '</' + htmlType + '>';
break;
// check for a select2
case (typeof field.lookup != 'undefined'):
input = '<select id="formit-' + fid + '" name="' + name + '" class="form-control ' + classes + '"' + ((field.required) ? ' required' : '') + '></select>';
break;
// multiline string = textarea
case (field.type == 'string' && typeof field.multiline != 'undefined' && field.multiline):
input = '<textarea id="formit-' + fid + '" name="' + name + '" placeholder="' + placeholder + '" class="form-control ' + classes + '"' + ((field.required) ? ' required' : '') + '></textarea>';
break;
// string with contacts is a select2 calling the contacts of the associated company
case (field.type == 'string' && typeof field.contacts != 'undefined' && field.contacts):
var opts = ''; // this is a placeholder for when I implement loading data into the form
input = '<select id="formit-' + fid + '" name="' + name + '" class="form-control contacts select2 ' + classes + '"' + ((field.required) ? ' required' : '') + ' data-route="/companies/contacts">' + opts + '</select>';
break;
// string with options = select
case (field.type == 'string' && typeof field.options != 'undefined'):
var opts = '',
isArr = Array.isArray(field.options),
val = '';
for (var k in field.options) {
val = (isArr) ? field.options[k] : k;
opts += '<option value="' + val + '">' + field.options[k] + '</option>';
}
input = '<select id="formit-' + fid + '" name="' + name + '" class="form-control ' + classes + '"' + ((field.required) ? ' required' : '') + '>' + opts + '</select>';
break;
// string, double, integer, email, datetime
default:
let inputType = 'text';
let attr = ' ';
if (field.type == 'double' || field.type == 'integer') {
inputType = 'number';
attr = (field.type == 'double') ? ' step="0.01"' : ' ';
} else if (field.type == 'email') {
inputType = 'email';
}
if (field.type == 'datetime') {
classes += ' field-datetime';
}
input = '<input type="' + inputType + '" id="formit-' + fid + '" name="' + name + '" placeholder="' + placeholder + '" class="form-control ' + classes + '"' + ((field.required) ? ' required' : '') + attr + '>';
break;
}
return '<div class="form-group">' +
'<label for="formit-' + fid + '" class="control-label">' + label + ((field.required) ? '<strong>*</strong>' : '') + '</label>' +
input +
((help !== '') ? '<small class="text-muted"><i class="fas fa-fw fa-question-circle"></i> ' + help + '</small>' : '') +
'</div>';
};
FormIt.prototype._fieldLabelFromId = function(fid) {
return (fid + '')
.replace(/^(.)|\s+(.)/g, function ($1) {
return $1.toUpperCase()
});
};
FormIt.prototype._serialize = function(obj, prefix) {
var str = [],
p;
for (p in obj) {
if (obj.hasOwnProperty(p)) {
var k = prefix ? prefix + "[" + p + "]" : p,
v = obj[p];
str.push((v !== null && typeof v === "object") ?
serialize(v, k) :
encodeURIComponent(k) + "=" + encodeURIComponent(v));
}
}
return str.join("&");
};
FormIt.prototype._uniqid = function(prefix, moreEntropy) {
// discuss at: http://locutus.io/php/uniqid/
// original by: Kevin van Zonneveld (http://kvz.io)
// revised by: Kankrelune (http://www.webfaktory.info/)
// note 1: Uses an internal counter (in locutus global) to avoid collision
// example 1: var $id = uniqid()
// example 1: var $result = $id.length === 13
// returns 1: true
// example 2: var $id = uniqid('foo')
// example 2: var $result = $id.length === (13 + 'foo'.length)
// returns 2: true
// example 3: var $id = uniqid('bar', true)
// example 3: var $result = $id.length === (23 + 'bar'.length)
// returns 3: true
if (typeof prefix === 'undefined') {
prefix = ''
}
var retId
var _formatSeed = function (seed, reqWidth) {
seed = parseInt(seed, 10).toString(16) // to hex str
if (reqWidth < seed.length) {
// so long we split
return seed.slice(seed.length - reqWidth)
}
if (reqWidth > seed.length) {
// so short we pad
return Array(1 + (reqWidth - seed.length)).join('0') + seed
}
return seed
}
var $global = (typeof window !== 'undefined' ? window : global)
$global.$locutus = $global.$locutus || {}
var $locutus = $global.$locutus
$locutus.php = $locutus.php || {}
if (!$locutus.php.uniqidSeed) {
// init seed with big random int
$locutus.php.uniqidSeed = Math.floor(Math.random() * 0x75bcd15)
}
$locutus.php.uniqidSeed++
// start with prefix, add current milliseconds hex string
retId = prefix
retId += _formatSeed(parseInt(new Date().getTime() / 1000, 10), 8)
// add seed hex string
retId += _formatSeed($locutus.php.uniqidSeed, 5)
if (moreEntropy) {
// for more entropy we add a float lower to 10
retId += (Math.random() * 10).toFixed(8).toString()
}
return retId
};
if (!Array.isArray) {
Array.isArray = function(arg) {
return Object.prototype.toString.call(arg) === '[object Array]';
};
}So I've got the form that's used to add a note. But what I need to do is populate the fields of the form with the info that corresponds to the already existing note.
How?
I've been able to find the "service" that's populating the list of companies, but I don't where to be looking for list of "activities," and then, once I find that list, I don't know how to write a query that's going to populate the form fields as they're being constructed in "formit.js"
What am I looking for and how do I get this done?
arrow.png
assign.png
note.png
ASKER
Morning, Chris!
It's 7:25 am in Nashville, I'm thinking it's about 1:30 your time...
Remember this question: https://www.experts-exchange.com/questions/29177925/How-is-formit-working-in-this-code.html
You were kind enough to guide me through the "formit.js" dynamic. You showed me how the "object-model.js" file is what's feeding the "fields" property in the "showActivityForm" method. Head out to http://brucegust.com/adm/bSmart/#pencil_show to see my notes.
Here's the relevant "object-model.js" code:
note: {
singular: 'note/reminder',
plural: 'note/reminders',
fields: {
activityType: {
type: 'string',
required: true,
options: {'call': 'Call Note', 'visit': 'Visit Note', 'reminder': 'Reminder'}
},
date: {
type: 'datetime',
required: true
},
notes: {
type: 'string',
required: true,
multiline: true
},
company: {
type: 'id',
required: true,
lookup: 'companies',
display: '{{ name }}',
class: 'select2'
}
}
},
Notice, within the fields property (feel free to correct my nomenclature), you've got four variables: activityType, date, notes and company.
Here's a screenshot of the actual popup:
...and here's the code:
The note variable has four properties (again, feel free to correct my nomenclature),yet only three are displayed: activityType, date and notes. Where's "company?"
The reason I'm interested is because when you look at the way "company" is documented in the "objects-model.js" file, it looks as though there's a value attached to it:
company: {
type: 'id',
required: true,
lookup: 'companies',
display: '{{ name }}',
class: 'select2'
I'm thinking that's something comparable to what I'm trying to accomplish!
But I don't see in the GUI or the source code? I looked up "select2," and that appears to be a third party package, but there's nothing in the docs that explains it not being included in the DOM.
Any ideas?
It's 7:25 am in Nashville, I'm thinking it's about 1:30 your time...
Remember this question: https://www.experts-exchange.com/questions/29177925/How-is-formit-working-in-this-code.html
You were kind enough to guide me through the "formit.js" dynamic. You showed me how the "object-model.js" file is what's feeding the "fields" property in the "showActivityForm" method. Head out to http://brucegust.com/adm/bSmart/#pencil_show to see my notes.
Here's the relevant "object-model.js" code:
note: {
singular: 'note/reminder',
plural: 'note/reminders',
fields: {
activityType: {
type: 'string',
required: true,
options: {'call': 'Call Note', 'visit': 'Visit Note', 'reminder': 'Reminder'}
},
date: {
type: 'datetime',
required: true
},
notes: {
type: 'string',
required: true,
multiline: true
},
company: {
type: 'id',
required: true,
lookup: 'companies',
display: '{{ name }}',
class: 'select2'
}
}
},
Notice, within the fields property (feel free to correct my nomenclature), you've got four variables: activityType, date, notes and company.
Here's a screenshot of the actual popup:
...and here's the code:
<div id="formit-5e8f1264e41b7" class="white-popup white-popup-md">
<h3>Add a Note/reminder</h3>
<hr>
<p class="lead">Complete the form below to add a new note/reminder.</p>
<div class="formit-errors"></div>
<div class="loading d-none">
<h3 class="text-center"><i class="fas fa-fw fa-cog fa-spin"></i> Loading...</h3>
</div>
<form class="needs-validation" novalidate="">
<div class="field-list">
<div class="form-group">
<label for="formit-activityType" class="control-label">ActivityType<strong>*</strong></label>
<select id="formit-activityType" name="activityType" class="form-control " required="">
<option value="call">Call Note</option>
<option value="visit">Visit Note</option>
<option value="reminder">Reminder</option>
</select>
</div>
<div class="form-group">
<label for="formit-date" class="control-label">Date<strong>*</strong></label>
<input type="text" id="formit-date" name="date" placeholder="Date" class="form-control field-datetime" required="">
</div>
<div class="form-group">
<label for="formit-notes" class="control-label">Notes<strong>*</strong></label>
<textarea id="formit-notes" name="notes" placeholder="Notes" class="form-control " required=""></textarea>
</div>
</div>
<hr>
<div class="buttons-footer">
<button type="submit" class="btn-formit-submit btn btn-success"><i class="fas fa-fw fa-check"></i> Save</button>
<button type="button" class="btn-formit-cancel btn btn-link">Cancel</button>
</div>
</form>
<button title="Close (Esc)" type="button" class="mfp-close">×</button>
</div>
The note variable has four properties (again, feel free to correct my nomenclature),yet only three are displayed: activityType, date and notes. Where's "company?"
The reason I'm interested is because when you look at the way "company" is documented in the "objects-model.js" file, it looks as though there's a value attached to it:
company: {
type: 'id',
required: true,
lookup: 'companies',
display: '{{ name }}',
class: 'select2'
I'm thinking that's something comparable to what I'm trying to accomplish!
But I don't see in the GUI or the source code? I looked up "select2," and that appears to be a third party package, but there's nothing in the docs that explains it not being included in the DOM.
Any ideas?
Hmmmm.
Yeah - it's mid-afternoon here (15:30 now) and the sun is shining - unfortunately, we're in lock down so can't really enjoy it - what I wouldn't give to be sitting outside the pub drinking a pint of Guinness right now :)
First off, your nomenclature is just fine.
Select2 is just a jQuery plugin that adds som functionality and styling to a standard <select> element
I don't know why the Company field isn't showing - best to double check that you are actually using the correct file (sounds obvious, but clearing cache / rebuilding / etc can help). To make sure, just change the name of one of the other properties and see if theform reflects these changes.
You company object does have a display property, but nowhere in the FormIt class is that used, so maybe it's being used somwhere else in your code.
Do you have any links to the FormIt class - done a Google and can't really find anything relevant.
Also, out of interest, what software do you use for development. The reason I ask is because sometimes the best way to work your way through the code is by using a decent IDE that allows you to debug your code. VS Code for example, will allow you to run your Node app in debug mode - this means that you can attach breakpoints to your code and when it get's there, it will stop and throw you back into Code, so you can examine all the behind-the-scenes variables. You can also step through your code line-by-line and the debugger will follow the chain of function calls. Often this is a lot more meaningful that trying to read through the code.
Yeah - it's mid-afternoon here (15:30 now) and the sun is shining - unfortunately, we're in lock down so can't really enjoy it - what I wouldn't give to be sitting outside the pub drinking a pint of Guinness right now :)
First off, your nomenclature is just fine.
Select2 is just a jQuery plugin that adds som functionality and styling to a standard <select> element
I don't know why the Company field isn't showing - best to double check that you are actually using the correct file (sounds obvious, but clearing cache / rebuilding / etc can help). To make sure, just change the name of one of the other properties and see if theform reflects these changes.
You company object does have a display property, but nowhere in the FormIt class is that used, so maybe it's being used somwhere else in your code.
Do you have any links to the FormIt class - done a Google and can't really find anything relevant.
Also, out of interest, what software do you use for development. The reason I ask is because sometimes the best way to work your way through the code is by using a decent IDE that allows you to debug your code. VS Code for example, will allow you to run your Node app in debug mode - this means that you can attach breakpoints to your code and when it get's there, it will stop and throw you back into Code, so you can examine all the behind-the-scenes variables. You can also step through your code line-by-line and the debugger will follow the chain of function calls. Often this is a lot more meaningful that trying to read through the code.
ASKER
Hey, Chris!
First of all, I'm just using Notepad++. I've got PHP Storm, but I've just gotten in the habit of using your basic text editor.
I will double check "company." Not sure why that isn't showing up, either, however...
I've been able to make some progress...!
First of all, I've created another method that's designed to capture the activityID from the data embedded within the link. It will run a query based on that link and then populate the fields accordingly in the appropriate fields.
Just to make sure I'm barking up the right tree, I did this:
Going by the way they assigned attributes to the date field, I thought perhaps I could that approach and sign values to the "notes" input field (line #23).
It didn't work. Do you have any ideas?
First of all, I'm just using Notepad++. I've got PHP Storm, but I've just gotten in the habit of using your basic text editor.
I will double check "company." Not sure why that isn't showing up, either, however...
I've been able to make some progress...!
First of all, I've created another method that's designed to capture the activityID from the data embedded within the link. It will run a query based on that link and then populate the fields accordingly in the appropriate fields.
Just to make sure I'm barking up the right tree, I did this:
this.displayActivityForm = function (companyId, proposalId, type) {
//console.log(type);
var model = objectModels[type],
fc = model.singular.substring(0, 1),
config = {
title: 'Add a' + ((fc == 'a' || fc == 'e' || fc == 'i' || fc == 'o' || fc == 'u') ? 'n' : '') + ' ' + ucwords(model.singular),
directionsText: 'Make your changes below and then click, "SAVE."',
fields: model.fields,
onShow: function (self) {
// add in the additional events and plugins
// add in datetime support
self.$el.find('input.field-datetime').datepicker({
autoClose: true,
language: 'en',
timepicker: true,
dateFormat: 'mm/dd/yyyy',
timeFormat: 'h:ii AA',
showEvent: 'focus',
minutesStep: 5
});
self.$el.find('input.field-notes').value="hello";
},
ajax: {
path: '/companies/add-activity',
params: {
company: companyId,
proposal: proposalId,
type: type,
},
onComplete: function (resp, self) {
if (resp.error) {
self.addMsg(resp.msg);
return false;
}
companyId = (companyId == 'bulk' ? resp.data.id : companyId);
recordId = companyId;
$(window).trigger('open-company-details', [companyId, ((typeof route != 'undefined') ? route : '/companies/'), 'history']);
}
}
};
// show the form
formIt.show(config);
};Going by the way they assigned attributes to the date field, I thought perhaps I could that approach and sign values to the "notes" input field (line #23).
It didn't work. Do you have any ideas?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Chris!
This is working:
this.displayActivityForm = function (companyId, proposalId, type) {
//console.log(type);
var model = objectModels[type],
fc = model.singular.substring(0, 1),
config = {
title: 'Add a' + ((fc == 'a' || fc == 'e' || fc == 'i' || fc == 'o' || fc == 'u') ? 'n' : '') + ' ' + ucwords(model.singular),
directionsText: 'Make your changes below and then click, "SAVE."',
fields: model.fields,
onShow: function (self) {
// add in the additional events and plugins
// add in datetime support
self.$el.find('input.field-datetime').datepicker({
autoClose: true,
language: 'en',
timepicker: true,
dateFormat: 'mm/dd/yyyy',
timeFormat: 'h:ii AA',
showEvent: 'focus',
minutesStep: 5
});
self.$el.find('#formit-notes').val("hello");
self.$el.find('#formit-date').val("04/04/2020");
self.$el.find('#formit-activityType').val("Call Note");
},
Except for what I have in bold. I tried, "selectedIndex" and I got an error. What else can I use?
This is working:
this.displayActivityForm = function (companyId, proposalId, type) {
//console.log(type);
var model = objectModels[type],
fc = model.singular.substring(0, 1),
config = {
title: 'Add a' + ((fc == 'a' || fc == 'e' || fc == 'i' || fc == 'o' || fc == 'u') ? 'n' : '') + ' ' + ucwords(model.singular),
directionsText: 'Make your changes below and then click, "SAVE."',
fields: model.fields,
onShow: function (self) {
// add in the additional events and plugins
// add in datetime support
self.$el.find('input.field-datetime').datepicker({
autoClose: true,
language: 'en',
timepicker: true,
dateFormat: 'mm/dd/yyyy',
timeFormat: 'h:ii AA',
showEvent: 'focus',
minutesStep: 5
});
self.$el.find('#formit-notes').val("hello");
self.$el.find('#formit-date').val("04/04/2020");
self.$el.find('#formit-activityType').val("Call Note");
},
Except for what I have in bold. I tried, "selectedIndex" and I got an error. What else can I use?
ASKER
And Chris, so as not to wear out my welcome, I need to figure out to retrieve some data in the context of the "displayActivityForm" method. I've got that question here: https://www.experts-exchange.com/questions/29178289/How-do-I-write-this-query.html#questionAdd
ASKER
Never mind, Chris! I figured it out, as far as getting the select to display "Call Note." I went back and used your suggestion of assigning the select a class and going from there and that did the trick!
Thanks!
Thanks!
Good stuff Bruce :)
ASKER
I'm poised on the threshold of great things, man! Thanks so much for your help!
I got this beast to tackle tomorrow, so if you're in the mood...
https://www.experts-exchange.com/questions/29178289/How-do-I-write-this-query.html#questionAdd
I got this beast to tackle tomorrow, so if you're in the mood...
https://www.experts-exchange.com/questions/29178289/How-do-I-write-this-query.html#questionAdd
Not sure I can offer you an answer, but some tips on where to start looking. If you look at the FormIt class, particularly the show() method, you'll see a logic check in there to decide whether or not to load data (Line 96). That check is based on whether you passed in a 'loadDataFromUrl' property when you called the 'show' method. My guess is that if you pass in a valid URL, then the form will be populated with the data. Exactly what that URL should be is anyone's guess, but it should probably receive an ID of some sort, and then query your data store and return a JSON string containing the data.