153 posts I think about colours
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • Has been a member for 4-5 years
  • Bought between 100 and 499 items
  • Referred between 100 and 199 users
  • Exclusive Author
  • Greece
SkatDesign says

Hey guys,

I’m building a tabs shortcode button for WordPress (using the media_buttons action, not the default TinyMCE functions). When you click on the button, a modal window opens with the desired form fields: tab title and tab content. I inserted the clone function so I can add more tabs.

I know how to get the values of all the fields (including the cloned ones), with each function, but I don’t know how to properly format them so I can send them to the editor as a shortcode.

Example:

When I press the “Send to Editor” button, the output must be like this:


[tabs]
[tab title="Title 1"] Content 1 Here [/tab]
[tab title="Title 2"] Content 2 Here [/tab]
[/tabs]

Can anyone can give me some advice?

Cheers!

101 posts
  • Elite Author
  • Referred between 100 and 199 users
  • Bought between 1 and 9 items
  • Has been a member for 3-4 years
  • Exclusive Author
  • Sold between 100 000 and 250 000 dollars
PixelBook says

you simply start buliding a shortcode string

var tabs='';    

$("ul.tabs li").each(function(){

   var title=$(this).find('input.tab-title').val();
   var content=$(this).find('textarea.tab-content').val();

   tabs+='[tab title="'+title+'"]'+content+'[/tab]';

});    

var sc='[tabs]\n'+tabs+'\n[/tabs]';        
send_to_editor(sc);
169 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 1-2 years
themique says

If I’m not wrong you are asking how to format the shortcode code to send it to editor. If its so then try to add form inputs to an array with serializeArray then split its items with split() function and recreate the shortcode code, with each command using array array index and keys.

If it’s what you are looking for, tell me to put a code sample here.

Yours

153 posts I think about colours
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • Has been a member for 4-5 years
  • Bought between 100 and 499 items
  • Referred between 100 and 199 users
  • Exclusive Author
  • Greece
SkatDesign says

@PixelBook: hey, thank you. I’ll give it a try.

@themique: yup, this is what I’m trying to do. If you could post some sample code it would be great. I’m not very proficient in javascript but I can play with it and learn :)

Cheers!

169 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 1-2 years
themique says

First, you should customize this for yourself. This is what I made for my shortcode manager. Put this on your form submit or “insert to post” click event.

Hope it works for you :)

var requestedForm = // YourFormHere

$.each($(requestedForm).serializeArray(), function(i, field) {
    if (field.name in parameters) {
        parameters[field.name] += '|^|' + field.value;
    } else {
        parameters[field.name] = field.value;
    }
});

var shortcodeOutputContainer = '';
var tmq_tabitem_title = parameters['tabitem_title'].split('|^|');
var tmq_tabitem_text = parameters['tabitem_text'].split('|^|');
var shortcodeOutputStarter = '[tmq_tabs]';
var shortcodeOutputFinisher = '[/tmq_tabs]';

$.each(tmq_tabitem_title, function(index, value) {
    shortcodeOutputContainer += '[tmq_tab order="' + index + '" title="' + value + '"]' + tmq_tabitem_text[index] + '[/tmq_tab]';
});

shortcodeOutput = shortcodeOutputStarter + shortcodeOutputContainer + shortcodeOutputFinisher;

Yours

153 posts I think about colours
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • Has been a member for 4-5 years
  • Bought between 100 and 499 items
  • Referred between 100 and 199 users
  • Exclusive Author
  • Greece
SkatDesign says

Thank you very much for taking your time to help. I am taking the code now and learning what every piece does :)

Cheers!

169 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 1-2 years
themique says

Sorry I forgot to put some comments on it. Here is the updated one ;)

// Get form element
var requestedForm = // YourFormHere

// Put all form fields in an array
$.each($(requestedForm).serializeArray(), function(i, field) {
    // Check if it already exists in the array, if its already added, then add it to the end of the array with a separator
    if (field.name in parameters) {
        parameters[field.name] += '|^|' + field.value;
    } else {
        parameters[field.name] = field.value;
    }
});

var shortcodeOutputContainer = '';
// Split the title (tabitem_title) is the name of the input field of tab titles
var tmq_tabitem_title = parameters['tabitem_title'].split('|^|');
// Split the tab content (tabitem_text) is the name of the input field of tab contents
var tmq_tabitem_text = parameters['tabitem_text'].split('|^|');
var shortcodeOutputStarter = '[tmq_tabs]';
var shortcodeOutputFinisher = '[/tmq_tabs]';

// Read the array and make the title / content one by one 
$.each(tmq_tabitem_title, function(index, value) {
    shortcodeOutputContainer += '[tmq_tab order="' + index + '" title="' + value + '"]' + tmq_tabitem_text[index] + '[/tmq_tab]';
});

// Merge all parts 
shortcodeOutput = shortcodeOutputStarter + shortcodeOutputContainer + shortcodeOutputFinisher;
by
by
by
by
by
by