The placeholder text feature for Google custom search is ineffective when using the Edge browser

After adding the following code to the end of the Google custom search script, I encountered an issue:

window.onload = function(){
  document.getElementById('gsc-i-id1').placeholder = 'Search';
};

Although this code successfully added the placeholder text "Search" to the search box in all major browsers, it did not work in Microsoft Edge.

Microsoft Edge displayed the following error message:

SCRIPT5007: Unable to set property "placeholder" of undefined or null reference.

Despite attempting several fixes, I was unable to resolve the issue...

UPDATE: I have found a temporary solution to this bug until Microsoft addresses it:

setTimeout(function(){
  document.getElementById('gsc-i-id1').placeholder = 'Search';
}, 500);

Answer №1

The problem arises in Edge due to the load event firing before the script has a chance to create gsc-i-id1. This results in the placeholder text being set on null instead of the intended element, causing an error.

A temporary solution would be to initially check for the existence of the element and then retry after a set timeout if it is not yet available.

It would be ideal to include the text setting as part of the search box configuration. Although this is currently not mentioned in the documentation at https://developers.google.com/custom-search/docs/ui#elements_searchbox, you can suggest this feature by submitting a request. This would eliminate the timing issue and protect your script from breaking in case the element id changes in the future.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be causing my for loop to not function properly within the ngOnInit lifecycle hook?

I am attempting to create a nested loop structure in order to access an array that is inside an object within an array of objects, and then store this data into a new array. My issue arises as the first loop executes successfully but the second one does no ...

Having Trouble Loading PHP File with Jquery

I've been struggling with using JQuery/Ajax to load the content of my PHP file into a div tag. Below is the code snippet from my page that attempts to load the file: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/ ...

Inquiry to an outside domain

I need to send a request to an external domain, ensuring that the parameter is correctly sent to a PHP file on the external server. However, I'm facing an issue where "request.responseText" always returns empty. Any assistance in this matter would be ...

Optimal row settings for different reports using Material-UI table pagination

Recently, I've been exploring an example involving material-ui's TablePagination. In this scenario, they present a useTable component with the following code snippet: import React, { useState } from 'react' import { Table, TableHead, Ta ...

Is there a way to bypass the default layout on app router in Next.js and implement our own custom page layout

Utilizing a default layout in layout.jsx, I passed all my other pages as children through props. In the page router, we typically configure the router path to specify which layout to use. However, in this new system, I am facing challenges with coding it. ...

Extract information from an external website using AJAX in Laravel

On my cart page, I utilize ajax to retrieve destination information from the user and provide them with shipping options to calculate their shipping cost. While everything is functioning properly, one issue remains: I am unsure of how to iterate through t ...

Utilizing custom filters to navigate through nested ng-repeats

My goal is to achieve a specific behavior by using custom filters. I am working on creating a unified search bar that will display entire group names with all failing students, as well as group names with only the matching students. If you want to see the ...

What is the best way to connect an event in Angular 2?

This is an input label. <input type="text" (blur) = "obj.action"/> The obj is an object from the corresponding component, obj.action = preCheck($event). A function in the same component, preCheck(input: any) { code ....}, is being used. Will it wor ...

Angular app sends a JSON request and receives no data in response

It seems like Angular may be loading the page before fully receiving all the information from JSONP. There are times when refreshing the page multiple times eventually displays the information, but it's not consistent. Interestingly, the code used on ...

Closing the Material UI dialog from an inner component

In my application, I have implemented a sign-in dialog using Material UI. However, I have separated the login button into its own component. I am trying to figure out how to close the dialog when the submit button in the SigninForm component is clicked. I ...

What could be causing the TypeError I encounter when trying to import @wordpress/element?

Encountering a similar issue as discussed in this related question. This time, I've switched to using '@wordpress/element' instead of 'react-dom/client' based on the recommendation that it also leverages React functionalities. Ho ...

Using AngularJS to create a select dropdown menu with nested objects as the options

Currently, I am working on developing an AngularJS application with a complex data structure. The data source consists of an array of individuals with their languages and skill levels. My goal is to be able to filter these individuals based on language sk ...

What could be causing the page to automatically scroll to the bottom upon loading?

My experience with this bootstrap/jquery page in Firefox (v39, latest updates installed) has been unusual as it always seems to jump to the bottom of the page upon clicking. Upon inspecting the code, I couldn't find any JavaScript responsible for thi ...

Angular: The Ultimate Guide to Reloading a Specific Section of HTML (Form/Div/Table)

On my create operation page, I have a form with two fields. When I reload the page using window.reload in code, I can see updates in the form. However, I want to trigger a refresh on the form by clicking a button. I need help writing a function that can r ...

How can I successfully transmit the entire event during the (change) event binding with ng-select in Angular 14?

I'm working on Front end Code <ng-select formControlName="constituencyId" placeholder="Select Constituency" (change)='onContituencyChanged($event)'> > &l ...

13 Helpful Tips for Resolving Hydration Failure Due to Discrepancy in Custom Dropdown Display between Server and UI

Recently, I embarked on a project utilizing the latest version 13 of Next.js with its new app directory feature. As I integrated a custom dropdown into one of my pages, an error surfaced: "Hydration failed because the initial UI does not match what was ren ...

Is there a way to use Node.js to automatically redirect any random string paths back to the main home page?

Is there a way to configure my basic Node.js server to use simple paths instead of query strings for user session IDs? For instance, can I make domain.com/GH34DG2 function the same as domain.com within my web app? This format seems more visually appealing ...

Understanding the syntax for matching files and paths in Node/JavaScript using glob, including the use of wild

I stumbled upon http://gruntjs.com/configuring-tasks#globbing-patterns and found it to be the most useful reference so far. I have come across the following statement multiple times: For more on glob pattern syntax, see the node-glob and minimatch docu ...

Tips for showing both label and value on a pie slice in Apex charts

I am currently utilizing apex chart within an angular application to showcase charts. I am specifically focusing on a pie chart and aiming to customize it by displaying labels on the values within each slice of the pie, similar to what is shown in the atta ...

The imported package is not functioning properly within the project

I've recently developed a Typescript Package and I want to test it in an application before publishing it on NPM. The main file (index.ts) of the package is structured like this => import Builder from './core/builder'; export default ...