Category: javascript

i’m having an API fetching a json file and then use the data from the json to fill in data on a html page

function get_user_info(id){
    let user_id = id.administrator_id
    fetch(`/api/administrator/${user_id}`)
        .then(response => response.json())
        .then(fill_html)
}

function fill_html(administrator_info){
    let name = document.getElementById('info');
    name.innerHTML = '';
    let info_string = JSON.stringify(administrator_info)
    name.innerHTML = `
    <p>${administrator_info.full_name}</p>
    <button onclick="change_name(${info_string})">change</button>`;
}

then i try to change the format of the screen by clicking the button and passing down the json to the next function that is called by the button comming out on this code

function change_name(administrator_info){
    let info = document.getElementById('info');
    info.innerHTML = '';
    administrator_info = administrator_info.json
    info.innerHTML = `
    <input>${administrator_info.first_name}</input>
    <input>${administrator_info.infix}</input>
    <input>${administrator_info.surname}</input>
    <button onclick="save_change()">Save</button>`
}

but it keeps givving me errors when i tries to click the button.

Error message: Uncaught SyntaxError: Unexpected end of input

how do i fix this?

I’m trying to integrate FullCalendar with jQuery into my WordPress site using the Divi theme.

I have successfully:

Loaded FullCalendar via functions.php
Ensured jQuery and Moment.js are enqueued correctly
Logged the event data in the console after adding an event
Issue:
Despite everything looking correct in the console, the event does not appear on the calendar after being added.
Additionally, I receive the following errors:

Deprecation Warning about date formatting:
“Value provided is not in a recognized RFC2822 or ISO format”.
FullCalendar does not render the event even though it logs successfully in the console.
No server storage (events are stored in a local array for now).

Here is my FullCalendar initialization script inside functions.php:

    ?>
    <script>
    jQuery(document).ready(function($) {
        if ($("#calendar").data("fullCalendar")) { 
            console.log("FullCalendar already initialized. Skipping re-initialization.");
            return;
        }

        console.log("FullCalendar is initializing...");

        var eventList = []; // Store events locally

        $("#calendar").fullCalendar({
            header: {
                left: "prev,next today",
                center: "title",
                right: "month,agendaWeek,agendaDay"
            },
            selectable: true,
            editable: true,
            eventLimit: true,
            events: function(start, end, timezone, callback) {
                console.log("Loading events...", eventList);
                callback(eventList);
            },

            select: function(start, end) {
                var eventTitle = prompt("Enter Event Title:");
                if (eventTitle) {
                    var eventData = {
                        id: eventList.length + 1,
                        title: eventTitle,
                        start: moment(start).toISOString(),
                        end: end ? moment(end).toISOString() : null
                    };

                    console.log("Adding Event:", eventData);

                    eventList.push(eventData);
                    $("#calendar").fullCalendar("renderEvent", eventData, true);
                }
                $("#calendar").fullCalendar("unselect");
            }
        });
    });
    </script>
    <?php
}
add_action('wp_footer', 'initialize_fullcalendar', 20);

Why are the events I add not displaying? Any help would be greatly appreciatedenter image description here

I’m working on a react project, and I want to have an assets folder inside that, I have an assest.js folder, and an Array of “food-list” is present, I have a FoodDisplay.jsx file where I embedded my food_list array on const method, but whenever I’m trying to link my “FoodDisplay.jsx” file into “Home.jsx” an error is throwing

Error is:
my assets.js code is

import basket_icon from './basket_icon.png'
import logo from './logo.png'
import header_img from './header_img.png'
import search_icon from './search_icon.png'
import menu_1 from './menu_1.png'
import menu_2 from './menu_2.png'
import menu_3 from './menu_3.png'
import menu_4 from './menu_4.png'
import menu_5 from './menu_5.png'
import menu_6 from './menu_6.png'
import menu_7 from './menu_7.png'
import menu_8 from './menu_8.png'

