I am trying to compare two field values on the same scene, but different views. I want to alert to the user if one field is greater than the other.
Original code from Knack:
$(document).on('knack-view-render.view_1', function(event, view, data) {
$("#view_1 .kn-button").on("click", function() {
if ($("#view_1-field_1").val() != "SpecificValue") {
alert ("These are not the droids you are looking for."); return false; }
})
});
I also tried to place the field values in variables, but I keep getting undefined. My code:
$(document).on('knack-view-render.view_1159', function(event, view, data) {
$("#view_1159 .kn-button").on("click", function() {
var requestedPto = $("#view_1159-field_5").val();
var availablePto = $("#view_2232-field_1").val();
if (requestedPto !== availablePto {
alert ("Don't match");
return false;
}
});
});
Thanks in advance!
Update: I think I may know where the problem is. I made a copy of our app and I have been using that for testing, which has been failing. I ended up removing all JS code and submitted the form and still received an alert in the console stating it couldn't read property of type 'undefined'.
So, I created another copy and tried the same thing and ended up with the same result. Therefore, I think there is something goofy with the copies. Either that or I need to import all the records. I only copied the app and created a user account. I will work on that and let you know what I come up with.
Putting it all together, I'm trying this:
$(document).on('knack-scene-render.scene_565', function (event, scene, view) {
var availablePto = Knack.models['view_2332'].toJSON().field_1549;
$('#field_810').change(function () {
var requestedPto = $("#view_1159-field_810").val();
console.log('requested PTO: ' . requestedPto);
console.log('available: ' . availablePto);
});
});
I think I"m missing something in the syntax.
Alright - I've never had success using the submit onclick event and prefer using the field change event for a better user experience anyway, so I reckon try the field change event I listed above to see if that works for you. Embed the variable availablePto = knack.models... into that view render.
If we can't get that working then the next step would be to share you app (or a copy) with someone willing to and of ten it's just getting the selectors and events right.
I didn't even think about that, but yes, the available PTO is part of details and the requested PTO is part of the form: all on the same page.
EDIT: I moved the variables to the onClick event and was able to still see availablePto. I didn't get a value for requestedPto. So close!
So to be clear - availablePto exists in a detail view?
I'd use: var availablePto = Knack.models['view_2332'].toJSON().field_1549;
Does that work?
At this point I can't even get the value of a field. :(
$(document).on('knack-scene-render.scene_565', function(event, scene, data) {
var availablePto = $("#view_2332-field_1549").val();
console.log('Available: ', availablePto);
});
Sorry lads been busy...
Thanks for the link to jshint Justin and I confess to using Microsoft Code for all our projects.
Another angle might be to monitor the change event for requestedPto and prevent it from being higher than availablePto:
$(document).on('knack-view-render......
$('#field_5').change(function() {
if($('#field_5').val() > $("#view_2232-field_1").val()) {
$('#field_5').val($("#view_2232-field_1").val());
}
});
});
Or you could set the requestedPto field to have a max number input so the user cannot choose anything higher than availablePto:
$(document).on('knack-view-render......
var availablePto = $("#view_2232-field_1").val();
$('#field_5').prop({type:"number"}).prop({"max":availablePto});
});
And a third option would be form rules and no code, informing the user after submit and redirecting to an edit form (not ideal).
Hi AJ,
Looks like you found your issue. Your selectors must be wrong. Keep trying different things until you get a value in the console on the scene load.
Another thing I did early on was I got a codementor account. Then when I was stuck I would have a pro help me in a live session and I would learn. Something like this might cost $20 and the next time you ran into the issue you'd know how to solve it.
Good luck with your code. Justin
Edit: They are both undefined when the page loads, but only avail is undefined after submit.
Hi, Justin. This still didn't work and got "cannot read property 'type' of undefined. As a note, I also changed if (requestedPto !== availablePto) to if (requestedPto > availablePto).
Thanks for the link as well. :)
ps You can use https://jshint.com/ to quickly track down your syntax errors. I did when I first started. I use Atom on my desktop now.
I think you need to save your variables on the scene render and then pass them into the click function. I haven't tried this but I would try moving stuff around. Check the console logs to see if you're getting the values you want. This might send you in the right direction.
$(document).on('knack-scene-render.scene_XXXX', function(event, scene) {
var requestedPto = $("#view_1159-field_5").val();
var availablePto = $("#view_2232-field_1").val();
console.log('req:', requestedPto); //is it undefined?
console.log('avail:', availablePto); //is it undefined?
$("#view_1159 .kn-button").on("click", function(requestedPto, availablePto )
{
console.log(' in function req:', requestedPto); //is it undefined now?
console.log('in function avail:', availablePto); //is it undefined now?
if (requestedPto !== availablePto) {
alert ("Don't match");
return false;
}
});
});
It appears that my problem is obtaining the value of the input field_810 upon submit. I keep getting undefined.
I was able to see the value of field_1550 when using this code:
$(document).on('knack-scene-render.scene_565', function (event, scene, data) {
$("#view_1159 .kn-button").on("click", function () {
var data_view_565 = Knack.models['view_565'].toJSON();
var field_1550 = data_view_565.field_1550
console.log(field_1550);
});
});
Next step...
How do I get the data from a 2nd field to compare to?
I need to see if what the user enters in field_810 is greater than the value of field_1550. Field_810 is in view_1159.
Getting close!
No sweat - about to hit meetings all day here, but try looking at using the Knack.model method to get to your view data. Search for it in the forum, and use your web console to check variables along the way using console.log.
We'll get it working!
I fixed the closing bracket, but I'm back to "cannot read property 'type' of undefined". This is probably my inexperience with JS showing. :)
Try looking at the browser console to pick up where the error is - I think it's because we both dropped the closing bracket in the if() statement (after the variable availablePto).
Does that work?
Thanks, Brad. I did think about using their page rules, but the available PTO hours is from a different table and it doesn't show when I try to set up page rules for that form. Does that make sense?
I tried the code you provided, but it seems to break the site. The only thing I changed was scene to 565. Not sure what I'm missing.