A little help with jQuery is needed :)

Question

Hi everyone!

I am working on something for my own site, it is a plugin for wordpress that lets me add shortcodes for buttons. Slight difference with this to ones on the codes currently is mine will use flexbox to help lay these out.

I have the code to generate the shortcodes working from values entered in select options in a pupout.

Now the bit I can not figure out is how how to add and extra button within the wrapper shortcode:S

I a assuming we are looking a a variable to store first imputed data and then be updated with the new for as many buttons as you would like to add, however I have tried many things and im not getting close ....

Below you fill find the code that is being used to create and add the shortcodes. (Only the bits relevant to this question)

            <form>

                <label for="bf_button_size" class="bf_button_form_label">Size</label>
                <select class="bf_button_form_select" id="bf_button_size" name="bf_button_size">
                    <option value="xs">Extra Small</option>
                    <option value="sm">Small</option>
                    <option value="md">Normal</option>
                    <option value="lg">Large</option>
                </select>

                <label for="bf_button_color" class="bf_button_form_label">Color</label>
                <select class="bf_button_form_select" id="bf_button_color" name="bf_button_color">
                    <option value="default">Default</option>
                    <option value="primary">Primary</option>
                    <option value="success">Success</option>
                    <option value="info">Info</option>
                    <option value="warning">Warning</option>
                    <option value="danger">Danger</option>
                </select>

                <label for="bf_button_value" class="bf_button_form_label">Value</label>
                <input type="text" class="bf_button_form_input" id="bf_button_value" name="bf_button_value" placeholder="Value"/>

                <label for="bf_button_icon" class="bf_button_form_label">Icon</label>
                <select class="bf_button_form_select" id="bf_button_icon" name="bf_button_icon">
                    <option value="fa-home">Home</option>
                    <option value="fa-user">User</option>
                    <option value="fa-cog">Cog</option>
                    <option value="fa-hand-left">Hand Left</option>
                    <option value="fa-arrow-down">Arrow Down</option>
                    <option value="fa-trash">Trash</option>
                </select>

                <label for="bf_button_link" class="bf_button_form_label">Link</label>
                <input type="text" class="bf_button_form_input" id="bf_button_link" name="bf_button_link" placeholder="#" />

                <hr>

                <!-- This button should store first set of values and then allow more to be added as a new button -->
                <button class="button-primary" id="bf_button_add">Add Another Button</button>

                <hr>

                <!-- Controls Wrapper / Flex Direction -->
                <label for="bf_button_position" class="bf_button_form_label">Position</label>
                <select class="bf_button_form_select" id="bf_position" name="bf_button_position">
                    <option value="bfbuttons-btn-wrap">Space Around</option>
                    <option value="btn-container-center">Row Center</option>
                    <option value="btn-container-left">Row Left</option>
                    <option value="btn-container-right">Row Right</option>
                    <option value="btn-container-stretch">Space Between</option>
                    <option value="btn-container-col-center">Column Center</option>
                    <option value="btn-container-col-right">Column Right</option>
                    <option value="btn-container-col-left">Column Left</option>
                </select>

                <!-- Button to add final lot of shortcode -->
                <button class="button-primary" id="bf_shortcode_insert">Add Shortcode</button>

            </form>

PHP function that include jQuery to add the content via shortcode to the tinyMCE editor:

<?php

//javascript code needed to make shortcode appear in TinyMCE edtor
function bf_button_add_shortcode_to_editor(){
?>

<script>
jQuery('#bf_shortcode_insert').on('click',function(){

  var bf_button_size = jQuery('select[name="bf_button_size"]').val();
  var bf_button_color = jQuery('select[name="bf_button_color"]').val();
  var bf_button_value = jQuery('input[name="bf_button_value"]').val();
  var bf_button_icon = jQuery('select[name="bf_button_icon"]').val();
  var bf_button_position = jQuery('select[name="bf_button_position"]').val();
  var bf_button_link = jQuery('input[name="bf_button_link"]').val();


    var shortcode = '[bf_button_wrapper bf_position="'+bf_button_position+'"]';
    shortcode += '[bf_button bf_button_size="'+bf_button_size+'" bf_button_color="'+bf_button_color+'" bf_button_value="'+bf_button_value+'" bf_button_icon="'+bf_button_icon+'" bf_button_link="'+bf_button_link+'"/]';
    shortcode += '[/bf_button_wrapper]';

  if( !tinyMCE.activeEditor || tinyMCE.activeEditor.isHidden()) {
    jQuery('textarea#content').val(shortcode);
  } else {
    tinyMCE.execCommand('mceInsertContent', false, shortcode);
  }
  //close the thickbox after adding shortcode to editor
  self.parent.tb_remove();
});
</script>

<?php
}
add_action('admin_footer','bf_button_add_shortcode_to_editor');

?>

Any help and advice is much appreciated here ive been stuck for a while now...

Answer 1 · 2015-05-31T19:58:37Z

May 31, 2015 7:58pm

Try to post your question on Wordpress theme forum. As JS question I have - where is "self" defined? If you want to make var self = $(this) you should do it first. There is no default "self" variable.

Welcome to the Treehouse Community

Looking to learn something new?

Craig Watson

Craig Watson

A little help with jQuery is needed :)

1 Answer

Daniel Newman

Daniel Newman