Menu icon Foundation
Change Plugin settings in Javascript

I am at my wits end transitioning from Foundation 5 to Foundation 6, I used to have a Javascript object that held various Abide patterns:

constants.abide_patterns = {
        abide: {
            patterns: {
                blah blah blah
            }
        }
    };
            

         

I would then initialize Foundation for the page by calling:

$(document).foundation(constants.abide_patterns);
            

         

However, when run in an application, this gives me an error that states 'object' is not a valid parameter, and must have a String name (or text name). How do I configure each individual plugin, or as a whole, in Javascript?

I have read this: "Plugin settings can be changed globally by changing the DEFAULTS property on the plugin.", here: http://foundation.zurb.com/sites/docs/javascript.html, but I have no idea how to actually change/set those defaults from Javascript.

Thank you.

foundation 6configurationsettingsjsjavascript

I am at my wits end transitioning from Foundation 5 to Foundation 6, I used to have a Javascript object that held various Abide patterns:

constants.abide_patterns = {
        abide: {
            patterns: {
                blah blah blah
            }
        }
    };
            

         

I would then initialize Foundation for the page by calling:

$(document).foundation(constants.abide_patterns);
            

         

However, when run in an application, this gives me an error that states 'object' is not a valid parameter, and must have a String name (or text name). How do I configure each individual plugin, or as a whole, in Javascript?

I have read this: "Plugin settings can be changed globally by changing the DEFAULTS property on the plugin.", here: http://foundation.zurb.com/sites/docs/javascript.html, but I have no idea how to actually change/set those defaults from Javascript.

Thank you.

Chris Oyler about 4 years ago

To rewrite the whole defaults object:

 Foundation.Abide.defaults = constants.abide_patterns;

to rewrite select values

for(var k in constants.abide_patterns){
  if(k in Foundation.Abide.defaults){
    Foundation.Abide.defaults[k] = constants.abide_patterns[k];
  }
}

to rewrite a single value

Foundation.Abide.defaults[key] = value;

Hope that helps.

edit*
You could most certainly do it with jQuery as well, though I haven't tried it yet:

$.extend(Foundation.Abide.defaults, constants.abide_patterns);

that would save you from writing a nested loop or recursing mechanism for nested objects. Though, you lose the safety net of the if statement in my example.