chrome.storage.sync.get to dynamically add rows in an HTML file.

Nadine Sahanee Ora

unread,

Dec 21, 2014, 1:34:04 AM12/21/14

to chromi...@chromium.org

How do we get data saved from chrome.storage.sync in an html file to be used by another html file and dynamically add rows?

I have this code for the set in which when user types in a value and submits it would open another window which will show the table with a number of rows based on user input.

document.getElementById("btn1").addEventListener("click", function() {
  var d = document.getElementById("value-in").value;
  chrome.storage.sync.set({"data": d}, function(){
    console.log("Value set: " +data);
  });
  //window.close();
  
  chrome.app.window.create('sheet.html', {
    'innerBounds': {
      'width': 1000,
      'height': 1000
    },
    'resizable': false,
  });
});

And I have the get, but it doesn't really work.

function(){
function addMoreRows(newValue){
    var rowsAdded = document.getElementById('newValue').value;

        for(var x=0; x<rowsAdded; x++) {
          var newRow = document.getElementById('tbl_id').insertRow();

          var newCell = newRow.insertCell();
          newCell.innerHTML="<tr><td><input type='text' name='user_name'></td></tr>";

          newCell = newRow.insertCell();
          newCell.innerHTML="<tr><td><input type='text' name='score'></td></tr>";

          newCell = newRow.insertCell();
          newCell.innerHTML="<tr><td><input type='text' name='points'></td></tr>";

          newCell = newRow.insertCell();
          newCell.innerHTML="<tr><td><input type='text' name='total'></td></tr>";

        }
}

chrome.storage.onChanged.addListener(function(changes, namespace){
  if(changes.data){
    addMoreRows(changes.data.newValue);
  }
});

chrome.storage.sync.get("data", function(result){
  addMoreRows(result.data);
});

}();

Any help would be greatly appreciated.

PhistucK

unread,

Dec 21, 2014, 1:42:49 AM12/21/14

to Nadine Sahanee Ora, Chromium Apps

What does not work?

Do you see any console errors?

Also, it does not look like you are using the newValue parameter in the addMoreRows function, perhaps that it the issue?

There is document.getElementById('newValue').value, but newValue is nested within quotes, so it is a string literal and not a variable.

☆PhistucK

--
You received this message because you are subscribed to the Google Groups "Chromium Apps" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-app...@chromium.org.
To post to this group, send email to chromi...@chromium.org.
Visit this group at http://groups.google.com/a/chromium.org/group/chromium-apps/.
For more options, visit https://groups.google.com/a/chromium.org/d/optout.

Nadine Sahanee Ora

unread,

Dec 21, 2014, 1:49:43 AM12/21/14

to chromi...@chromium.org, nsah...@gmail.com

Thank you for that! It works when I have a button to generate the dynamic adding of rows. But how are we supposed to do it when we only use the button from the index to dynamically add rows?

PhistucK

unread,

Dec 21, 2014, 1:54:07 AM12/21/14

to Nadine Sahanee Ora, Chromium Apps

I am not following, really. You do not seem to be using the value anyway in the function...

☆PhistucK

Nadine Sahanee Ora

unread,

Dec 21, 2014, 1:56:43 AM12/21/14

to chromi...@chromium.org, nsah...@gmail.com

Thank you! I already figured it out.. It's working already. :)

On Sunday, December 21, 2014 10:42:49 AM UTC+4, PhistucK wrote:

Reply all

Reply to author

Forward