I am pretty new at this stuff, so bear with me.

I am using ASP.NET MVC.

I have created an overlay to cover the page when someone clicks a button corresponding to a certain database entry. Because of this, ALL of my code for this functionality is in a .js file contained within my project.

What I need to do is pull the info corresponding to my entry from the database itself using an AJAX call, and place that into my textboxes. Then, after the end-user has made the desired changes, I need to update that entry's values to match the input. I've been surfing the web for a while, and have failed to find an example that fits my needs effectively.

Here is my code in my javascript file thus far:

function editOverlay(picId) {
      //pull up an overlay
      $('body').append('<div class="overlay" />');
      var $overlayClass = $('.overlay');

      $overlayClass.append('<div class="dataModal" />');
      var $data = $('.dataModal');

      overlaySetup($overlayClass, $data);


      //set up form
      $data.append('<h1>Edit Picture</h1><br /><br />');

      $data.append('Picture name: &nbsp;');
      $data.append('<input class="picName" /> <br /><br /><br />');

      $data.append('Relative url: &nbsp;');
      $data.append('<input class="picRelURL" /> <br /><br /><br />');

      $data.append('Description: &nbsp;');
      $data.append('<textarea class="picDescription" /> <br /><br /><br />');

      var $nameBox = $('.picName');
      var $urlBox = $('.picRelURL');
      var $descBox = $('.picDescription');

      var pic = null; 

//this is where I need to pull the actual object from the db
      //var imgList = 
      for (var temp in imgList)  {
          if (temp.Id == picId) {
              pic= temp;
              }
          }

  /*
      $nameBox.attr('value', pic.Name);
      $urlBox.attr('value', pic.RelativeURL);
      $descBox.attr('value', pic.Description);
  */

      //close buttons
      $data.append('<input type="button" value="Save Changes" class="saveButton" />');
      $data.append('<input type="button" value="Cancel" class="cancelButton" />');


      $('.saveButton').click(function() {
          /*
          pic.Name = $nameBox.attr('value');  
          pic.RelativeURL = $urlBox.attr('value');
          pic.Description = $descBox.attr('value');
          */

          //make a call to my Save() method in my repository

          CloseOverlay();
      });

      $('.cancelButton').click(function() {
          CloseOverlay();
      });
  }

The stuff I have commented out is what I need to accomplish and/or is not available until prior issues are resolved.

Any and all advice is appreciated! Remember, I am VERY new to this stuff (two weeks, to be exact) and will probably need highly explicit instructions.

BTW: overlaySetup() and CloseOverlay() are functions I have living someplace else.

Thanks!