Adding Primary and Dependent Lookup Fields using JSOM

There is a lot of information out there on how to add Lookup fields using JSOM or JavaScript Client Object Model but there is no info on how to add dependent lookup fields.

The MSDN documentation is sketchy at best and does not even document the necessary parameters.

After some fiddling  around with a useless server response and many combination of calls and thanks to Fiddler help I got the secondary lookup fields working.

So to keep this short the code samples are as follow:

1. Adding primary Lookup field:

/// Parameters:
/// clientContext:     the JSOM clientContext
/// onList:            the current list where the lookup field has to be created
/// toList:            the list where this lookup field will look for the data
/// fieldXml:          the xml definitionn for the lookup field
/// toLookupFieldName: the field name in the toList that is used to copy the value over.
///
var AddPrimaryLookupField = function(clientContext, onList, toList,fieldXml, toLookupFieldName)
{
  // Add Lookup Field
  var field = onList.get_fields().addFieldAsXml(fieldXml,true,SP.AddFieldOptions.defaultValue);

  //cast the field to a lookup field
  var fieldLookup = clientContext.castTo(field, SP.FieldLookup);

  //Setting up the Lookup list ID and the Field to lookup inside that list
  fieldLookup.set_lookupList(toList.get_id());
  fieldLookup.set_lookupField(toLookupFieldName || "Title");

  fieldLookup.update();

  clientContext.load(field);

  clientContext.executeQueryAsync(
    Function.createDelegate(this, function () {
    //success code here
    }),
    Function.createDelegate(this, function (sender, args) {
    //failure code here
  }));
}

2. Adding dependent or secondary lookup fields:

/// Parameters:
/// clientContext:     the JSOM clientContext
/// onList:            the current list where the lookup field has to be created
/// toList:            the list where this lookup field will look for the data
/// toLookupFieldName: the field name in the toList that is used to copy the value over.
/// lookupFieldName:   the name of the dependent lookup field
///
var AddDependentLookupField = function(clientContext, onList, lookupFieldName, toList, toLookupFieldName)
{
  //get the field to be linked to
  var toField = toList.get_fields().getByInternalNameOrTitle(toLookupFieldName);

  // Add dependent Lookup Field
  var field = onList.get_fields().addDependentLookup(lookupFieldName, primaryField, toField);
  //cast the field to a lookup field
  var fieldLookup = clientContext.context.castTo(field, SP.FieldLookup);
  // Even if we specify the field in the addDependentLookup we still have to set it here again
  fieldLookup.set_lookupField(toLookupFieldName || "Title");

  field.update();
  clientContext.context.load(field);

  clientContext.context.executeQueryAsync(
    Function.createDelegate(this, function () {
      //success code here
    }),
    Function.createDelegate(this, function (sender, args) {
     //failure code here
  }));
}