Trigger a popup using the javascript .link() method

I am currently using ag-grid to present JSON data. When the values are located within nested objects, I have to utilize a valueGetter from the grid API to map to the appropriate value. The value getter returns a value for each row and the grid matches it to the correct row successfully. However, my dilemma arises when I want each value to act as a hyperlink that triggers a popup window. I have an openPopup() method in place which uses window.open. Unfortunately, it seems that I am constrained to using JavaScript's .link() method, which only accepts a URL string. As a result, I am struggling to figure out how to make the link open in a new window.

Value getter :

function isinValueGetterBox(params) {
        if (params.node.group) { return null; }
        var isinValueBox = "";

        for (var i = 0; i < params.data.security.identifiers.length; i++) {
            if (params.data.security.identifiers[i].type === "isin") {
                isinValueBox = params.data.security.identifiers[i].value;
            }
        }
        return isinValueBox.link("views/Popup1.html");
    }

popup method :

popup1 = function () {
    var popup1 = window.open("views/Popup1.html", "_blank",
                        "height = 400, width = 700");
}

Answer №1

Recently discovered the ability to incorporate HTML within javascript strings, allowing me to add an <a> tag with an onclick function to trigger my window.open method.

Here is the updated valueGetter method:

function isinValueGetterBox(params) {
    if (params.node.group) { return null; }
    var isinValueBox = "";

    for (var i = 0; i < params.data.security.identifiers.length; i++) {
        if (params.data.security.identifiers[i].type === "isin") {
            isinValueBox = ('<a href="#" onclick="popup1()">' + params.data.security.identifiers[i].value + '</a>');
        }
    }
    return isinValueBox;
}

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

Similar to ng-src, how to handle "Value" attributes in AngularJS

I am currently working with AngularJS and I want to include a vimeo link on one of my pages. The challenge is that depending on whether the user is accessing the page through HTTPs or HTTP, we need to adjust the URL accordingly. <div class="video"> ...

JavaScript has been used to modify a cell's URL in jqGrid

Currently, I am utilizing struts2-jqgrid along with JavaScript. After the jqgrid has finished loading, it retrieves <s:url var="updateurl" action="pagosActualizar"/>. Subsequently, in the HTML view source, jqgrid generates options_gridtable.cellurl = ...

What is the process for obtaining Style.css, additional CSS, and JavaScript files from a live single page website?

I am currently facing a challenge with a live single page website where I need to make some fixes. Unfortunately, I am unable to access the Style.css file, along with other css and javascript files. Although I managed to save the html file by using Ctrl+s, ...

The orderBy function is not functioning properly when used in conjunction with ng

I attempted to replicate the functionality demonstrated here, which involves organizing an array of objects in the view using the filter orderBy. While my code is functioning properly, when I apply the orderBy filter, nothing appears in the view. You can ...

Getting a ReferenceError while trying to use a MongoDB Collection variable in an external resolver file that had been imported through mergeResolvers

Here is a simplified example to illustrate the issue at hand. When using the resolver Query getAllUsers, the MongoDB Collection Users is not accessible in the external resolver file user.js. This results in the following error when executing the query: ...

Pull the Bootstrap radio value from hyperlink buttons

Is anyone else having trouble retrieving values of radio buttons using jQuery? Here are the radio buttons in question: <div class="input-group"> <div id="radioBtn" class="btn-group"> <a class="btn btn-warning radio-selector btn ...

Utilizing the Filter function to extract both the content contained within a class and the class itself

The filter function is working properly, returning multiple divs with a class of post. However, it is only capturing the content inside the div: <h1></h1> and not the entire structure like this: <div class="post"><h1></h1>& ...

My locale NUXT JavaScript files are being blocked by Content Security Policy

I've been working on implementing CSP headers for my website to ensure data is loaded from trusted sources. However, I'm facing an issue where CSP is blocking my local JS files. Here's a snippet from my nuxt.config.js: const self = 'lo ...

Traversing an array of objects to extract and display the key-value pairs for each object

Here is an array I am working with: const cuisines = [ { african: "African" }, { american: "American" }, { arabian: "Arabian" }, { argentine: "Argentine" }, { asian: "Asian" }, { asian_fusion: "Asian Fusion" }, { australian: "Australi ...

Tips for updating the value of a key in a JavaScript object when the TextField tag's value changes

Here is the schema I am using for my model: const workoutSchema = mongoose.Schema({ workouts: [ { workoutName: String, sets: Number, reps: Number, weight: Number, }, ], }); Below is the postData referenced in the text f ...

What could be causing the error.status value to not be displayed on my Embedded Javascript (EJS) page?

Currently utilizing ejs, node.js & express along with other packages I'm facing an issue where the error.status and error.stack values are not appearing on the rendered page. I suspect that the error variable may be undefined or inaccessible within t ...

update the componentWillMount() function

I am currently exploring the code found at https://github.com/Spyna/react-store/blob/master/src/createStore.js What adjustments do I need to make in order to align with the deprecated componentWillMount lifecycle method? CreateStore const createStore = ...

Standardize API data for utilization in Redux

I have an API that provides the following data: const data = { id: 1, name: 'myboard', columns: [ { id: 1, name: 'col1', cards: [ { id: 1, name: 'card1' }, { id: 2, name: 'card ...

Retrieving information through a jQuery ajax call

I've been working on creating an AJAX filter for a car list, but I've hit a roadblock in the final stage. My setup involves two files: index.php and filter.php. Within index.php, I have a form with dropdown lists and sliders. Here's the cod ...

Choose a selection from the options provided

This is a sample for demonstration purposes. I am trying to display an alert with the message "HI" when I click on Reports using the id main_menu_reports. My attempted solution is shown below. <ul class="nav" id='main_root_menu'> & ...

Bootstrap modal experiencing technical difficulties

I am experiencing issues with my bootstrap modal. It seems to be malfunctioning, almost as if the CSS or JavaScript files are not being recognized. I have tried various solutions but have been unable to resolve the problem. I even attempted using the examp ...

A guide to injecting HTML banner code with pure Vanilla Javascript

Looking for a solution to incorporate banner code dynamically into an existing block of HTML on a static page without altering the original code? <div class="wrapper"><img class="lazyload" src="/img/foo01.jpg"></div> <div class="wrapp ...

How can I remove the focus highlight from the MUI DatePicker while retaining it for the TextField?

I am currently working on developing a date picker using react.js with the MUI DatePicker library. The code I have implemented closely resembles what is provided in their documentation. However, upon rendering the component, I am encountering an issue whe ...

Canvas does not display any results when trying to integrate Shadertoy

While browsing through StackOverflow, I came across a post detailing how to transfer shader examples from ShaderToy into Three.js. You can find the post here. I followed the steps mentioned in the post and created this Plunker demo. The fragment shader co ...

Tips for modifying the settings of a current google chart within a wrapper

Is there a way to update the options of an existing Google chart? For instance, if I want to apply these options to a chart with just a click of a button: var newOptions = { width: 400, height: 240, title: 'Preferred Pizza Toppings', col ...