Issue while injecting Javascript on a web page

[kje039]

Hi,

I am trying to run my custom Modal created using JS on a website, "I am using Run JavaScript on browser" activity of PAD.
Out of 10 execution it works on first 3-4 and for rest executions the code is not getting injected on the website.

The Website I am using is Amadeus.

Browser is Chrome.

[Agnius]

Can you share the JS code you're using? Also, what happens on the further attempts? Have you checked the console log on the browser - perhaps the page is blocking it?

[kje039]

secondarylist = [];
providedDate = "18DEC";
// Function to extract the date from the flight information
function extractDate(flightInfo) {
    const match = flightInfo.match(/(\d{1,2}[A-Za-z]{3})/); // Updated regular expression

    return match ? match[1] : null;

}

function padStringToLengthNine(inputString, padddlength) {
    const targetLength = padddlength;

    if (inputString.length < targetLength) {
        const spacesToAdd = targetLength - inputString.length;
        const paddedString = "&ensp;".repeat(spacesToAdd) + inputString;
        return paddedString;
    } else {
        return inputString;
    }
}

// Function to update radio buttons based on the selected date
window.updateRadioButtons = function () {
    let dateDropdown = document.getElementById('dateDropdown');
    if (!dateDropdown) {
        console.error('Dropdown element not found.');
        return;
    }

    let selectedDateIndex = dateDropdown.value;
    let selectedDate = null;

    if (selectedDateIndex !== 'all') {
        selectedDate = dateDropdown.options[selectedDateIndex].text.trim().toUpperCase();
        console.log(selectedDate)
    }

    const radioContainer = document.getElementById('radioContainer');
    if (!radioContainer) {
        console.error('Radio container element not found.');
        return;
    }

    radioContainer.innerHTML = ""; // Clear existing radio buttons

    let counter = secondarylist.map(item => item.replace(/\?/g, ''));

    for (let i = 0; i < counter.length; i++) {
        let strmain = "";
        if (counter[i] !== "" && counter[i] !== undefined) {
            let fligtsplit = counter[i].split("\n");

            const currentDate = extractDate(counter[i]);


            if (counter[i] !== "" && counter[i] !== undefined && (selectedDate === null || currentDate.toUpperCase() === selectedDate || selectedDate === 'ALL')) {


                for (let j = 0; j < fligtsplit.length; j++) {
                    internalvalue = fligtsplit[j].split(";");
                    if (j !== 0) {
                        const paddedString = padStringToLengthNine(internalvalue[0].trim(), 9);
                        strmain += `<tr>
                        <td>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;</td>
                        <td>${paddedString}&emsp;&emsp;</td>
                        <td>${internalvalue[1].trim()}&emsp;&emsp;</td>
                        <td>${internalvalue[2].trim()}&emsp;&emsp;</td>
                        <td>${internalvalue[3].trim().split(" ")[0]}&emsp;&emsp;</td>
                        <td>${internalvalue[3].trim().split(" ")[1]}&emsp;&emsp;</td>
                        <td>${internalvalue[4].trim()}&emsp;&emsp;</td>
                        </tr><br>`;

                    } else {
                        const paddedString = padStringToLengthNine(internalvalue[1].trim(), 9);

                        strmain += `<tr>
                        <td>&emsp;&emsp;</td>
                        <td>${internalvalue[0].trim()}&emsp;&emsp;</td>
                        <td>${paddedString}&emsp;&emsp;</td>
                        <td>${internalvalue[2].trim()}&emsp;&emsp;</td>
                        <td>${internalvalue[3].trim()}&emsp;&emsp;</td>
                        <td>${padStringToLengthNine(internalvalue[4].trim().split(" ")[0], 6)}&emsp;&emsp;</td>
                        <td>${padStringToLengthNine(internalvalue[4].trim().split(" ")[1], 6)}&emsp;&emsp;</td>
                        <td>${internalvalue[5].trim()}&emsp;&emsp;</td>
                        </tr><br>`;
                    }
                }



                const radioHtml = `<input type="radio" data-date="${currentDate}" id="RPA_${i}" name="FlightOptions" value="${strmain}">
            <label for="RPA_${i}" class="Center">${strmain}</label><br>`;

                // Append the radio button and label HTML to the container
                radioContainer.innerHTML += radioHtml;
            }
        }
    }
}

