0

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 });
 });
});

1 Answer 1

0

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() } );
    } );
} );
2
  • Thanks! This definitely gives me some ideas to write highly possible answers to a perfect code. It is surprising other programmers don't understand my words but you seem to understand me clearly 100 percent! I would mark this as an answer if I had the privilege, I'm still new here so can't do much on the site.
    – Angel Hess
    Mar 14, 2022 at 21:25
  • One thing I recommend editing in this is both parts need to be on the css lines. Not just one on one and two on the other. Otherwise the single one resets the other wrong. But I know you were going by my example. My example was wrong. Seeing it live makes me see it correctly. :)
    – Angel Hess
    Mar 15, 2022 at 21:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.