how to get the clicked button event id

Question

Hi i need to get the event id in this table which when the btnStopEvent is clicked its gets the current time and displays it into the same table,i the Endtime Column e.g i have 5 events id 1,2,3,4,5 when the user click the button in column 2 it should display the current time in EndTime Column, Here is what i have for now

function GetStartUserData() {
        var IPAddress = $('#IPAddress').text();
        (IPAddress == '' ? null : 'ipaddress=' + IPAddress)
        var EventId = '';
        var Category = $('#categories').val();
        var ExtraData = $('#txtcomment').val();

        return {
          MachineName: IPAddress
        , EventId: EventId
        , CategoryName: Category
        , Comments: ExtraData

        }
}


function DisplayStartData(downTimeStart) {
     console.log(downTimeStart);
     var newContent = '';

        $.each(downTimeStart.data, function (i, item) {
            newContent += Hesto.Html.StartTR(item.downTimeStart);
            newContent += Hesto.Html.CreateTD('<input type="button" value="Stop" id="btnStopEvent">');
            newContent += Hesto.Html.CreateTD(item.EventId);
            newContent += Hesto.Html.CreateTD(item.CategoryName);
            newContent += Hesto.Html.CreateTD(item.StartTime);
            newContent += Hesto.Html.CreateTD(item.EndTime);
            newContent += Hesto.Html.CreateTD(item.Comments);
            newContent  = Hesto.Html.EndTR(newContent);
        });
        $('#DowntimeList').append(newContent);     
 }

HTML:

<div id="panel"><table id="Downtimetable" class="hesto">
            <thead>
                 <tr>
                     <th>END OF DOWNTIME</th> 
                     <th>Event ID</th>                  
                     <th>CATEGORY NAME</th>             
                     <th>START TIME</th>
                     <th>END TIME</th>
                     <th>COMMENTS</th>
                 </tr>
             </thead>
             <tbody id="DowntimeList">

             </tbody>
             <tfoot>
             </tfoot>
        </table></div>
  <div class="label" id="IPAddress"><%Response.Write(Request.QueryString["ipaddress"]); %></div>

json page

using System;
using System.Collections.Generic;
using System.Linq;
using System.Configuration;
using System.Web.Script.Serialization;
using Hesto.SQL;
using Hesto;


public partial class services_json_DownTimeStartByMachineName : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        System.Collections.Specialized.NameValueCollection nvc = new System.Collections.Specialized.NameValueCollection();
        nvc.AddFromQueryString(Request.QueryString);
        nvc.AddFromQueryString("MachineName", Request.UserHostAddress, Request.QueryString);
        nvc.AddFromQueryString("EventId", "NULL", Request.QueryString);
        nvc.AddFromQueryString("CategoryName","NULL",Request.QueryString);
        nvc.AddFromQueryString("StartTime",DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"),Request.QueryString);
        nvc.AddFromQueryString("Comments", "NULL", Request.QueryString);

        StoredProcedureCaller spc = new StoredProcedureCaller();
        spc.Execute(Request.QueryString, Resources.StoredProcedureDefinitions.DownTimeStartTimeByMachineName, Resources.ConnectionStrings.HESTOTESTING);

        Response.Write(spc.ToString("json"));
    }
}

json page

using System;
using System.Collections.Generic;
using System.Linq;
using System.Configuration;
using System.Web.Script.Serialization;
using Hesto.SQL;
using Hesto;

public partial class services_json_DownTimeStop : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        System.Collections.Specialized.NameValueCollection nvc = new System.Collections.Specialized.NameValueCollection();
        nvc.AddFromQueryString(Request.QueryString);
        nvc.AddFromQueryString("EventId","", Request.QueryString);
        nvc.AddFromQueryString("EndTime", DateTime.Now.ToString(), Request.QueryString);

        StoredProcedureCaller spc = new StoredProcedureCaller();
        spc.Execute(nvc, Resources.StoredProcedureDefinitions.DownTimeStopEvent, Resources.ConnectionStrings.HESTOTESTING);
        Response.Write(spc.ToString("json"));
    }
}

when the btnstopevent button is clicked i want it to display the current time in the newcontent += Hesto.Html.CreateTD(item.EndTime); column only. — billah77, May 06 '14 at 12:17
It's very difficult for me to understand what you're trying to do here. It might help if you post a working example on http://jsfiddle.net. — Femi, May 06 '14 at 12:28
Provide html code with this otherwise it is very difficult to understand. — Gara, May 06 '14 at 12:29

score 1 · Accepted Answer · edited May 23 '17 at 10:26

1

You can use onclick method:

<button onclick="myFunction(eventID)">Click me</button>

then you can pass your "event id" to JS part:

function myFunction(eventID){
alert("Your Event ID : " + eventID);
}

or you can use jquery:

$("button").click(function() {
    alert(this.id); // or alert($(this).attr('id'));
});

Getting ID of clicked element

edited May 23 '17 at 10:26

Community

1
1

answered May 06 '14 at 12:43

Anahit Serobyan

432
1
6
17

when i click the button is says undefined reason being is the button has the same id $('#btnStopEvent')how to i assign each button on different rows i.e[tr]with different event id's? – billah77 May 06 '14 at 13:04
you can not use same id for more than one button, I am not sure how to make it using only js, but possibly you should keep a variable, add this variable as text part to you id name, and increment this variable for each row - [tr], thus to have unique id's. – Anahit Serobyan May 06 '14 at 18:38
You can try this: [Unique identifier for HTML elements] (http://stackoverflow.com/a/3298600/2653036) – Anahit Serobyan May 07 '14 at 07:50
can you please give me an example of row[tr] – billah77 May 08 '14 at 09:08
You can try this: [How to add unique ID to dynamically generated inputs](http://stackoverflow.com/a/3782835/2653036) – Anahit Serobyan May 12 '14 at 07:56
Use this: '

' – Anahit Serobyan May 12 '14 at 14:14
Notes: I have used JS ' $(document).ready(function(){...code..});' function, which captures your whole document at the very moment it is opened. Then, I used '$('#tbl > tbody > tr')' table id '#tbl' to get its 'tr' element, and after getting that element I iterate over each 'tr' of the table, and set unique 'ids' for each of them. – Anahit Serobyan May 12 '14 at 14:42

how to get the clicked button event id

1 Answers1