JavaScript Pop Up window blank

Question

У меня есть таблица, которая извлекает данные из json-файла. Я пытаюсь создать функцию, когда при двойном щелчке по любой строке появится окно, и это окно будет содержать некоторую информацию для строки, на которую была нажата кнопка. Вот некоторые из моего кода:

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; 

}) 
} 

} 

У меня есть два отдельных файла HTML для этого. В нем определена таблица. Другой файл HTML предназначен для всплывающего окна и имеет несколько текстовых полей, определенных в нем. (Значения будут записаны внутри текстового поля). Проблема в том, что всплывающее окно открывается, когда я дважды нажимаю на строку, но значения пустые. Текстовые поля должны иметь одинаковые значения для строки, на которую я нажал. Я получаю сообщение об ошибке: idvalue пусто. Если я переместил свои текстовые поля в тот же HTML-файл, в котором есть таблица, он не даст мне эту ошибку, но он не даст мне информацию для строки, на которую я нажал, только информация для последней строки , Файл JavaScript включен в оба файла HTML, но это не устраняет проблему.

Как исправить эту проблему, не используя jQuery или любую другую библиотеку JS? Любая помощь будет оценена по достоинству.

Answer 1

Ваша проблема заключается в следующем:

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

Вы получаете элементы с Идентификатор «idtextbox» и «dobtextbox» из окна, в котором вы работаете, а не окна, которое вы открываете.

Простой способ, если вы просто хотите, чтобы увидеть данные в всплывающем окне, чтобы сделать:

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

Это открывает всплывающее диалоговое окно с нужным текстом.

Если вы абсолютно необходимо, чтобы открыть новое окно для этого, пожалуйста, смотрите в HTML POST: Window.open and pass parameters by post method

Или что scrayne упоминается.

Answer 2

Я не совсем уверен, что вы пытаетесь сделать здесь, но

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

не будет получать значение из нового окна, потому что «документ» ссылается на текущую страницу. Вот некоторая информация о том, как передавать данные между веб-страницы и окна, открытый с этой страницы:

Can I pass a JavaScript variable to another browser window?