-1

Javascript Code:

function createdivs() 
{
        var i = 1;
        $.ajax({ url: 'displaycontent.php',
         data: {action:'test'},
         type: 'post',
         datatype: 'json',
         success: function(output) {
            var a = JSON.parse(output);
            var b = a.length;
            var i;
            for (i = 0; i < b;i++){
            console.log(a[i]['idi']);
            console.log(a[i]['pgmname']);
            console.log(a[i]['comp']);
            console.log(a[i]['datephp']);
            if (a[i]['idi'] != 0){
            for (var j=0 ;j < 1;j++)
            {

            var editp = document.createElement("button","span");
            document.getElementById('contentdisplay'+i).appendChild(editp);
            editp.className = "glyphicon glyphicon-pencil";
            editp.id = "editprogramsbutton"+i;
            $("#editprogramsbutton"+i).click(function(){
                editp.value = i;
                alert(i);
            });

            }

            }
            }

        }

    });  

}

Suppose if the loop runs for 3 times, I can create three buttons with id's as editprogramsbutton0, editprogramsbutton1, editprogramsbutton2. The problem is when I alert using 

$("#editprogramsbutton"+i).click(function(){
                    editp.value = i;
                    alert(i);
                });

I always get the value as 3 no matter which button I press. I know that the value of 'i' is set to 3 and it'll display the last updated value whenever I press the button. I want values like "0" when I press "editprogramsbutton0", "1" when I press "editprogramsbutton1" and so on.. Can someone please explain the logic of how to do this with possible changes in the code. Thank you in advance.

Vignesh Anandakumar
  • 167
  • 1
  • 3
  • 12
  • This isn't the answer, but with the `var` initialising at the beginning, you can shorten it to: `var id, pgmname, comp, datephp, i = 1`; – Dendromaniac May 12 '15 at 17:10
  • 2
    There's alot of code here for a simple question, please in the future try to whittle the code down to the bare minimum to ask the question. – Chad Schouggins May 12 '15 at 17:14

1 Answers1

1

This is the key, you have to define the value outside of the click function, otherwise it will update the value to the last i set. Then call either e.target.value (make sure e is defined in the function call) or this.value (as inside an event handler this refers to the element that was clicked)

editp.value = i;
editp.addEventListener('click', function(e) {
    alert(e.target.value);
}, false);

In the hidden snippet below I've simplified your script and removed unnecessary lines and document calls. 

function createdivs() {
    $.ajax({
        url: 'displaycontent.php',
        data: { action: 'test' },
        type: 'post',
        datatype: 'json',
        success: function (output) {
            var a = JSON.parse(output);
            var fullDisplay = document.getElementById('fulldisplay');
            for (var i = 0; i < a.length; i++) {
                console.log(a[i]['idi']);
                console.log(a[i]['pgmname']);
                console.log(a[i]['comp']);
                console.log(a[i]['datephp']);
                if (a[i]['idi'] != 0) {
                    fullDisplay.style.visibility = "visible";
                   
                    var list = document.createElement("div");
                    list.className = "container content-rows content";
                    list.id = "contentdisplay" + i;
                   
                    var sno = document.createElement("span");
                    sno.className = "col-md-1 snocontent text_center_align";
                    sno.id = "snocontent" + i;
                    sno.innerHTML = a[i]['idi'];
                    list.appendChild(sno);
                   
                    var pgmno = document.createElement("span");
                    pgmno.className = "col-md-3 pgmnamecontent";
                    pgmno.id = "pgmnocontent" + i;
                    pgmno.innerHTML = a[i]['pgmname'];
                    list.appendChild(pgmno);
                   
                    var cmpno = document.createElement("span");
                    cmpno.className = "col-md-3 cmpcontent";
                    cmpno.id = "cmpnocontent" + i;
                    cmpno.innerHTML = a[i]['comp'];
                    list.appendChild(cmpno);
                   
                    var dateno = document.createElement("span");
                    dateno.className = "col-md-2 datecontent";
                    dateno.id = "datenocontent" + i;
                    dateno.innerHTML = a[i]['datephp'];
                    list.appendChild(dateno);
                   
                    var addtra = document.createElement("button", "span");
                    addtra.className = "glyphicon glyphicon-king";
                    addtra.id = "addtrainersbutton" + i;
                    list.appendChild(addtra);
                   
                    var editp = document.createElement("button", "span");
                    editp.className = "glyphicon glyphicon-pencil";
                    editp.id = "editprogramsbutton" + i;
                    editp.value = i;
                    editp.addEventListener('click', function(e) {
                        alert(e.target.value);
                    }, false);
                    list.appendChild(editp);
                   
                    var assigntra = document.createElement("button", "span");
                    assigntra.className = "glyphicon glyphicon-user";
                    assigntra.id = "assigntrainersbutton" + i;
                    list.appendChild(assigntra);
                   
                    var deletep = document.createElement("button", "span");
                    deletep.className = "glyphicon glyphicon-pencil";
                    deletep.id = "deleteprogrambutton" + i;
                    list.appendChild(deletep);
                   
                    fullDisplay.appendChild(list);
                }
            }
        }
    });
}