In Certain Instances, Javascript Popups Are Losing Focus

I've been completely puzzled by this issue. Here is a working example of the code:

<a href="javascript:void(0);" onclick="openPopUp('Edit_Screen.aspx?Image_Id='+ '<%# Eval("Image_Id") %>','Popup',850,800);">
                         <%# Eval("ReferenceNumber") %>
</a>

Which triggers the following function:

function openPopUp(pageURL, title, popupWidth, popupHeight) {
  var targetPop = null;
  var left = (screen.width / 2) - (popupWidth / 2);
  var top = (screen.height / 2) - (popupHeight / 2);
  targetPop = window.open(pageURL, title, 'toolbar=no, status=no, menubar=no, width=' + popupWidth + ', height=' + popupHeight + ', top=' + top + ', left=' + left).focus();

}

This piece of code does not work as expected:

<asp:Button ID="btnNewRecord" runat="server" Text="Enter New Record" CssClass = "button" OnClientClick="LaunchImage()" />

Which calls the following function:

function LaunchImage()
{
   debugger;
   openPopUp("Insert_Screen.aspx?dataType=images", "Popup", 750, 650);
}

Both functions call the same openPopUp function. The first code example using an anchor tag keeps focus on the pop-up, while the second code triggered by the ASP button gives back focus to the calling screen. I can't figure out why this difference exists. It's been bothering me for quite some time now.

Any insights are greatly appreciated!

javascriptc#asp.net

Answer №1

When the button is clicked, it triggers a postback, whereas clicking on the anchor link does not. To stop the postback from happening, you can use the OnClientClick event of the button with the statement below:

OnClientClick="LaunchImage(); return false;"

Answer №2

<asp:Button ID="btnNewRecord" runat="server" Text="Add New Entry" CssClass = "button" OnClientClick="StartImage(); return false;" />

or

<asp:Button ID="btnNewRecord" runat="server" Text="Add New Entry" CssClass = "button" OnClientClick="return StartImage();" />

and the javascript function 

function StartImage()
{
   debugger;
   openPopUp("Insert_Screen.aspx?dataType=images", "Popup", 750, 650);
   return false;
}

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 is the most efficient way to calculate the sum of all the numbers lying between the endpoints

I am faced with a complex array The array looks like this: let arr = [[2, "OR", 22, 22, "OR", 22, 20], [300, "OR", 22, 300, "OR", 22, 22, "OR", 1], [1212, 2, "OR", 1]] My goal is to extract and ...

javascript

Having trouble showing the fa-folders icon in Vuetify?

Utilizing both Vuetify and font-awesome icons has been a successful combination for my project. However, I am facing an issue where the 'fa-folders' icon is not displaying as expected: In the .ts file: import { library } from '@fortawesome/ ...

javascripttypescriptvue.jsvuetify.jsfont-awesome

Guide on including a callback function in the renderCell columns of Material UI X Datagrid

When a button is clicked and the redux action is successful, I am trying to use a simple toast hook to display a message in the parent component where my Data grid is located. Can a callback be passed to utilize this hook from within the data grid? Here i ...

javascriptreactjsreact-hooksmaterial-ui

What is the process for configuring the injector in my application?

https://code.angularjs.org/1.0.0rc9/angular-1.0.0rc9.js I am facing an issue with the above link as it defines an external js file that I am not familiar with the injector to angular-1.0.0rc9.js. Due to this, my app is not running in the browser. Here is ...

javascriptangularjs

Unusual Behavior Uncovered in jQuery Selectors

Have you ever noticed a peculiar behavior of jQuery selectors? I recently discovered that when the page contains elements with non-unique IDs, jQuery returns different results for the same selectors: Here's an example of HTML code: <button id=&ap ...

javascriptjqueryhtmljquery-selectors

Can we ensure the thread safety of reading the value of a class-wide integer that is only assigned at the beginning?

