Executing a JavaScript function within an ASP Hyperlink that incorporates an Eval function

Greetings, I am working on a gridview that contains an asp:hyperlink TemplateField. When clicked, I would like it to trigger a popup window. Here is an example of my javascript code.

<script>
    function openPopup(url) {
        newWindow = window.open(url, 'name', 'height=300,width=735');
        if (window.focus) { newWindow.focus() }
        return false;
    }
</script>

Below is the non-popup version of the code.

<ItemTemplate>
    <asp:HyperLink Target="_blank" DataNavigateUrlFields="PriceListItemID" ID="lnkQty" runat="server" DataNavigateUrlFormatString="../PricingTool/PriceListQuantity.aspx?PriceListItemID={0}" Text='<%# Bind("NumQty") %>' NavigateUrl='<%# "../PricingTool/PriceListQuantity.aspx?PriceListItemID=" + Eval("PriceListItemID") %>' />
 </ItemTemplate>

I have tried different approaches but keep getting the error "The server tag is not well formed." Here is an example of the broken code I attempted.

<asp:HyperLink Target="_blank" DataNavigateUrlFields="PriceListItemID" ID="lnkQty" runat="server" Text='<%# Bind("NumQty") %>' NavigateUrl='<%# "Javascript:openPopup.show('../PricingTool/PriceListQuantity.aspx?PriceListItemID=" + Eval("PriceListItemID").ToString() + "')" %>' />

Any assistance with this issue would be highly appreciated.

Answer №1

For your JavaScript function/code to work correctly, it must be placed within the OnClick attribute:

<a href="#" onclick="showPopUp();">Click me</a>

Answer №2

Here's a tip for calling the method in the OnClick event:

<asp:HyperLink Target="_blank" OnClick="Javascript:popups(url);" />

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

Is there a way to determine which elements have been hidden or shown using Bootstrap 4 collapse events?

Looking to enhance the functionality of a Bootstrap 4 accordion, I am exploring the possibility of utilizing their events (https://getbootstrap.com/docs/4.0/components/collapse/#events). In one of their examples, $('#myCollapsible').on('hid ...

Troubleshooting compatibility issues between JS and ng-view in AngularJS

In my AngularJS SPA project, I am using ngRoute along with Bootstrap's Carousel template. However, I have run into an issue where certain functionalities ceased to work once I started using ng-view instead of placing all the main content in the index. ...

the advantages of enforcing a type instance over using typeof in TypeScript

I am trying to export a type as an instance, rather than just a reference. I have experimented with various approaches, but so far the only solution I have found involves creating a static getter which I would prefer to avoid. Here is my context: I want t ...

Advantages of using jQuery's .each() function instead of conventional "for" loops

I recently had a colleague recommend using jQuery's .each() function instead of a standard javascript for loop for traversing through DOM elements on my webpage. While I am familiar with jQuery, I've always wondered why developers prefer using .e ...

Utilizing the Model-View-Controller architecture to efficiently transfer a collection

I'm attempting to send an email from my controller after receiving two images from a view. Despite numerous attempts, when I debug the Post method in my controller, the object always contains null values. However, logging the data being sent shows th ...

Several features - Second function malfunctioning

The initial inquiry is effective. However, the subsequent one is encountering issues as it is failing to confirm if an email contains the "@" symbol. My attempted solution involved reordering the functions related to email validation. <body onload="ch ...

Struggling to navigate the world of JavaScript and find the sum of odd numbers?

Currently facing a roadblock with a codewars exercise and in need of some assistance. The exercise involves finding the row sums of a triangle consisting of consecutive odd numbers: 1 3 5 7 9 11 13 15 17 ...

Prevent regex special characters in JavaScript while preserving the original string for keyword matching

As I develop my web page, I encountered an issue while trying to highlight text based on user input in the search box. My search algorithm matches each space-separated keyword, but ran into problems when including brackets in the search term. This caused a ...

Tips on temporarily halting frisby.js scripts while executing a sequence of API calls

I am looking to experiment with session timeout using Frisby.js. My plan is to first test the login API and then call another API to confirm that the user is logged in. Next, I want to configure frisby.js to wait for 20 minutes for the session to expire ...

Establishing a Link between ASP.NET and Derby

Connecting to a Derby database from ASP.NET may seem unconventional, but it is definitely possible. The project at hand is a web page application. Here is an example of how I have configured my web.config file: <add name="DerbyConnectionString" ...

send a collection of items as a communication medium between server and client using SIGNALR

Hello everyone, I am currently exploring SignalR and having a great time pushing my skills to new heights. I have a question regarding passing a list to the client. Below is the code I am using: Public Sub Send(message As String, id As String) Dim ...

Easy method for generating a JavaScript dictionary using an array containing arrays

I have a collection of paired items, and I am looking to convert it into a dictionary. const collection = [['apple', 3], ['banana', 5]] const transformed = {'apple': 3, 'banana': 5} If I were using Python, I could ...

What is the best way to obtain a unique result for a single cell without encountering any duplicates when using the Angular

Currently, I have functional code that successfully passes data from a dialog window to a table. Everything works fine for a single row, but when I try to add multiple rows to the table, I get results for several columns simultaneously. Is there a way to o ...

Utilizing CSS for positioning forms and images with floats

I have implemented a dropdown box that allows users to select one of eight images, which is then displayed on the webpage. However, currently the image appears directly above the dropdown box and I would like to format it so that the image is shown on the ...

Error: Unable to convert Mongoose object to ObjectId

Currently tackling an issue with my small blog app and I seem to be stuck at this error- { "message": "Cast to ObjectId failed for value \" 597c4ce202ca9c353fc80e8a\" at path \"_id\" for model \"Blog\"", "name": "CastErr ...

Mobile phone web development using HTML5

I am currently facing an issue with playing sound on mobile browsers. In my code snippet, I have the following: Response.Write("<embed height='0' width='0' src='Ses.wav' />"); While this works perfectly fine on desktop ...

Consolidating all my imports into separate files for each page

Currently, I have a manage.js page in my NextJS app with the following imports: import React from 'react'; import PaginatedItems from '../components/PaginatedItems' import TitleHeadline from "../components/ui/TitleHeadline&quo ...

Filtering JSON array objects based on multiple attributes using JavaScript

I'm currently facing some challenges with a VueJS application that involves filtering API responses based on multiple dropdown values. So far, I've been able to handle two filters by declaring one outside the if (filtered) statement and the seco ...

Implementing Autocomplete search with jQuery Chosen plugin - a step-by-step guide

CSS <select class="custom" id="company_hub" name="company_hub" style="width: 400px; display: none;"> <option>-Select Item-</option> </select> https://i.sstatic.net/x4YtN.png I attempted the following method but it was unsucces ...

``Unusual padding for the body in VueJS and Nuxt, with a touch of CSS

I am currently working with VueJS + NuxtJS and have implemented a background gif. Right now, the code looks like this: body { margin: 0 auto; background: url("assets/video/background-darked.gif") no-repeat center center fixed; -webkit-backg ...