Guide to retrieving a specific cell value from a gridview and showcasing it in a textbox with jquery on an asp.net platform

Below is the code for my grid view. It consists of a column labeled "Syllabus" and the next column contains edit and delete buttons. When the Edit button is clicked, a popup appears using jQuery. The popup includes a textbox for the Syllabus. How can I retrieve the value of the syllabus from the gridview column and display it in the popup for editing?

 <asp:GridView ID="gdvwSyllabus" CssClass="enquiryTable" runat="server" AutoGenerateColumns="false" Width="100%">
            <Columns>
                <asp:BoundField HeaderText ="Syllabus" DataField ="Syllabus" />
                <asp:TemplateField HeaderText="Options">
                    <ItemTemplate>
                        <ul class="enquiryList1">
                           <li><a href="#"><asp:Image ImageUrl="~/Images/edit2.png" runat="server" ID="btnSyllabusEdit" CssClass="btnEdit" /></a></li>
                           <li><a><asp:Image ImageUrl="~/Images/delete2.png" runat="server" ID="btnDelete" /></a></li>
                        </ul>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

This is the table structure I have designed for the popup that appears when the edit button is clicked. I am trying to display the "Syllabus" value in the "txtsyllabus" textbox for editing.

 <table style="border: 0px; margin-left: 15px;" border="0" align="left">
                <tr>
                    <td align="right">Syllabus <span class="ErrorField">*</span>:</td>
                    <td>
                        <asp:TextBox ID="txtsyllabus" CssClass="txtbox txtSyllabus" runat="server"></asp:TextBox>

                    </td>
                </tr>
                 <tr>
                      <td>&nbsp;</td>
                      <td align="left">
                         <a href="#"><asp:Button ID="btnSubmit" Text="Save" CssClass="btnStyle btnSyllabusSubmit" runat="server" /></a>
                      </td>
                 </tr>
            </table>

Thank you for your help.

javascriptasp.netjquery-uic#-4.0

Answer №1

To accomplish this task, you can trigger a JavaScript function on client click of a button. Here is an example implementation:

function displayPopup(content) {
    document.getElementById('texbox').value = content;
    document.getElementById('divpopup').style.display = 'block';
}

Make sure to include a 'return false;' statement within the function.

For handling the gridview item databound event, use the following code snippet:

btn = e.item.findcontrol("editbouttn");
btn.attributes.add("onclick", "return displayPopup(" + e.item.dataitem("details") + ");");

If you encounter any issues with this setup, please inform me.

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

The tooltip feature in jQuery is experiencing some stuttering issues

Sometimes, images can convey messages better than words. I encountered a strange issue with my self-made jQuery tooltip. I prefer not to use any libraries because my needs are simple and I don't want unnecessary bloat. When I move my mouse from righ ...

javascriptjquery

Ways to refresh my $scope once new data is inserted into the SQL database

As I implement the angularjs/SQL technique to fetch data from a database, the code snippet below demonstrates how it is done: $http.get("retrieveData.php").then(function(response){ $scope.tasks = response.data.tasks; }) In addition, there is a functi ...

javascriptangularjs

Sending information from a directive to a controller

I'm working on passing a resource from a directive scope to a controller scope by utilizing a callback provided in the view. However, I'm encountering an issue where the argument variable is showing as undefined. Can you help me figure out what I ...

javascriptangularjs

Modify the directive when the scope variable undergoes changes