import food_1 from './food_1.png'
import food_2 from './food_2.png'
import food_3 from './food_3.png'
import food_4 from './food_4.png'
import food_5 from './food_5.png'
import food_6 from './food_6.png'
import food_7 from './food_7.png'
import food_8 from './food_8.png'
import food_9 from './food_9.png'
import food_10 from './food_10.png'
import food_11 from './food_11.png'
import food_12 from './food_12.png'
import food_13 from './food_13.png'
import food_14 from './food_14.png'
import food_15 from './food_15.png'
import food_16 from './food_16.png'
import food_17 from './food_17.png'
import food_18 from './food_18.png'
import food_19 from './food_19.png'
import food_20 from './food_20.png'
import food_21 from './food_21.png'
import food_22 from './food_22.png'
import food_23 from './food_23.png'
import food_24 from './food_24.png'
import food_25 from './food_25.png'
import food_26 from './food_26.png'
import food_27 from './food_27.png'
import food_28 from './food_28.png'
import food_29 from './food_29.png'
import food_30 from './food_30.png'
import food_31 from './food_31.png'
import food_32 from './food_32.png'

import add_icon_white from './add_icon_white.png'
import add_icon_green from './add_icon_green.png'
import remove_icon_red from './remove_icon_red.png'
import app_store from './app_store.png'
import play_store from './play_store.png'
import linkedin_icon from './linkedin_icon.png'
import facebook_icon from './facebook_icon.png'
import twitter_icon from './twitter_icon.png'
import cross_icon from './cross_icon.png'
import selector_icon from './selector_icon.png'
import rating_starts from './rating_starts.png'
import profile_icon from './profile_icon.png'
import bag_icon from './bag_icon.png'
import logout_icon from './logout_icon.png'
import parcel_icon from './parcel_icon.png'

export const assets = {
    logo,
    basket_icon,
    header_img,
    search_icon,
    rating_starts,
    add_icon_green,
    add_icon_white,
    remove_icon_red,
    app_store,
    play_store,
    linkedin_icon,
    facebook_icon,
    twitter_icon,
    cross_icon,
    selector_icon,
    profile_icon,
    logout_icon,
    bag_icon,
    parcel_icon
}

export const menu_list = [
    {
        menu_name: "Salad",
        menu_image: menu_1
    },
    {
        menu_name: "Rolls",
        menu_image: menu_2
    },
    {
        menu_name: "Deserts",
        menu_image: menu_3
    },
    {
        menu_name: "Sandwich",
        menu_image: menu_4
    },
    {
        menu_name: "Cake",
        menu_image: menu_5
    },
    {
        menu_name: "Pure Veg",
        menu_image: menu_6
    },
    {
        menu_name: "Pasta",
        menu_image: menu_7
    },
    {
        menu_name: "Noodles",
        menu_image: menu_8
    }]

