Tips for modifying a list item on a different page

The Scenario

When using Sharepoint 2010, I am able to select an item from a list:

This action then displays the Read/Edit view on that page:

My Objective

I have a WebPart located on a different Page where I display items from various lists, including this one. I would like to include a read or edit link for each of these items.

How can I achieve this?

I am looking for a function similar to 

EditListItem('ItemId', 'ListId', ...)
which will open the edit div window.

What I Have Attempted

The anchor tag created by Sharepoint for the "Test Item" mentioned above appears as follows:

<a onfocus="OnLink(this)" 
   href="http://{mysharepointsite}/_layouts/listform.aspx
         ?PageType=4
         &amp;ListId={D0FDB54F-1DDF-4C5E-865B-ABDE55C1125}
         &&ID=1
         &&ContentTypeID=0x010800ED5176D13CCEFC4AA8D62A79985DE892"
   onclick="EditLink2(this,49);return false;" target="_self">Test Item</a>

After investigating the Sharepoint JS files, I discovered that EditLink2 calls _EditLink2, which in turn calls ShowPopup with the context (in this case, '49' appears). The context number seems to be dynamic.

I attempted to manipulate the context value but due to numerous variables, I am unable to get it working consistently.

javascriptsharepoint-2010

Answer №1

To create a modal dialog on a specific page, simply implement a JavaScript function that triggers the display of the modal dialog. Here is an example:

function openItemDialog( itemID ) {
    var options = {
        url: "http://{mysharepointsite}/_layouts/listform.aspx?PageType=4&ListId={D0FDB54F-1DDF-4C5E-865B-ABDE55C1125}&ID=" + itemID + "&ContentTypeID=0x010800ED5176D13CCEFC4AA8D62A79985DE892&IsDlg=1",
        width: 500,
        height: 500,
        title: "Item view/edit"
    };
    SP.UI.ModalDialog.showModalDialog( options );
}

Make sure to include the &IsDlg=1 parameter in the URL.

Then, update the href link where your items are displayed. For example:

<a href="#" onclick="openItemDialog(35)">Test item</a>

Replace 35 with the actual ID of the item you want to open in the dialog.

Answer №2

Although this question may have been asked before, there is an alternative method to accomplish the goal the OP wanted to achieve.

Within a XSLT ViewWebPart, you will find a global parameter called $ViewCounter. This parameter is essential for the _EditLink2 function.

To create a link to the display form and have it open in a dialog, enclose the item in an <a> tag like so:

<a href="{$HttpVDir}/_layouts/listform.aspx?PageType=4&amp;ListId={$List}&amp;ID={$thisNode/@ID}" onclick="EditLink2(this,{$ViewCounter});return false;">your item</a>

Take note of the variables $HttpVDir, $List, $thisNode/@ID, and $ViewCounter (avoid hard-coding any values).

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

After zooming in on the canvas and panning, I encountered a problem where I was unable to drag objects within the canvas. Instead, the canvas continued to pan as I tried to move the objects

1) I have the ability to pan the canvas and drag images without scaling or zooming. 2) When scaling or zooming, I can still drag images within the canvas. 3) However, if I try to pan the canvas after zooming and then attempt to drag images, only the canv ...

javascriptjquerycanvas3d2d

Tabulator automatically inserted 'numrow' after retrieving the data

I have a table of undetermined information (consisting of various columns and rows). I am now at the point where I need to utilize the function table.updateData(), but this function specifically requires the column id to be present in the data structure. S ...

javascripttabulator

Sequelize is unable to retrieve a table from the database

I am configuring Sequelize in order to streamline the manipulation of an MSSQL database. My attempt to define a table called 'Stock' has resulted in unexpected behavior when trying to query it. Below is the code snippet I used for defining the t ...

javascriptsql-servernode.jssequelize.js

Navigating through intricate JavaScript objects