function initializeModal() {
    let timeoutID;
    function addRadio() {
        let counter = secondarylist.map(item => item.replace(/\?/g, ''));
        let result = "";

        const dates = counter.map(item => extractDate(item));
        const uniqueDates = Array.from(new Set(dates.filter(date => date !== null))).sort();

        // Move this line outside the loop
        /* result+= "<label for='dateDropdown'>Select Date:</label>" +
         "<select id='dateDropdown' onchange='updateRadioButtons()'>" +
         "<option value='all'>All</option>" +
         uniqueDates.map((date, index) => `<option value='${index + 1}'>${date}</option>`).join("") +
         "</select>";

        result += "<label for='dateDropdown'style='position: fixed;top: 55px;margin-left: 1px;margin-right: 10px;'>Select Date:</label>" +
            "<select id='dateDropdown' onchange='updateRadioButtons()' style='position: fixed;margin-left: 27px; top: 70px; left: 20px;'>" + "<option value='all'>All</option>" +
            uniqueDates.map((date, index) => `<option value='${index + 1}'>${date}</option>`).join("") +
            "</select>";*/

        result = "<label for='dateDropdown'style='position: fixed;top: 55px;margin-left: 1px;margin-right: 10px;'>Select Date:</label>" +
            "<select id='dateDropdown' onchange='updateRadioButtons()' style='position: fixed;margin-left: 27px; top: 70px; left: 20px;'>" +
            "<option value='all'>All</option>";

        const selectedIndex = uniqueDates.findIndex(date => date.toUpperCase() === providedDate.toUpperCase());

        result += uniqueDates.map((date, index) => `<option value='${index + 1}' ${index === selectedIndex ? 'selected' : ''}>${date}</option>`).join("") +
            "</select>"

        result += "<div id='radioContainer'>";

        for (let i = 0; i < counter.length; i++) {
            let strmain = "";
            if (counter[i] !== "" && counter[i] != undefined) {
                let fligtsplit = counter[i].split("\n");
                if (fligtsplit.some(subItem => subItem.trim() !== '')) {
                    // Add the missing variable definitions



                    for (let j = 0; j < fligtsplit.length; j++) {
                        internalvalue = fligtsplit[j].split(";");
                        if (j !== 0) {
                            let spaceneed = 0;
                            const paddedString = padStringToLengthNine(internalvalue[0].trim(), 9);
                            strmain += `<tr>
                            <td>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;</td>
                            <td>${paddedString}&emsp;&emsp;</td>
                            <td>${internalvalue[1].trim()}&emsp;&emsp;</td>
                            <td>${internalvalue[2].trim()}&emsp;&emsp;</td>
                            <td>${padStringToLengthNine(internalvalue[3].trim().split(" ")[0], 6)}&emsp;&emsp;</td>
                            <td>${padStringToLengthNine(internalvalue[3].trim().split(" ")[1], 6)}&emsp;&emsp;</td>
                            <td>${internalvalue[4].trim()}&emsp;&emsp;</td>
                            </tr><br>`;
                        } else {
                            const paddedString = padStringToLengthNine(internalvalue[1].trim(), 9);

                            strmain += `<tr>
                            <td>&emsp;&emsp;</td>
                            <td>${internalvalue[0].trim()}&emsp;&emsp;</td>
                            <td>${paddedString}&emsp;&emsp;</td>
                            <td>${internalvalue[2].trim()}&emsp;&emsp;</td>
                            <td>${internalvalue[3].trim()}&emsp;&emsp;</td>
                            <td>${padStringToLengthNine(internalvalue[4].trim().split(" ")[0], 6)}&emsp;&emsp;</td>
                            <td>${padStringToLengthNine(internalvalue[4].trim().split(" ")[1], 6)}&emsp;&emsp;</td>
                            <td>${internalvalue[5].trim()}&emsp;&emsp;</td>
                            </tr><br>`;

                            /*buttonvalue = counter[i].replace(/\n/g, '||');
                               strmain += `<div style= align-items: strech;">
                                   <input type="radio" data-date="${dates[i]}" id="RPA_${i}" name="FlightOptions" value="${buttonvalue}" style="margin-right: 5px;">
                                   <label for="RPA_${i}" class="Center" style="flex-grow: 1; text-align: left;">&emsp;&emsp;${internalvalue[0].trim()}${space.repeat(1)}${internalvalue[1].trim()}${spaceneed}${space.repeat(2)}${internalvalue[2].trim()}${space.repeat(2)}${internalvalue[3].trim()}${space.repeat(2)}${internalvalue[4].trim()}${space.repeat(1)}${internalvalue[5].trim()}${space.repeat(1)}<br></label>
                               </div>`;*/
                        }
                    }

                }

                // Add a line break after each radio button and label pair

                result += `<input type="radio" id="RPA_${i}" name="FlightOptions" value="${strmain}" ><label for="RPA_${i}" class="Center">${strmain}</label><br>`;

            }
        }

        result += "</div>";

        const dateDropdown = document.getElementById('dateDropdown');
        if (dateDropdown) {
            dateDropdown.addEventListener('change', function () {
                updateRadioButtons();
            });
        } else {
            console.error('Dropdown element not found.');
        }

        return result;
    }


    function getSelectedFlight() {
        var radios = document.getElementsByName("FlightOptions");
        for (var i = 0; i < radios.length; i++) {
            if (radios[i].checked) {
                return radios[i].value;
            }
        }
        return null;
    }

    function showModal() {
        var modal = document.getElementById("myModal");
        if (modal) {
            modal.style.display = "block";
            setupTimeout(); // Call setupTimeout when showing the modal
        } else {
            console.error("Modal element not found.");
        }
    }

    function hideModal() {
        var modal = document.getElementById("myModal");
        if (modal) {
            modal.style.display = "none";
            console.log("Clearing Timeout")
            clearTimeout(timeoutID); // Clear the timeout when hiding the modal
        } else {
            console.error("Modal element not found.");
        }
    }

    function getEnteredText() {
        let textBox = document.getElementById("textBox");
        let enteredText = textBox.value.trim();

        // Define the regex pattern
        let regexPattern = /^(?:[A-Za-z]{1},?)+$/;

        if (!regexPattern.test(enteredText)) {
            alert("Please enter valid text following the pattern: (A, B, C, ...)");
            textBox.focus(); // Set focus back to the text box
            return null;
        }


        return enteredText;
    }

    function handleSubmit(submitType) {
        // Disable all radio buttons once either Submit or Cancel is selected
        var radioButtons = document.getElementsByName("FlightOptions");
        for (var i = 0; i < radioButtons.length; i++) {
            radioButtons[i].disabled = true;
        }
        // Disable text box
        document.getElementById("textBox").disabled = true;

        // Disable Cancel button
        document.getElementById("Closevalue").disabled = true;

        // Disable Submit button
        document.getElementById("submitvalue").disabled = true;


        let responseText;
        if (submitType === 'submit') {
            var selectedFlight = getSelectedFlight();
            var enteredText = getEnteredText();

            if (selectedFlight == null || enteredText === null) {
                // Enable radio buttons and Cancel button if validation fails
                for (var i = 0; i < radioButtons.length; i++) {
                    radioButtons[i].disabled = false;
                }
                document.getElementById("Closevalue").disabled = false;

                // Enable Submit button if validation fails
                document.getElementById("submitvalue").disabled = false;

                // Enable text box if validation fails
                document.getElementById("textBox").disabled = false;

                return;
            } else {
                responseText = selectedFlight + "<br>Entered Text: " + enteredText;
            }
        } else if (submitType === 'cancel') {
            responseText = 'Cancel';
        } else {
            console.error('Invalid submitType');
            return;
        }

        // Check if the response element already exists
        let existingResponseElement = document.getElementById('responseElement');
        if (existingResponseElement) {
            existingResponseElement.innerHTML = responseText;
        } else {
            let responseElement = document.createElement('div');
            responseElement.innerHTML = responseText;
            responseElement.setAttribute('id', 'responseElement');
            responseElement.style.display = 'block';

            // Append the new element to the FlightData div within the modal
            document.getElementById('radioContainer').appendChild(responseElement);
        }

        // Hide the modal after a delay of 10 seconds if the Submit button was clicked
        if (submitType === 'submit' || submitType === 'cancel') {
            setTimeout(function () {
                hideModal();
            }, 4000); // 10000 milliseconds = 10 seconds
        }

        else {
            console.error('Invalid submitType');
            return;
        }
    }

    function setupTimeout() {
        if (timeoutID) {
            console.log("Clearing Timeout");
            clearTimeout(timeoutID);
        }
        timeoutID = setTimeout(function () {

            hideModal();
            console.error("No Option selected");

            // Add an alert before the timeout finishes
            alert("Please select an option before the timeout finishes.");
        }, 120000); // 60000 milliseconds = 60 seconds
    }

    function clearTimeoutAndSubmit(callback) {
        try {
            // Call the callback function with the selectedFlight
            callback();

            // Clear timeout only if it exists
            if (timeoutID) {
                console.log("Clearing Timeout")
                clearTimeout(timeoutID);
            }
        } catch (error) {
            console.error("Error in clearTimeoutAndSubmit:", error);
        }
    }



    function clearTimeoutAndClose() {
        try {
            // Clear timeout only if it exists
            if (timeoutID) {
                console.log("Clearing Timeout");
                clearTimeout(timeoutID);
            }

            // Check if the modal element exists before hiding
            let modalElement = document.getElementById("myModal");
            if (modalElement) {
                // Wait for 4 seconds before hiding the modal
                setTimeout(function () {
                    modalElement.style.display = "none";
                }, 4000);
            }
        } catch (error) {
            console.warn("Error in clearTimeoutAndClose:", error);
        }
    }
    setupTimeout();


    let Flightmodal = document.createElement('div');
    Flightmodal.setAttribute('id', 'FlightData');
    Flightmodal.innerHTML = `<style>
    
    .modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); 
        z-index: 1000; display: block; border: 1px solid #888; width: 80%; margin: auto; 
        scroll-behavior: smooth; height:90%;background-color: Lightgreen }
    .modal-content { border: 1px solid #888;margin-left: 25px;padding: 20px 20px; text-align: left; width: 90%; overflow: auto; 
        scroll-behavior: smooth; overflow-y: scroll; height: 55%;height: 55%;font-family: 'Monaco', Monospace; 
        font-size: 12px;
        font-weight: bold;background-color: LightRed }
    .button-container { text-align: center; position: absolute; bottom: 10px; width: 100%; }
    .button-container input { margin-right: 16px; }
    .close { color: #aaa; float: right; font-size: 28px; font-weight: 700 }
    .close:focus, .close:hover { color: #000; text-decoration: none; cursor: pointer }
    label { text-align: center }
    .input-container {
        text-align: center;
        margin-top: 5px; /* Add margin to create space */
    }

    #textBox {
        width: 90px; /* Set a specific width for the text box */
    }
    </style>
    <div id="myModal" class="modal">
    
        <h2 style="text-align: center; padding-top: 10px; color: #3366cc; font-family: 'Arial', sans-serif; font-size: 24px; font-weight: bold;">Flight Availability</h2>
        <br>
        <p1 class="header-row" style="text-align:left; padding-left:20px; color: #3366cc; font-family: 'Arial', sans-serif; font-size: 15px; font-weight: bold;">
        Date&emsp;&emsp;Flight No.&emsp;Org&emsp;Dest.&emsp;Dep.&emsp;Arr.&nbsp;&nbsp;&nbsp;&nbsp;Class&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
        </p1>
        <br>
        <br>
        <div id="RPA_Afklmcontent" class="modal-content">
        <p id="thelist">${addRadio()}</p>
        </div>
        <br>
        <div class="input-container">
        <label for="comments">&emsp;&emsp;Enter the class to check price for:</label>
        <Input id="textBox" name="Enter the Class to be Filled" rows="1" cols="10" required></Input>
        </div>
        <div class="button-container">
        <br>
        <input type="button" value="Submit" id="submitvalue">
        <input type="button" value="Cancel" id="Closevalue">
    </div>
    </div>`;


    let existingFlightData = document.getElementById('FlightData');
    if (existingFlightData) {
        document.body.removeChild(existingFlightData);
    }

    document.body.appendChild(Flightmodal);

    document.getElementById("submitvalue").addEventListener("click", function () {
        clearTimeoutAndSubmit(function () {
            handleSubmit('submit');
        });
    });

    document.getElementById("Closevalue").addEventListener("click", function () {
        clearTimeoutAndClose();
        handleSubmit('cancel');

    });


}
// Call this function whenever you want to initialize the modal
initializeModal();

[kje039]

To Inject further I have to reopen the browser and login again web application, there is no error on console