Utilizing an http request, I am retrieving data from a json file that I then utilize in my controller. app.controller('mainCtrl', ['$scope', 'loaderService', function ($scope, loaderService) { //Getting data from the s ...

javascriptangularjs

Ways to prevent styles from being overridden by those specified in JavaScript

Some elements on my page have their style dynamically changed by JavaScript. However, I want one of them to maintain its static style without being overridden. Is there a way to specify that the style of this particular element should not be altered? Than ...

javascripthtmlcss

How can you create a jQuery fade in effect for a single <li> element

I'm in the process of developing a task management app that generates a new li element every time a user adds an item. However, I am facing an issue where fadeIn() is activating for every li on the page whenever a new item is added. Does anyone have s ...

javascriptjqueryhtmlcss

Encountered CSRF validation error while working with a Python Django backend in conjunction with React frontend using Axios for making POST requests

I recently completed a tutorial at and now I'm attempting to add a POST functionality to it. Despite obtaining the csrf from cookies and including it in the "csrfmiddlewaretoken" variable alongside a test message in json format for the axios function ...

javascriptpythondjangoreactjsaxios

Guide on incorporating mouse movement while the mouse button is held down in JavaScript

For my project, I want to activate the mouse move event only when the mouse button is held down. I specifically need the action "OK Moved" to be triggered only when both the mouse button is held down and there is mouse movement. This is the code that I h ...

javascriptjquerymouseeventmousemovemousedown

What are the methods to ascertain whether an HTML element possesses a pseudo element?

Is there a method to identify whether an HTML element has a pseudo element (::before / ::after) applied to it without invoking the function: window.getComputedStyle(element, ":before/:after"); MODIFIED: the response is NEGATIVE The issue with getCompute ...

javascripthtmlcsspseudo-element

What is the best way to display a modal box using NodeJs on the server side?

I recently created a contact page on my website where users can fill out a form. Upon submitting the form, I capture the information using a post method in my server.js file. If everything is correct, I want to display a modal box on the contact page to co ...

javascriptnode.jsexpress

Cordova Geolocation now displaying incorrect latitude and longitude values as NAN

Recently starting out with javascript and Cordova, I decided to develop a basic GPS app in Visual Studio 2015. The goal was simple: get my current position by clicking on the "CURRENT POSITION" button. Testing it in Firefox yielded positive results. Howev ...

javascripthtmlwindowscordovageolocation

Using jQuery to manage multiple page requests on a single page

In my current project using Codeigniter, I encountered a challenge of loading multiple paginations on one page. After exploring various forums and websites, I decided to implement multiple methods and views to achieve this using jQuery. The code snippet I ...

phpjavascriptjquerycodeigniter

How to change the state using an object as an argument in the useState hook within a function

This code uses a function component: export default function Account() { We define a constant with inputs as objects: const [state, setState] = useState({ profile: true, orders: false, returns: false, coupon: false, referrals: false, rewards: ...

javascriptreactjsreact-hooksnext.jsjsx

What is the best way to manage a 301 redirect from a current page to a new page within my index.js script?

Hello everyone, hope you're having a great Friday! I'm looking for advice on the best approach to handle a 301 redirect in node.js from an existing file to another file. Let's say I currently have a file called /contact router.get('/con ...

javascriptnode.jsexpresshttp-redirecthttp-status-code-301

Replace a string in an array using JavaScript

I may be overlooking something very obvious, but here is my dilemma. I am trying to convert [ 'hr' ] into [ '* * *' ]. This is what I tried: var hr = jsonml[i] console.log(hr) // outputs: [ 'hr' ] hr.replace(/hr/g, '* * ...

javascriptarrays

Is it possible to launch a Nextjs app on Vercel for production purposes? How well does it handle high volumes of traffic?

As a newcomer to Nextjs, I am looking to deploy my app to production. I'm curious about whether Vercel can effectively handle heavy traffic on the site. Should I consider utilizing platforms such as AWS or GCP for deployment instead? Any advice would ...

javascriptnode.jsreactjsnext.js

Adjusting Flexslider to perfectly accommodate the height and width of the window dimensions

Currently, I am using Flexslider version 1.8 and seeking to set up a fullscreen image slider on my homepage. My goal is to adjust the slider to match the browser window size. While experimenting with width:100% and height:auto properties, I have managed t ...

javascripthtmlcssflexslider

Collapse the Bootstrap Menu upon selecting a Link

I am working on a side menu with an offcanvas display feature. The current functionality is such that when the button is clicked, the canvas pushes left and opens the menu. However, I want the menu to collapse and close automatically when a link is selecte ...

javascriptjqueryhtmlcsstwitter-bootstrap

When invoking a service repeatedly in Angular within a loop, the result is returned on the second iteration rather than the first

I've run into an issue where I'm attempting to invoke a service in Angular within a for loop and store the result in a Map. map = new Map<string, string[]>(); this.effectivitiesList = this.trimEffectivities.split(","); for (let ...

javascriptangulartypescript

App.post is returning a set of empty curly braces as the response

I am currently working on an express.js application that retrieves data from a MySQL database and displays it on the screen. I am also trying to implement an insert functionality so that I can add data to the database via the browser. However, when I post ...

javascripthtmlmysqlnode.js