Use Firebase API to handle PUT (PATCH) requests via x-editable inline editing

Question

I am currently using the following library to make inline edits to elements on my page (to cells in my table): https://vitalets.github.io/x-editable/

As can be seen from step 3 in their docs, when a user makes a change, I can update my database immediately.

I'm using Firebase for my database. The original data is sent to Firebase using the push() method -- thus each unique ID a random string of numbers/letters based on a timestamp.

PROBLEM: x-editable requires me to provide a URL to send my edits to but Firebase requires me to use their update() method to make changes to data in the database. Thus, I need to figure out a way to send updates to Firebase using only a URL.

My code below:

// Each cell in my table has an ID; the code immediately below creates the unique ID for each date cell.

    var cell01id = snapshot.val().date + '-' + snapshot.val().initials + '-' + snapshot.val().age + '-date';
    // cell01id === 08/11/2015-BH-20-date

// after creating the ID, I then use innerHTML to display the data retrieved from firebase.  The syntax is taken from x-editable.
// notice [what goes here?] -- this is where I need to pass in a URL so x-editable can make edits.

    cell01.innerHTML = '<a href="#" id="' + cell01id + '" data-type="date" data-pk="1" data-url="' + [what goes here?] + '" data-title="Enter date">' + snapshot.val().date + '</a>';
    // cell01 === <a href="#08/11/2015-BH-20-date" data-type="date" data-pk="1" data-url="???????" data-title="Enter date">08/11/2015</a>

Answer 1

After attending HackReactor and learning tons more about JS and RESTful APIs, I was able to figure out my problem.

Here is what I was missing.... for starters, I refactored my code so that the logic takes place in the makeEditable function.... I removed the logic from the href.

The url needs to match the data object I needed to update + append '.json' at the end of the URL. Second, I have to make sure my type matches the field (example below is date). Third, contentType in my Ajax callback needs to be 'application/json' and dataType needs to be 'json'.

var makeEditable = function() {
  $('#' + cell01id).editable({
      url: 'https://fb-uniqueURL.firebaseio.com/entries/' + uniqueID + '.json',
      type: 'date',
      pk: uniqueID,
      title: 'Update Info:',
      ajaxOptions: {
        contentType: 'application/json',
        type: 'patch',
        dataType: 'json'
      },
      params: function(params) { 
        var obj = { "date": params.value };
        return JSON.stringify(obj)
      },
      success: function(response, newValue) {
        if (response.status == 'error') {
          return response.msg; //msg will be shown in editable form
        }
      }
  });