title: Form json from javascript and dynamically update the content
body: <p>I want to get the coordinates (associated with an id) from a page and store them  in a json file. User should be able to add or delete more ids.</p>
  
  <p>Basically, If I right click on the page, an input field pops up - whatever I type onto the field (which is an ID) along with the x and y coordinates should be saved in a json file. </p>
  
  <p>File should be in this format:</p>
  
  <p>{"sensor1":{"x":121,"y":23}, "sensor2":{"x":232,"y":131} . . .}</p>
  
  <p>I use context menu for right click functions and able to get the x and y coordinates (pos.x and pos.y in the code below). I need to now save these dynamically in a json file ( user should be able to  add / delete ids)</p>
  
  <p>How can I create a json file from javascript and add or delete contents dynamically? Help ?</p>
  
  <p>Code thus far (to get the x and y coordinates when right clicked on the page):</p>
  
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
  &lt;title&gt;Test&lt;/title&gt;
  &lt;meta http-equiv="Content-Type" content="text/html;charset=utf-8" /&gt;
  &lt;script src="js/jquery-1.4.2.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="js/jquery.contextMenu.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;link href="css/jquery.contextMenu.css" rel="stylesheet" type="text/css"    /&gt;
  
  &lt;script type="text/javascript"&gt;
  
      $(document).ready( function() {
  
          // Show menu when #myDiv is clicked
          $("#myDiv").contextMenu({
              menu: 'myMenu'
          },
              function(action, el, pos) {
  
              var name=prompt("Sensor Id ","Enter Id here");
  
              if (name!=null){
  
  
              alert(
                  'Sensor: ' + name + 'Action: ' + action + '\n\n' +
                  'Element ID: ' + $(el).attr('id') + '\n\n' + 
                  'X: ' + pos.x + '  Y: ' + pos.y + ' (relative to element)\n\n' + 
                  'X: ' + pos.docX + '  Y: ' + pos.docY+ ' (relative to document)'
                  );
  
  
              }   
  
          });
  
      });
  
  &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div id="myDiv"&gt;
      Right click to add
       &lt;div id='cid' class='container' style="height: 100%"&gt;
      &lt;img src="./3.jpg"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;ul id="myMenu" class="contextMenu"&gt;
      &lt;li class="edit"&gt;&lt;a href="#edit"&gt;Place&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>
  </p>