If I have 2 javascript parts (for the Wordpress customizer), how do I get part_two to have access to use the data entry from part_one? See example below. The part_two script needs access to part_one and part_two simultaneously. (Not asking about php part, only the javascript part.)

I assume the script needs to all be in one single script instead of two scripts pointing at 2 parts. Because if it was combined in one script it would have access to both parts I assume. I don't know how to write one single script for this type of formula.

api('yeah[part_one]' , function (value) {
 value.bind(function(part_one) {
  $('#htmlcss > location > yes-in').css({ 'specificcode' : part_one });
 });
});

api('yeah[part_two]' , function (value) {
 value.bind(function(part_two) {
  $('#htmlcss > location > yes-ok').css({ 'specificcode' : part_one + part_two });
 });
});

See part_two simply needs to print as if it is able to print the css just side by side so whatever the value of part_one is it prints it before (or after if placed after) part_two, in this example it would be before.

If you don't understand me here is what the output would look like from the result of the final part_two script:

#htmlcss > location > yes-ok {
 specificcode:1px 2px;
}

For example: 1px would be data from part_one and 2px would be data from part_two.

Someone wrote to me privately and said my words are not clear enough. I don't know the correct terms but maybe its called, I am wanting to write js to BIND to 2 wordpress settings in customizer. Here is another example of what I am trying to write and note this would be in the wordpress customizer.js file:

api('yeah[part_one]' , function (value) {
 var part_two=api('yeah[part_two]').val();
 value.bind(function(part_one) {
  $('#htmlcss > location > yes-ok').css({ 'specificcode' : part_one + part_two });
 });
});

If I have 2 javascript parts (for the Wordpress customizer), how do I get part_two to have access to use the data entry from part_one? See example below. The part_two script needs access to part_one and part_two simultaneously. (Not asking about php part, only the javascript part.)

I assume the script needs to all be in one single script instead of two scripts pointing at 2 parts. Because if it was combined in one script it would have access to both parts I assume. I don't know how to write one single script for this type of formula.

api('yeah[part_one]' , function (value) {
 value.bind(function(part_one) {
  $('#htmlcss > location > yes-in').css({ 'specificcode' : part_one });
 });
});

api('yeah[part_two]' , function (value) {
 value.bind(function(part_two) {
  $('#htmlcss > location > yes-ok').css({ 'specificcode' : part_one + part_two });
 });
});

See part_two simply needs to print as if it is able to print the css just side by side so whatever the value of part_one is it prints it before (or after if placed after) part_two, in this example it would be before.

If you don't understand me here is what the output would look like from the result of the final part_two script:

#htmlcss > location > yes-ok {
 specificcode:1px 2px;
}

For example: 1px would be data from part_one and 2px would be data from part_two.

Someone wrote to me privately and said my words are not clear enough. I don't know the correct terms but maybe its called, I am wanting to write js to BIND to 2 wordpress settings in customizer. Here is another example of what I am trying to write and note this would be in the wordpress customizer.js file:

api('yeah[part_one]' , function (value) {
 var part_two=api('yeah[part_two]').val();
 value.bind(function(part_one) {
  $('#htmlcss > location > yes-ok').css({ 'specificcode' : part_one + part_two });
 });
});

• javascript
• theme-customizer

1 Answer 1

I think the part you may be missing is that you don't have to use the value that is passed to the function. You can still reference the setting inside the callback function, including other settings. So you can do this:

// Run a callback when both of the settings are registered.
wp.customize( 'yeah[part_one]', 'yeah[part_two]', ( part_one, part_two ) => {
    // Run callback when part one is changed.
    part_one.bind( () => {
        $( '#htmlcss > location > yes-in' ).css( { 'specificcode': part_one.get() } );
    } );

    // Run callback when part two is changed, but using the values of both part one and two.
    part_two.bind( () => {
        $( '#htmlcss > location > yes-ok' ).css( { 'specificcode': part_one.get() + part_two.get() } );
    } );
} );