1

I have a table that's pulling data from a json file. I'm trying to create a feature where when you double click on any row, a window will pop up and that window will contain some information for the row that was clicked on. Here is some of my code:

 for (var i = 0; i < data.length; i++) {

        rowData = data[i];


        rowsHtml +=

            "<tr class='mainTableRow'><td>" + rowData.ID
            + "</td><td>" + rowData.FirstName
            + "</td><td>" + rowData.LastName
            + "</td><td>" + rowData.DOB
            + "</td><td>" + rowData.Gender
            + "</td></tr>";


     var tbody = document.getElementById("data");
     tbody.innerHTML+= rowsHtml;


   //This gets the values for the pop up window
    var tablerows = document.getElementsByClassName("mainTableRow");
    for(var j=0; j<tablerows.length; j++){
     tablerows[j].addEventListener("dblclick",function(){

      //This is a function that creates a popup window
     //openWindow just contains a window.open function with the name of 
    //my file and a few other parameters such as height/width of the window
      openWindow("myhtmlfile.html");

      //gets textboxes from another HTML file
      var idvalue = document.getElementById("idtextbox");
      var dobvalue = document.getElementById("dobtextbox");

     //Adds values inside textbox. Should be same values for the clicked              //row.
      idvalue.value = rowData.ID;
      dobvalue.value = rowData.DOB;

})
}

}

I have 2 separate HTML files for this. One has the table defined in it. The other HTML file is for the popup window and has a few textboxes defined in it. (The values will be written inside a textbox). The problem is, the popup window opens when I double click on the row, but the values are blank. The textboxes should have the same values for the row I clicked on. I get an error saying: idvalue is blank. If I move my textboxes to the same HTML file that has the table in it, it won't give me that error, but it won't give me the information for the row I clicked on either, only the information for the last row. The JavaScript file is included in both the HTML files but that doesn't fix the issue.

How can I fix this problem, without using jQuery or any other JS library? Any help would be appreciated.

developer-x
  • 83
  • 1
  • 2
  • 9

2 Answers2

0

I'm not exactly sure what you are trying to do here, but

var idvalue = document.getElementById("idtextbox");

Will not get a value from the new window because "document" references the current page. Here is some information about how to pass data between a web page and a window opened from that page:

Can I pass a JavaScript variable to another browser window?

Community
  • 1
  • 1
scrayne
  • 701
  • 7
  • 18
0

Your problem lies with the following:

var idvalue = document.getElementById("idtextbox");
var dobvalue = document.getElementById("dobtextbox");

You are getting the elements with ID "idtextbox" and "dobtextbox" from the window you are currently working with, not the window you are opening.

An easier way if you just want to see the info in a popup is to do:

alert("ID:" + String(rowData.ID) + " DOB:" + String(rowData.DOB));

This opens a popup dialog with your desired text.

If you absolutely need to open a new window for this, please look into HTML POST: Window.open and pass parameters by post method

Or what scrayne mentioned.

Community
  • 1
  • 1
Mocking
  • 1,764
  • 2
  • 20
  • 36