Using AJAX or PHP to write data to a specific location in a textfile

Question

I'm creating a website now that utilizes pretty complex table structures, and textfiles as databases. Right now I have a page that will contain all the data available to the user, which looks like this -->

all_data

<html>
    <head>
        <!-- custom css -->
        <link rel="stylesheet" type="text/css" href="tables.css">
        <!-- bootstrap CDN -->
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
            <!-- where all the data is stored -->
            <script type="text/javascript" src="data.js"></script>
            <!-- where the functions that fill the table are stored -->
            <script type="text/javascript" src="index.js"></script>

    </head>
    <body>
        <ul id="nav_bar">
            <li><a href="prepared_data.html">PREPARED</a></li>
            <li><a href="known_data.html">KNOWN</a></li>
            <li><a href="all_data.html">ALL</a></li>
            <li><a href="guide.html">GUIDE</a></li>
        </ul>
        <div id="scroll_box">
            <table id="container">

                <!-- this will access index.js and utilize the functions in there -->
                <script type="text/javascript">
                    document.getElementById("container").innerHTML = getDataSections(all_data);
                </script>
            </table>
        </div>
    </body>
</html>

This is connected to two JS files, one that contains all the data in a format like this -->

var all_data = [
  {
    name: "data0",
    items : [
      {
        name: "bernard",
        job: "accountant",
        description: "a nice family man"
      },
      {
        name: "susan",
        job: "developer",
        description: "a genius"
      }
    ]
  },
  {
    name: "data1",
    items : [
      {
        name: "David",
        job: "Boss",
        description: "loves corn on the cob"
      },
      {
        name: "Erica",
        job: "CEO",
        description: "classified"
      }
    ]
  }
]

and one that takes this data and creates the HTML accordingly that looks like this -->

function getDataSections(data) {
  // loop through data
  var HTML = ""

  for (var i = 0, i_end = data.length; i < i_end; i++) {
    var category = data[i]

    // only make a section if there are any data there
    if (category.items.length > 0) {

      // adds the section title
      HTML += '<thead class="sticky" align="center"><tr><th>' + category.name + '</th></tr></thead>'
      // add category label
      HTML += "<tbody><tr><td><table class='data_container'>"

      // loop through category items and build HTML
      // go to getDataInfo, run that, then proceed
      for (var j = 0, j_end = category.items.length; j < j_end; j++) {
        HTML += getDataInfo(category.items[j])
      }

      // close category table
      HTML += "</table></td></tr></tbody>"
    }
  }

  return HTML
}



function getDataInfo(item) {
  // opening row tag
  var HTML = "<tr>"

  // add item information
  HTML += "<td><table class='table-bordered Data_shorthand'>"
  HTML += "<tr><td>Name</td><td>" + item.name + "</td></tr>"
  HTML += "<tr><td>Job</td><td>" + item.job + "</td></tr>"
  HTML += "</table></td>"

  // add description
  HTML += "<td class='description'>" + item.description + "</td>"
  HTML += "<td><div class='btn-group'><button class='add'>Add</button></div></td>"
  // closing row tag
  HTML += "</tr>"

  return HTML
}

with that all being said. I would like to add an EventActionListener to each of these "add" buttons, such that when they are clicked, they take the information specific to their row, and add it to a file that is similar to the one shown up above, but that is specified for people you want to add to a list. This way, I can use the same kind of method, and load that page accordingly.

I'm thinking that I could use the j counter variable to add a unique ID to each button that references the J index of the file and then write that cluster of data to another file's data0 or data1 section. Is there a way for me to do this using AJAX? or maybe some PHP? Any advice would be appreciated, thank you.

Answer 1

Why creating the html pages in advance? You can create one page of each kind and use the data given dynamically. That way, you don't need to search for some page or data in a file, and only communicate with the database to get the data for each action.

Using AJAX or PHP to write data to a specific location in a textfile

Question

1 answers

solution1
0 2017-06-17 14:01:26

Using AJAX or PHP to write data to a specific location in a textfile

Question

1 answers

solution1 0 2017-06-17 14:01:26

solution1
0 2017-06-17 14:01:26