AJAX - button click

JavaScript
1

Hello everybody,

I have this small ajax script that pulls in information from the database and displays on a page:

>   success: function(response){ 
>                     if($.trim(response) != 'noRecord' || response == $.trim('Failed')){
>                          var dateClosed; 
>                          var table = '<table><tr><th>item</th><th>Version</th><th>Date</th><th>Status</th><th></th></tr>';
>                          $.each(JSON.parse(response), function(key, value){
>                               if(value.ver_closedDate != '0000-00-00 00:00:00') {                           
>                                    dateClosed ='closed'; } // project closed
>                               else { dateClosed ='Open'; } //if project still open
>                               table += ('<tr>');
>                               table += ('<td>' + value.ver_projectID + '</td>');
>                               table += ('<td>' + value.ver_version   + '</td>');
>                               table += ('<td>' + value.ver_startDate + '</td>');
>                               table += ('<td>' + dateClosed          + '</td>');
>                               table += ('<td> <button id="popup111" value="'+ value.ver_projectID + '" >Close</button></td>');
>                               table += ('</tr>');
>                          });

$(‘#ListRecord’).html(table); // displays the above content

after the record is displayed how can I access the value of the button when the user click the button?

tried the following with no success:

     $("#popup111").click(function(){ 
         // event.preventDefault(); 
          var butValue = $('#popup111').val();
          alert("Button value"+ butValue);
     });

any ideas?

2

  1. Tag table not closed.

  2. You have a lot of buttons with same id.

And why you use no document.createElement(‘table’) and table.insertRow / row.insertCell? This HTML as string is not really good.

2 Likes
3

Hi igor_g,

thanks for the reply back. the table is closed it just didnt get captured in my copy past, sorry about that.

regarding the buttons with same ids, how would you resolve this, the list is somewhat fluid it could get bigger or smaller so naming each button would be a little challenging, how would you handle this?

4

Button id should be dependent of response contents. Have you some unique attribute in any row of your response?

And actually you need no id in this situation. Use e.g. class and find buttons by $(‘.class’).

5

Where did you place that code? Adding event listeners has no effect until the buttons actually exist (and you’d get a type error otherwise were you not using jQuery). So you’ll either have to use event delegation here, or add the event listener in the success callback where the button is getting created; this way you don’t need an identifier at all but can add the listener directly:

var $row = $('<tr>...<td /></tr>')

var $button = $('<button />').text('Close').click(function () {
  alert(value.ver_projectID)
})

$row.find('td:last-child').append($button)
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.