Click on the link to open it in a SharePoint modal and populate it with the value from the

After populating a ng-grid with SharePoint items, my goal is to have the SharePoint edit form open in a modal window when the edit button at the end of each row is clicked. However, I am encountering difficulties when using OpenPopUpPage as the {{row.entity.Id}} does not update correctly and leads to a broken edit page.

Functioning Example:

{ displayName: 'Edit', cellTemplate: '<a ng-href="../lists/locations/editform.aspx?IsDlg=1&id={{row.entity.Id}}">Edit</a>' }

Opens the modal but presents incorrect ID on the edit form:

{ displayName: 'Edit', cellTemplate: '<a ng-href="#" onclick="javascript:OpenPopUpPage(\'../lists/locations/editform.aspx?IsDlg=1&id={{row.entity.Id}}\')">Edit</a>' }
javascriptangularjssharepointng-grid

Answer №1

Although I'm not familiar with sharepoint popups, here is a code snippet that demonstrates how to pass a value to a function:

    $scope.gridOptions = {
    data: 'myData',
    columnDefs: [{
      field: 'name',
      displayName: 'Name'
    }, {
      field: 'id',
      displayName: 'Action',
      cellTemplate: '<a ng-click="popup(row.entity.id)" href="#">Edit</a>'
    }]
    };

    $scope.popup = function(id) {
    // call your popup from here
    alert(id);
    }

Feel free to experiment with this Plunker

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

A guide on linking an object in strapi V4 to a React app

Recently in strapi v4, there was a change in the response API structure from an array to an object. When analyzing the response using Postman on my local strapi API and converting it into raw format with stringify, I noticed that the API response consists ...

javascriptreactjsreststrapi

Preloading Vue dynamic routes for optimal performance

Currently dealing with a challenge on my Vue project and could use some help. I'm looking to prerender specific dynamic routes when I navigate to a particular route within the application. On the /works route, there's a list of items displa ...

javascriptperformancevue.jsvue-routerdynamic-routing

Error encountered: The use of 'import' and 'export' is limited to 'sourceType: module' when attempting to install Tweakpane

I am currently learning JavaScript and have been following a course on Domestika that requires me to install the Tweakpane package. I usually use Git Bash for installing packages, and I have successfully installed others this way before. Here is the proces ...

javascriptnpmpackagenpm-install

The JavaScript file fails to load when accessing port 8080

As I embark on my journey into backend development, please bear with me. Currently, I am working on a JavaScript program that retrieves text data from my localhost. I have set up an HTTP server using Node.js which serves as a regular HTTP server. The serve ...

javascriptnode.jsexpresshttpxmlhttprequest

What is the destination for next() in Express js?

I'm new to javascript, nodejs, and express, and facing confusion with the usage of next(). I am trying to make my code progress to the next router using next(), but it seems to be moving to the next then instead. This is what my code looks like: // ...

javascriptnode.jsexpress

Having trouble with Laravel 5.5 and ajax file uploads?

I am encountering an issue with Laravel 5.5 while trying to get an ajax file. I can successfully receive the file using $_FILES, but $request->file() is not working as expected. Here is the code in question. Below are the HTML & Ajax elements: <html&g ...

javascriptphpjqueryajaxlaravel-5

What could be causing the element.style.FontSize to not be effective on classes that have been looped through and stored in an array created with querySelectorAll beforehand?

Greetings Stackoverflow Community, Today, I'm facing an issue related to JavaScript and WordPress. I have a JavaScript script named setDynamicFontHeight.js, as well as PHP documents named header.php and navbar_mobile.php, which simply executes wp_nav_ ...

javascriptwordpressclassdomqueryselector

How to use multiple template urls in Angular 6

Currently, I am creating a front-end using Angular 6 and facing the challenge of having components with varying html structures based on the user who is logged in. The number of templates required can range from 2 to over 20, so my preference would be to ...

javascriptangulartypescript

Attempting to transfer user information to MongoDB using AngularJS and Node.js

Greetings everyone! I am currently working on a template and trying to develop a backend for it, starting with the registration form. Despite having some kind of connection between my mongodb and my app, data is not being sent to the database. Here is the ...

javascriptangularjsnode.jsmongodbexpress

Ionic: Vertical scroll bars becoming unaligned when injecting views into a splitview

After experimenting with the split view feature and exploring routing, I wanted to create a "main layout" split view and dynamically inject different views into it at runtime. You can see an example of what I'm trying to achieve in this Plunk. In my ...

angularjsionic-framework

When using ng-repeat, make sure to track by $index for unique

After manipulating an array with 5 values (1, 2, 3, 4, 5), it now contains duplicate data (1, 2, 3, 4, 5, 1, 2, 3, 4, 5). I would like to use ng-repeat with $index to display the data without duplicates. Is this possible? ...

angularjs

The `res.send()` function is showing [object object] and I am unable to access any properties

I've just started learning about REST APIs with express. I am encountering a strange issue where the code successfully console logs { name: 'Test', id: 1 } for the user, but when I send the response, it displays [Object object]. Additionally ...

javascriptjsonrestexpress

JavaScript: a single function and two calls to Document.getElementById() results in both returning "undefined"

Within my JavaScript file, I have a function that utilizes two variables: choice and courseChosen. The latter variable must be converted into an object first. In the HTML, the tags courseName and courseInfo are used for choice and courseChosen respectively ...

javascripthtmljsonfunctiontags

What is the best way to combine JavaScript objects with identical values?

We have a task to compare each input key with others to find any common values. If there are common values, we need to concatenate them together and display the pairs. If no common values are found, then an empty array should be displayed as output. inpu ...

javascriptarraysjsonobject

Combining multer, CSRF protection, and express-validator in a Node.js environment

Within my node.js application, I am utilizing an ejs form that consists of text input fields in need of validation by express-validator, an image file managed by multer, and a hidden input housing a CSRF token (a token present in all other forms within the ...

javascriptnode.jsmulterexpress-validatorcsrf-token

What are the common causes of server response issues in AJAX?

I have created a Facebook app that utilizes ajax requests and responses every 3 seconds. The app also has menu items that load content in the main div. All ajax requests are directed to a common.php file. However, some ajax requests are slower than others. ...

phpjavascriptjquerymysqlajax

Strange occurrences observed while looping through an enum in TypeScript

Just now, I came across this issue while attempting to loop through an enum. Imagine you have the following: enum Gender { Male = 1, Female = 2 } If you write: for (let gender in Gender) { console.log(gender) } You will notice that it iter ...

javascripttypescript

Dynamic Binding of ng-model to DOM Element in AngularJS

I am facing a challenge with my web page where I need to dynamically attach ng-model attributes to some HTML elements that I don't have the ability to edit. What I want to achieve is to have AngularJS re-bind these attributes to the scope. You can fin ...

javascriptangularjsbinding

Easy ways to manipulate the style of array components in Vue.js

Hey there all you programmers, I'm reaching out to see if any of you have insight on how I can modify the style of a specific component within an Object array. This is the code snippet: <template> <div> <ul> <li v-fo ...

javascripthtmlcssvue.jsvue-component

What is the best way to transfer data from a custom method and use it in another method within my constructor function in Javascript?

As I pondered a suitable example, I devised a constructor function centered around precious metals. This function accepts the type of metal and its weight as parameters. Within this constructor, there are two methods: one to verify if the precious metal (g ...

javascript