Hello,
I am having some trouble with updating the view of data within a Knack system when a form has been submitted.
Instead of using the following code:
$(document).on(‘knack-form-submit.any’, function(event, view, record) {
Knack.views[“view_XX”].model.fetch();
Knack.views.view_XX.render();
});
I would like to automate the process of rendering each view on each scene from each form submission.
$(document).on('knack-form-submit.any', async function(event, view, record) {
$('.kn-scene .view-group').each(async function() {
var viewGroup = $(this);
var sceneId = viewGroup.closest('.kn-scene').attr('id');
if (sceneId) {
var sceneMatches = sceneId.match(/^kn-scene_(\d+)$/);
if (sceneMatches && sceneMatches.length === 2) {
var sceneNumber = sceneMatches[1];
viewGroup.find("[id^='view_']").each(async function() {
var viewId = $(this).attr('id');
if (viewId) {
var matches = viewId.match(/^view_(\d+)$/);
if (matches && matches.length === 2) {
var viewNumber = matches[1];
console.log('Form submitted');
console.log('Scene Number:', sceneNumber);
console.log('View Number:', viewNumber);
var dataSourceUrl = 'https://api.knack.com/v1/pages/scene_' + sceneNumber + '/views/view_' + viewNumber + '/records';
var recordId = $('.kn-modal form .kn-submit input[name="id"]').val();
if (recordId) {
try {
const response = await fetch(dataSourceUrl + '/' + recordId, {
method: 'PUT',
headers: {
'X-Knack-Application-ID': '62b36e2e0a7cc5001f9283cd',
'X-Knack-REST-API-Key': '818e87c9-903a-4cf9-aa00-363cf75f2ad1',
'Content-Type': 'application/json'
},
body: JSON.stringify(record)
});
if (response.ok) {
console.log('Record updated successfully:', response);
// Fetch and render each view
const viewResponse = await fetch(dataSourceUrl, {
headers: {
'X-Knack-Application-ID': '62b36e2e0a7cc5001f9283cd',
'X-Knack-REST-API-Key': '818e87c9-903a-4cf9-aa00-363cf75f2ad1',
'Content-Type': 'application/json'
}
});
if (viewResponse.ok) {
const viewData = await viewResponse.json();
console.log('View data fetched successfully:', viewData);
Knack.views['view_' + viewNumber].model.set(viewData);
Knack.views['view_' + viewNumber].render();
console.log('View rendered');
} else {
throw new Error('Failed to fetch view data');
}
} else {
throw new Error('Failed to update record');
}
} catch (error) {
console.log('Error:', error);
}
} else {
console.log('Unable to find the record ID.');
}
} else {
console.log('Unable to find the view number.');
}
}
});
} else {
console.log('Unable to find the scene number.');
}
}
});
});
This code keep yielding the XHR console log:
Status
400
Bad Request
VersionHTTP/2
Transferred1.21 kB (227 B size)
Referrer Policystrict-origin-when-cross-origin
How can I render each view without specifically defining “view_XX”?
P.S. I have also tried this version:
$(document).on('knack-form-submit.any', function(event, view, record) {
$('.kn-scene .view-group').each(function() {
var viewGroup = $(this);
var sceneId = viewGroup.closest('.kn-scene').attr('id');
if (sceneId) {
var sceneMatches = sceneId.match(/^kn-scene_(\d+)$/);
if (sceneMatches && sceneMatches.length === 2) {
var sceneNumber = sceneMatches[1];
viewGroup.find("[id^='view_']").each(function() {
var viewId = $(this).attr('id');
if (viewId) {
var matches = viewId.match(/^view_(\d+)$/);
if (matches && matches.length === 2) {
var viewNumber = matches[1];
console.log('Form submitted');
console.log('Scene Number:', sceneNumber);
console.log('View Number:', viewNumber);
var dataSourceUrl = 'https://api.knack.com/v1/pages/scene_' + sceneNumber + '/views/view_' + viewNumber + '/records';
var recordId = $('.kn-modal form .kn-submit input[name="id"]').val();
if (recordId) {
$.ajax({
type: 'PUT',
url: dataSourceUrl + '/' + recordId,
headers: {
'X-Knack-Application-ID': '62b36e2e0a7cc5001f9283cd',
'X-Knack-REST-API-Key': '818e87c9-903a-4cf9-aa00-363cf75f2ad1'
},
data: record,
success: function(response) {
console.log('Record updated successfully:', response);
// Fetch and render each view
Knack.views['view_' + viewNumber].model.fetch({
url: dataSourceUrl,
headers: {
'X-Knack-Application-ID': '62b36e2e0a7cc5001f9283cd',
'X-Knack-REST-API-Key': '818e87c9-903a-4cf9-aa00-363cf75f2ad1'
},
success: function(response) {
console.log('View data fetched successfully:', response);
Knack.views['view_' + viewNumber].render();
console.log('View rendered');
},
error: function(error) {
console.log('Error fetching view data:', error);
}
});
},
error: function(xhr, status, error) {
console.log('Error updating record:', error);
console.log('XHR status:', status);
console.log('XHR response:', xhr.responseText);
}
});
} else {
console.log('Unable to find the record ID.');
}
} else {
console.log('Unable to find the view number.');
}
}
});
} else {
console.log('Unable to find the scene number.');
}
}
});
});