I am working with an object that looks like this: var obj = { "00a9": ["\u00A9", ["copyright"]], "00ae": ["\u00AE", ["registered"]], "203c": ["\u203C" ...

javascriptjquery

Function triggered twice upon checkbox being selected

Below is the code snippet I am using: $("#cc1").unbind('click').click(function(e) { //somefunction }); This code works perfectly fine for executing a function after clicking the cc1 button. However, when I use the following code: $("#cc1" ...

javascriptjquerybuttoncheckbox

Changing component properties using router-view in Vue.js is the recommended approach

Looking to pass a boolean value from a view within a router-view up to the root App.vue and then on to a component in the App.vue. Successfully achieved this, but encountering an error: Received a warning about mutating a prop directly, as it will be over ...

javascriptvue.jsvuejs2vuetify.jsvue-props

Struggling to successfully submit data from an API to the project's endpoint, encountering Error 405 method rejection

I'm working on integrating data from the openweathermap API into my project's endpoint to update the User interface. Everything seems to be functioning correctly, except for when I attempt to post the data to the endpoint. What am I overlooking h ...

javascriptnode.jsexpressroutes

Despite being deployed on Vercel, the process.env variables in Nextjs are still not functioning as expected

I'm currently working on a project that involves using 4 api keys that I need to keep hidden: STORYBLOK_API_KEY= EMAILJS_SERVICE_ID= EMAILJS_USER_ID= EMAILJS_TEMPLATE_ID= All of these keys are being accessed using process.env.XXX. What's inte ...

javascriptnext.jsenvironment-variables

Transferring information between a pair of PHP functions via AJAX communications

Currently, I am tackling the challenge of user verification on our website. The process involves prompting users to input their credentials, click on the "send confirmation" button, receiving a code through SMS or messenger, entering the code in a field, a ...

javascriptphpajaxwordpress

How can HtmlUnit be used to identify and address website pages that display errors?

I've encountered an issue while trying to access this Ajax page through my Java program using the HtmlUnit 2.15 API. It seems that the problem arises from a broken link to a missing file located here. This is the snippet of code I'm working with ...

javajavascriptcssajaxhtmlunit

Arranging JSON information based on category

I am currently populating an HTML table with data retrieved from a JSON file. It currently displays all the data in the order it appears in the JSON file, but I would like to organize it into different tables based on the "group" category in the file such ...

javascriptjson

Using VueJS to fetch and display data from a JSON file using

Currently, I am dealing with a JSON value in the following format: { "T1" : "online", "T2" : "offline" } Additionally, I have an online API which only sends me the following response: { StatusCode :"T1" } My task is to extract the code from the API res ...

javascriptjsonapivue.jsvue-component

Troubleshooting jQuery compatibility issue in IE6 when using javascript and loading content through ajax

Encountering issues with IE6 and javascript applied to ajax content. Unable to use any type of javascript (plain or with jQuery) on the ajax-retrieved content. The main html page loads the Header content using ajax (specifically utilizing the jQuery ...

javascriptjqueryajaxeventsinternet-explorer-6

Can you explain the concept of a TransientTransactionError within Mongoose (or MongoDB)?

Two important files in my project are server.js and db.js. The db.js file is responsible for interacting with the database using Mongoose, while server.js calls functions from db.js: var mongoose = require('mongoose'); mongoose.connect('&ap ...

javascriptnode.jsmongodbmongoose

What is the best method for retrieving the selected itemsPerPage in Vuetify's data-table in version 2.0

Recently, I've been struggling to retrieve the selected items-per-page on a Vuetify data-table due to some recent changes. I came across this helpful example: How to set initial 'rows per page' value in Vuetify DataTable component? Here is th ...

javascriptvue.jsvuejs2vuetify.js

Using Vue component with v-model and custom input handler

I'm currently working on creating a wrapper component for an <input/> element in Vue.js. Here is the component code: <template> <div> <input v-bind="$attrs" :value="value" @input="input" /> ... </div> <te ...

javascriptvue.jseventemitter

Implementing Autocomplete feature in Reactjs with Ant Design Library

In my React application, I created an autocomplete feature with a list of options for the user to select from. Example in Action: Click here to see the demo List of available options: const options = [ { label: "hello", value: "1" ...

javascriptreactjstypescriptautocompleteantd

JavaScript alert system

Seeking advice on a situation. Here's the scenario I'm facing: In a messaging platform, I have an array of users who are currently online. When a new user joins the chat, I want to notify the first user in the array. If there's no response w ...

javascriptnode.jssockets

Identifying Hashtags with Javascript

I am trying to identify hashtags (#example) in a string using javascript and convert them to <a href='#/tags/example'>example</a> Currently, I have this code: var text = '#hello This is an #example of some text'; text.r ...

javascriptregexangularjshashtag

Tips for creating a fading effect when hovering over a div element

Hello, I am currently working on a project where I have a span that displays over an image on hover. I would like to add a bit of javascript or css transitions to make this div fade in to about 0.8 opacity when hovered over, and then fade back to 0 opacity ...

javascriptjqueryhtmlcss