When initializing a variable at the start of a program and then utilizing it across multiple threads, is it considered thread-safe? private int myVal; private void StartOfApp() { myVal = 99; } private void MethodCalledFromVariousThreads() { int i = ...

c#.netmultithreading

Conceal one element and reveal a different one upon submitting a form

On a web page, I want to hide the form upon submission (either by clicking or pressing enter) and display the results. However, this functionality does not seem to work when the Go web server is running. When I test the HTML file (without executing the Go ...

javascriptjqueryajaxgo

The link containing special characters like % cannot access the api

I am facing an issue with retrieving a signUrl from S3. When I make the call with special characters like %, my code does not parse it correctly and I receive a 404 not found error. Here is the ajax request I am using: My API setup: app.get('/websi ...

javascriptnode.jsajax

What could be the reason for the absence of a TypeScript error in this situation?

Why is it that the code below (inside an arbitrary Class) does not show a TypeScript error in VSCode as expected? protected someMethod (someArg?: boolean) { this.doSomething(someArg) } protected doSomething (mustBePassedBoolean: boolean) { /* ... * ...

javascripttypescriptvisual-studio-code

Getting the value from a dropdown menu and displaying it in a text area

I have 3 functions (radio, textarea, and dropdown) I was able to successfully retrieve the values of radio and textarea into the textarea. However, the drop down functionality is not working as expected. My goal is to display the selected option from the ...

javascriptjqueryhtmlcssbootstrap-4

Ways to display scroll bar when hovering the mouse pointer?

When visiting the website YouTube, you may notice that their sidebar scrollbar becomes visible as soon as your mouse moves over it. I've been attempting to achieve this effect on my own div, but currently, the scrollbar only appears once I start scrol ...

javascriptcss

Tips for properly formatting Excel cells during a C# export process

I have developed a C# program to export data table content to Excel. However, I am facing an issue with the default cell format being fixed in General. Can anyone guide me on how to change the cell format programmatically? (For example, formats like Text ...

c#.netexcelwinformsdatatable

Forgetting your password with React JS

On my login page, there is a button labeled "Forget my password". When I click on this button, I want to be taken directly to the correct page for resetting my password. Currently, when I click on "forget my password", it displays beneath the login sectio ...

javascriptreactjsreact-native

Arrangement of 3 points on the graphical user interface

Seeking the orientation of 3 ordered points in space using an algorithm discovered on this site: https://www.geeksforgeeks.org/orientation-3-ordered-points/ Desiring to display the orientation on GUI as Clockwise or CounterClockwise while adjusting coordi ...

javascriptthree.jsdat.gui

Utilizing a structure to interface with an external C library

I'm facing a challenge with marshalling a structure in a call to an external library function. The call itself does not return any errors, but the function returns an error code indicating that it did not understand the values passed in correctly. Be ...

c#.netpinvokemarshalling

function instance is causing confusion with the hasOwnProperty() method

When looking at the code example provided, it is interesting to note that the doOtherStuff function is defined directly on the b instance, rather than being higher up in the prototype chain (like on base or Object). This leads to a situation where b.hasOwn ...

javascript

JavaScript: Translating Date into Moment

Is there a way to convert a Date object to Moment in JavaScript? let testDate = new Date(2020, 05, 03, 1, 2); I attempted the following code without success toMoment(testDate) What is the correct syntax to achieve this conversion? ...

javascripttypescript

What is the best way to utilize the constructor in a JavaScript object so that only the properties within `this` are utilized?

I am looking to instantiate the following class: class Person { firstName; lastName; birthday; constructor(props: Person) { {firstName, lastName, birthday} = props } } var me = new Person({firstName: "donald", lastName: "trum ...

javascripttypescript

Update the state within a forEach iteration

Is there a way to update state when clicking on buttons? I keep getting an error. Error: Uncaught TypeError: this.setState is not a function I understand that this.setState cannot be used here, but I'm unsure of where to bind it. class Popup extend ...

javascriptloopsreactjsaddeventlistenersetstate

Using Vercel for a Next.js Custom Directory Configuration

Seeking guidance on deploying Next.js with Vercel, I have made changes to the structure of my Next.js project: frontend (Current Directory for Next.js) node_modules next.config.js jsconfig.json package-lock.json package.json Contents of package.json scri ...

javascriptnext.jsvercel