Help with popup scene on a custom button

API & Customization Ask Developers
1

I need help with some code. I have an input form linked to a table. My code adds a preview button to the input form next to the submit button. I want the preview button to (1) save the record from the current form into the table, but do not change the current scene view in any way. (2) link to another Knack scene designated in Knack as a modal popup. The link is supposed to have a query parameter from the input form appended to it. Here is what is happening: (1) the button is created correctly and it works to link to the correct scene (2) the current record is NOT being saved. (3) the URL is constructed with the appended parameter, it flashes briefly on the screen, and is then replaced by the page without the appended parameter. Help would be greatly appreciated. Code follows:

//Test Popup button

$(document).on(‘knack-scene-render.scene_75’, function(event, scene) {
var submitButton = $(‘button[type=“submit”]’);

if (submitButton.length > 0) {
    var previewButton = $('<button>', {
        text: 'Preview Mapping',
        class: 'kn-button is-primary',
        style: 'margin-left: 10px; cursor: pointer;',
        type: 'button',
        click: function(e) {
            e.preventDefault();
            
            var trackValue = $('#field_149').val();
            if (!trackValue) {
                alert('Please enter a Track value');
                return;
            }

            Knack.showSpinner();

            var view = Knack.views['view_136'];
            var currentModel = view && view.model;

            if (currentModel && typeof currentModel.save === 'function') {
                currentModel.set('field_149', trackValue);

                currentModel.save({}, {
                    success: function(model, response) {
                        Knack.hideSpinner();
                        var previewUrl = 'https://tprf.knack.com/prlp#preview-student-signup?track=' + trackValue;
                        window.location.href = previewUrl;
                    },
                    error: function(model, xhr) {
                        Knack.hideSpinner();
                        alert('Failed to save preview: ' + (xhr.statusText || 'Unknown error'));
                    }
                });
            } else {
                Knack.hideSpinner();
                alert('Failed to save preview: Model save function is unavailable.');
            }
        }
    });

    submitButton.first().after(previewButton);
} else {
    console.error('Submit button not found in scene_75.');
}

});

2

With AI help, I now have a version that fixes the URL for the popup window. This works perfectly now. The remaining problem is we can’t work out how to save the record based on the current form contents while not triggering default submit behavior and leaving the form as it is. Understand that the record being input is used to customize the view of another form. So the user workflow is to define the record and then preview what it will do to customize the other form. The user can iterate - preview, correct, preview again, correct, preview again, and finally Submit when satisfied. Here is the better code:

$(document).on(‘knack-scene-render.scene_75’, function(event, scene) {
var submitButton = $(‘button[type=“submit”]’);

if (submitButton.length > 0) {
    var previewButton = $('<button>', {
        text: 'Preview Mapping',
        class: 'kn-button is-primary',
        style: 'margin-left: 10px; cursor: pointer;',
        type: 'button',
        click: function(e) {
            e.preventDefault();
            e.stopPropagation();
            
            var trackValue = $('#field_149').val();
            if (!trackValue) {
                alert('Please enter a Track value');
                return;
            }

            // Get the form
            var $form = $(this).closest('form');
            
            // Unbind any existing handlers
            $("#view_136 .kn-button").off('click');
            
            // Use a one-time handler
            $("#view_136 .kn-button").one('click', function(e) {
                e.preventDefault();
                var modalUrl = '#preview-student-signup?track=' + encodeURIComponent(trackValue);
                window.location.hash = modalUrl;
                return false;
            });
            
            // Trigger the click
            $("#view_136 .kn-button").trigger('click');
        }
    });

    submitButton.first().after(previewButton);
}

});

3

I have come up with a completely different way around it, actually a better one. But if there is a solution to this, I would love to know it.