export const food_list = [
    {
        _id: "1",
        name: "Greek salad",
        image: food_1,
        price: 12,
        description: "Food provides essential nutrients for overall health and well-being",
        category: "Salad"
    },
    {
        _id: "2",
        name: "Veg salad",
        image: food_2,
        price: 18,
        description: "Food provides essential nutrients for overall health and well-being",
        category: "Salad"
    }, {
        _id: "3",
        name: "Clover Salad",
        image: food_3,
        price: 16,
        description: "Food provides essential nutrients for overall health and well-being",
        category: "Salad"
    }, {
        _id: "4",
        name: "Chicken Salad",
        image: food_4,
        price: 24,
        description: "Food provides essential nutrients for overall health and well-being",
        category: "Salad"
    }, {
        _id: "5",
        name: "Lasagna Rolls",
        image: food_5,
        price: 14,
        description: "Food provides essential nutrients for overall health and well-being",
        category: "Rolls"
    }, {
        _id: "6",
        name: "Peri Peri Rolls",
        image: food_6,
        price: 12,
        description: "Food provides essential nutrients for overall health and well-being",
        category: "Rolls"
    }, {
        _id: "7",
        name: "Chicken Rolls",
        image: food_7,
        price: 20,
        description: "Food provides essential nutrients for overall health and well-being",
        category: "Rolls"
    }, {
        _id: "8",
        name: "Veg Rolls",
        image: food_8,
        price: 15,
        description: "Food provides essential nutrients for overall health and well-being",
        category: "Rolls"
    }, {
        _id: "9",
        name: "Ripple Ice Cream",
        image: food_9,
        price: 14,
        description: "Food provides essential nutrients for overall health and well-being",
        category: "Deserts"
    }, {
        _id: "10",
        name: "Fruit Ice Cream",
        image: food_10,
        price: 22,
        description: "Food provides essential nutrients for overall health and well-being",
        category: "Deserts"
    }, {
        _id: "11",
        name: "Jar Ice Cream",
        image: food_11,
        price: 10,
        description: "Food provides essential nutrients for overall health and well-being",
        category: "Deserts"
    }, {
        _id: "12",
        name: "Vanilla Ice Cream",
        image: food_12,
        price: 12,
        description: "Food provides essential nutrients for overall health and well-being",
        category: "Deserts"
    },
    {
        _id: "13",
        name: "Chicken Sandwich",
        image: food_13,
        price: 12,
        description: "Food provides essential nutrients for overall health and well-being",
        category: "Sandwich"
    },
    {
        _id: "14",
        name: "Vegan Sandwich",
        image: food_14,
        price: 18,
        description: "Food provides essential nutrients for overall health and well-being",
        category: "Sandwich"
    }, {
        _id: "15",
        name: "Grilled Sandwich",
        image: food_15,
        price: 16,
        description: "Food provides essential nutrients for overall health and well-being",
        category: "Sandwich"
    }, {
        _id: "16",
        name: "Bread Sandwich",
        image: food_16,
        price: 24,
        description: "Food provides essential nutrients for overall health and well-being",
        category: "Sandwich"
    }, {
        _id: "17",
        name: "Cup Cake",
        image: food_17,
        price: 14,
        description: "Food provides essential nutrients for overall health and well-being",
        category: "Cake"
    }, {
        _id: "18",
        name: "Vegan Cake",
        image: food_18,
        price: 12,
        description: "Food provides essential nutrients for overall health and well-being",
        category: "Cake"
    }, {
        _id: "19",
        name: "Butterscotch Cake",
        image: food_19,
        price: 20,
        description: "Food provides essential nutrients for overall health and well-being",
        category: "Cake"
    }, {
        _id: "20",
        name: "Sliced Cake",
        image: food_20,
        price: 15,
        description: "Food provides essential nutrients for overall health and well-being",
        category: "Cake"
    }, {
        _id: "21",
        name: "Garlic Mushroom ",
        image: food_21,
        price: 14,
        description: "Food provides essential nutrients for overall health and well-being",
        category: "Pure Veg"
    }, {
        _id: "22",
        name: "Fried Cauliflower",
        image: food_22,
        price: 22,
        description: "Food provides essential nutrients for overall health and well-being",
        category: "Pure Veg"
    }, {
        _id: "23",
        name: "Mix Veg Pulao",
        image: food_23,
        price: 10,
        description: "Food provides essential nutrients for overall health and well-being",
        category: "Pure Veg"
    }, {
        _id: "24",
        name: "Rice Zucchini",
        image: food_24,
        price: 12,
        description: "Food provides essential nutrients for overall health and well-being",
        category: "Pure Veg"
    },
    {
        _id: "25",
        name: "Cheese Pasta",
        image: food_25,
        price: 12,
        description: "Food provides essential nutrients for overall health and well-being",
        category: "Pasta"
    },
    {
        _id: "26",
        name: "Tomato Pasta",
        image: food_26,
        price: 18,
        description: "Food provides essential nutrients for overall health and well-being",
        category: "Pasta"
    }, {
        _id: "27",
        name: "Creamy Pasta",
        image: food_27,
        price: 16,
        description: "Food provides essential nutrients for overall health and well-being",
        category: "Pasta"
    }, {
        _id: "28",
        name: "Chicken Pasta",
        image: food_28,
        price: 24,
        description: "Food provides essential nutrients for overall health and well-being",
        category: "Pasta"
    }, {
        _id: "29",
        name: "Buttter Noodles",
        image: food_29,
        price: 14,
        description: "Food provides essential nutrients for overall health and well-being",
        category: "Noodles"
    }, {
        _id: "30",
        name: "Veg Noodles",
        image: food_30,
        price: 12,
        description: "Food provides essential nutrients for overall health and well-being",
        category: "Noodles"
    }, {
        _id: "31",
        name: "Somen Noodles",
        image: food_31,
        price: 20,
        description: "Food provides essential nutrients for overall health and well-being",
        category: "Noodles"
    }, {
        _id: "32",
        name: "Cooked Noodles",
        image: food_32,
        price: 15,
        description: "Food provides essential nutrients for overall health and well-being",
        category: "Noodles"
    }
]


my "FoodDisplay.jsx" code is:
import React, { useContext } from 'react'
import './FoodDisplay.css'
import { StoreContext } from '../../context/StoreContext'

const FoodDisplay = ({category}) => {

    const {food_list} = useContext(StoreContext)

  return (
    <div className='food-display' id='food-display'>
        <h2>Top dishes near you</h2>
    </div>
  )
}
export default FoodDisplay

and my Home.jsx code is:
    import React, { useState } from 'react'
    import './Home.css'
    import Header from '../../components/Header/Header'
    import ExploreMenu from '../../components/ExploreMenu/ExploreMenu'
    import FoodDisplay from '../../components/FoodDisplay/FoodDisplay'
    const Home = () => {
    
      const [category, setCategory] = useState("All");
    
      return (
        <div>
          <Header />
          <ExploreMenu category={category} setCategory={setCategory}/>
          <FoodDisplay category={category}/>
        </div>
      )
    }

export default Home

error image: enter image description here
Uncaught runtime errors:
×
ERROR
Cannot destructure property ‘food_list’ of ‘(0 , react__WEBPACK_IMPORTED_MODULE_0__.useContext)(…)’ as it is null.
TypeError: Cannot destructure property ‘food_list’ of ‘(0 , react__WEBPACK_IMPORTED_MODULE_0__.useContext)(…)’ as it is null.
at FoodDisplay (http://localhost:3000/main.1847d69e2604163211a1.hot-update.js:33:5)
at react-stack-bottom-frame (http://localhost:3000/static/js/bundle.js:19270:18)
at renderWithHooks (http://localhost:3000/static/js/bundle.js:10587:20)
at updateFunctionComponent (http://localhost:3000/static/js/bundle.js:11856:17)
at beginWork (http://localhost:3000/static/js/bundle.js:12474:16)
at runWithFiberInDEV (http://localhost:3000/static/js/bundle.js:7815:14)
at performUnitOfWork (http://localhost:3000/static/js/bundle.js:15059:93)
at workLoopSync (http://localhost:3000/static/js/bundle.js:14953:38)
at renderRootSync (http://localhost:3000/static/js/bundle.js:14937:7)
at performWorkOnRoot (http://localhost:3000/static/js/bundle.js:14698:42)

Im running out of ideas. i have been trying to get the getUserMedia dynamically to select macro camera or atleast focus. Im making barcode(ean) reader and if i put barcode close to camera then I don’t get any focusing.

async function startCamera() {
    try {
        if (videoStream) {
            videoStream.getTracks().forEach(track => track.stop());
        }

        videoStream = await navigator.mediaDevices.getUserMedia({
            video: {
                facingMode: {exact: "environment"},
                focusMode: {ideal: "continuous"}
            }
        });

        const $videoElement = $("#camera-feed");
        $videoElement[0].srcObject = videoStream;

        $videoElement.on("loadedmetadata", function () {
            this.play();
            $(".scanning-line").fadeIn(300).addClass("scan-active");
            $videoElement.css({ opacity: 1, transform: "scale(1)" }).fadeIn();
            startScanner();
        });

    } catch (err) {
        $(".scanning-line").fadeOut(300);
    }
}

I tried using AI help but It does not give any good ideas to try, most of them I have tried and failed.

I am trying to extract the YouTube video URL in an Android app when the user clicks on a suggested video inside a WebView. The WebView is displaying a YouTube video, and I want to capture the video URL when the video changes (such as when the user clicks on a suggested video).

Here’s what I have so far:
I am using a WebView in Android and loading a YouTube video. I have set up a JavaScript interface to communicate with Kotlin. Initially, when the page loads, I can capture the video URL using JavaScript. However, when a user clicks on a suggested video, the video changes, but I can’t seem to extract the new video URL.

fun YouTubePlayer(url: String) {
    val context = LocalContext.current
    val isLoading = remember { mutableStateOf(true) }

    AndroidView(
        modifier = Modifier.fillMaxSize(),
        factory = { context ->
            WebView(context).apply {
                settings.javaScriptEnabled = true
                settings.domStorageEnabled = true

                addJavascriptInterface(object : Any() {
                    @JavascriptInterface
                    fun onVideoUrlFetched(videoId: String) {
                        Log.i("YtVideoInfo", "Video ID Fetched: $videoId")
                        Toast.makeText(context, "Video ID: $videoId", Toast.LENGTH_SHORT).show()
                    }
                }, "Android")

                webViewClient = object : WebViewClient() {
                    override fun onPageStarted(view: WebView?, url: String?, favicon: Bitmap?) {
                        super.onPageStarted(view, url, favicon)
                        isLoading.value = true
                    }

                    override fun onPageFinished(view: WebView?, url: String?) {
                        super.onPageFinished(view, url)
                        isLoading.value = false
                    }
                }

                webChromeClient = object : WebChromeClient() {
                    override fun onProgressChanged(view: WebView?, newProgress: Int) {
                        super.onProgressChanged(view, newProgress)
                        isLoading.value = newProgress != 100
                    }
                }

                // Inject JavaScript to track YouTube Player state
                evaluateJavascript(
                    """
                    (function() {
                        var player;
                        function onYouTubeIframeAPIReady() {
                            player = new YT.Player('player', {
                                events: {
                                    'onStateChange': onPlayerStateChange
                                }
                            });
                        }

                        function onPlayerStateChange(event) {
                            if (event.data == YT.PlayerState.PLAYING) {
                                var currentVideoUrl = player.getVideoUrl();
                                var videoId = currentVideoUrl.split('v=')[1];
                                window.Android.onVideoUrlFetched(videoId);
                            }
                        }

                        var script = document.createElement('script');
                        script.src = 'https://www.youtube.com/iframe_api';
                        document.head.appendChild(script);

                        script.onload = function() {
                            onYouTubeIframeAPIReady();
                        };
                    })();
                    """.trimIndent(), null
                )

                loadUrl(url)
            }
        }
    )}

Say im loading an external webpage that has an eventListener that checks to see if my mouse has left the tab or window, how can i patch this from Electron? I’d like to check for different types of event listeners as well and block them.

I’d like to start building the head for a document via JS. I’m able to do this for the body via the following from https://stackoverflow.com/a/41026918/64696 :

document.body = document.createElement("body");
document.body.innerHTML = "<p>Hello World!</p>";

… however I cannot seem to do the same thing for the head – calling document.head = document.createElement("head"); returns null.

Is this possible? Anything I’m missing?

Note that I’m using Chrome 134.0.6998.89 & attempting to do this via a Chrome extension that has "run_at": "document_start" (so at the time the script is called there really isn’t anything in the document at all).

How to format Number with Intl object using space as a thousands separator and period as a decimal separator?

like this: 123456789.12 -> 123 456 789.12

I tried to use Intl.NumberFormat() but with no success

update: In suggested answers there is now way to format a number with space as a thousands separator and period as a decimal separator using Intl object

I am testing a website in two different environments: Test and Dev. My script works fine in the Test environment, but in Dev, it fails to locate an element.

I am trying to save a transaction, but Cypress is unable to find the Save button. As a result, I am encountering the following error. (Screenshot is attached)
Note: -Once the user clicks the Save button, a dialog box should appear.

I have attached my script and screenshots for reference.

code

businessTransactionScenarios.forEach((scenario) => {
it(Add a new business customer transaction - ${scenario.type} Transaction - ${scenario.method.toUpperCase()}, () => {
const randomFirstName = faker.name.firstName();
const randomLastName = faker.name.lastName();
const randomEmail = faker.internet.email();
const randomPhoneNumber = faker.phone.phoneNumber(‘###-###-####’);
const randomZipCode = faker.address.zipCode(‘?#?-#?#’);

            cy.visit(Cypress.env('baseurl2'));

            cy.origin('https://kapitalincauthdev.b2clogin.com', () => {
                cy.get('#email').type(Cypress.env('credentials').login_username);
                cy.get('input[id="password"]').type(Cypress.env('credentials').login_password);
                cy.get('#next').click();
                cy.wait(8000);
            });

            cy.get('#menu-item-transactions').contains(Cypress.env('menu_items').item_transactions).click();
            cy.wait(5000)
            cy.get('#menu-item-transaction-management').contains(Cypress.env('menu_item_transactions').item_transaction_management).click({force:true});
            cy.wait(5000);
            cy.get('#Grid_add2').click();
            cy.wait(2000);
            cy.get('#drpMerchant').click({force:true});
            cy.get('#drpMerchant_popup').find('li').contains('KPC_201-kapp').click();
            cy.wait(1000);

            cy.get('#drpTransType').click({ force: true });
            cy.get('#drpTransType_popup').find('li').contains(scenario.type).click();

            cy.get('#drpTransMethod').click({force:true});
            cy.get('#drpTransMethod_popup').find('li').contains(scenario.method).click();

            cy.get('#txtAmount').clear().type('12.00');
            cy.get('#txtMerchantRefNumber').clear().type('123456');
            cy.get('#txtDescriptions').clear().type('This is a cypress test automation');
            cy.get('#add-transaction-button-add-customer').click();
            if (scenario.type === Cypress.env('transaction_type').type_pay && scenario.method === Cypress.env('transaction_methods').interac) {
                cy.get('#txtQuestion').type('What is your favorite color?');
                cy.get('#txtAnswer').type('Yellow');
                cy.wait(2000);
            }

            cy.contains('Business Customer').parent().within(() => {
                cy.get('[type="checkbox"]').then($business => {
                    if ($business.is(':not(:checked)')) {
                        cy.wrap($business).check({ force: true });
                    }
                }).should('be.checked');
            });
            const businessName = `${randomLastName} ${randomFirstName}`;
            cy.get('#txtBusinessName').type(businessName);
            cy.get('#txtEmail').type(randomEmail);
            cy.get('#txtPhone').click({ force: true });
            cy.get('#txtPhone')
                .invoke('val', randomPhoneNumber)
                .trigger('input')
                .trigger('blur');
            cy.get('#txtPhone')
                .should('have.value', randomPhoneNumber, { timeout: 1000 });
            cy.get('#txtAddress1').type('423 street');
            cy.get('#txtAddress2').type('Unit 7');
            cy.get('#drpState').click({force:true});
            const province = ['AB', 'BC', 'MB', 'NB', 'NL', 'NS', 'ON', 'PE', 'QC', 'SK', 'NT', 'NU', 'YT'];
            const randomProvince = province[Math.floor(Math.random() * province.length)];
            cy.get('#drpState_popup').find('li').contains(randomProvince).click();

            cy.get('#txtCity').type('Montreal');
            cy.get('#txtZip').click();
            cy.get('#txtZip').invoke('val', randomZipCode).trigger('input').trigger('blur');
            cy.get('#txtZip').should('have.value', randomZipCode, { timeout: 10000 });
            cy.get('#drpInstitutionNumber').click();
            cy.get('#drpInstitutionNumber').type('002');
          //  cy.get('#drpInstitutionNumber_popup').find('li').contains('002').click();
            cy.get('#txtTransitNumber').type('11111');
            cy.get('#txtAccountNumber').type('2343241');
            cy.wait(2000)
            cy.get('#add-transaction-schedule-transaction-info-button-save', { timeout: 10000 })
            .should('exist')
            .should('be.visible')
            .click();
          
            cy.get('#add-transaction-schedule-transaction-info-dialog-button-ok').should('be.visible', { timeout: 4000 }).click();
            cy.wait(1000)
            cy.get('.e-footer-content > .e-control').click();
            cy.wait(1000)
        });
    })

i use the following code to print a table.
i dont know how to hide the last two columns before sending to print.
thanks for the support.
i am not very good i need an example.
can anyone help me? thank you..

<script type="text/javascript">
function printPage(){
    var tableData = '<table border="1" style="border-collapse:collapse; background-color: lightblue;font-size: large;">'+document.getElementsByTagName('table')[0].innerHTML+'</table>';
    var t='Tabella configurazione slot giorni e ore. &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;';
    var data = '<button onclick="window.print()">Print this page</button>'+tableData;   
    
    myWindow=window.open('','','width=800,height=600,left=300,top=100');
        myWindow.innerWidth = screen.width;
        myWindow.innerHeight = screen.height;
        myWindow.screenX = 0;
        myWindow.screenY = 0;
        myWindow.document.write(data);
        myWindow.focus();
    };
</script>

I have made a custom map using the Google Maps API but the map keeps looping from left to right to infinity. Is there a way to fix it? https://i.sstatic.net/f5yA7mM6.png

    var map = new google.maps.Map(document.getElementById('map'), mapOptions);

    var customMapType = new google.maps.ImageMapType({
        getTileUrl: function(coord, zoom) {
            if (zoom < 0 || zoom > maxZoom) return "";
    
            var cols = baseCols * Math.pow(2, zoom);
            var rows = baseRows * Math.pow(2, zoom);
    
            if (coord.x < 0 || coord.x >= cols || coord.y < 0 || coord.y >= rows) {
                return null;
            }
    
            return 'tiles/' + zoom + '/' + coord.y + "_" + coord.x + ".png";
        },
        tileSize: new google.maps.Size(256, 256),
        minZoom: 0,
        maxZoom: maxZoom,
        name: 'custom',
        opacity: 1
    });

    map.mapTypes.set('custom', customMapType);
    map.setMapTypeId('custom');

Tried adding noWrap: true and tried couple of more things.

Iam Developing a website that will genrate pdf of invoice :- i have a input html file so by the input the user can send all the date to genrate the pdf and i am getting those data in my js file and i defind a template by using those data so iam tring to gentarat the pdf with npm “puppeteer” module ( that is html template genrater to PDF) but the module is not supporting my extenal images that i applied in html and i can see those data in the pdf what i update in the broswer by using js …….??????????

i want to gentrate the pdf as i updated with those date in the browser by using js

I have a project I am working on where we are creating scripts that will get injected into a runtime. The scripts are executed as JavaScript, but to improve the code of these scripts we are working to convert them all to Typescript. Each script is injected as a function with some variables defined and then a return statement expected to return a boolean to indicate success or failure.

The plan is/was to have each script be a standalone file and then get compiled from typescript to javascript. We are using esbuild for this and have have no issue doing this. The issue we are having is the fact that typescript will not allow a return statement in a file and will complain that there is no function wrapping the code, A 'return' statement can only be used within a function body.ts(1108)

Is there a way with typescript to ignore this specific error, or ideally simulate what the function looks like in one global place so it has proper typings?

I am attempting to load an image src from a data URL loaded in Javascript. It’s a legacy Web Forms application with the “img-src” Content-Security-Policy (CSP) defined in the web.config. I see that the policy is included in the header as expected …

Yet when I attempt to load the image data into an tag via Javascript …

const fileReader = new FileReader();
fileReader.onload = (fileReaderEvent) => {
    console.log(fileReaderEvent);
    imgBannerImage.src = fileReaderEvent.target.result;
}
fileReader.readAsDataURL(file1);

… I get the following exception …

Refused to load the image ... because it violates the following Content Security Policy directive: "default-src". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

indicating that the ‘img-src’ was not set. Clearly it is. What am I missing?

Thanks!

Problem: I have a function fetchPokemonData which fetch some data from an API and returns an array of objects. I am trying to display(console.log) the data into another component.

What I have tried?

I created another async function fetchData to store the return value (the array) in a variable and then updated the state.

Code from fetchPokemonData:

async function fetchPokemonData() {
  const pokemonDataArray = []; // Store images objects

  for (let i = 0; i < 10; i++) {
    const randomDex = Math.floor(Math.random() * 100) + 1;
    const response = await fetch(
      `https://pokeapi.co/api/v2/pokemon/${randomDex}`
    );
    const pokemonInfo = await response.json();

    pokemonDataArray.push({
      id: i,
      name: pokemonInfo?.name,
      url: pokemonInfo?.sprites?.front_default,
    });
  }

  return pokemonDataArray;
}
export { fetchPokemonData };

Code from DisplayImages:

import { useEffect, useState } from "react";
import { fetchPokemonData } from "./fetchImages";

function DisplayImages() {
    const [pokemonDataArr, setPokemonDataArr] = useState([]);
    const fetchData = async () => {
        const response = await fetchPokemonData();
        console.log(response);
        setPokemonDataArr(response);
        console.log(response);
        return response;
    }

    useEffect(() => {
        fetchData();
console.log(pokemonDataArr)
    }, []);

    return (
        <h1>{pokemonDataArr[0]}</h1>
    )
}

export {DisplayImages};

This code is not showing me any logs