WTG PT jQuery Dialogue Form

Description

The jQuery dialogue form I coded is built using the wtgpt_jqueryform_singleaction_middle() function with wtgpt_formstart_standard() used before it and wtgpt_formend_standard() after it. We pass two variables to wtgpt_jqueryform_singleaction_middle(). The first is $jqueryform_settings which holds a flexible configuration. The main ability is to be able to display the value of form inputs within the dialogue box, no matter how many there are or even if you add none to your form. I pass a list of input ID to wtgpt_jquery_opendialog_confirmformaction() which I loop through, technically adding each to dialogue div.

$jqueryform_settings Values

This array allows us to build a form, quickly, customizing it in many ways with most coding only requiring html changes, other than adding items to the array holding input ID. Getting to know this array will help you understand how to control the functions. Just copy and paste an existing use. Most of the time I use it within what I call a panel, an accordion div. So copy the entire thing, remove the panel div if you don’t need that and use the contents of it.

has_options [true or false]

Using false will hide a subtitle used under the main dialogue box content. The title is the header to a list of values from inputs. If there are none, then no values will show and the title would look out of place. This is why we have the ability to hide it. Using false also prevents any processing of inputs regarding the output within my dialogue boxes. So don’t use false just to hide the title and display output because that won’t work. I’m assuming everyone will want the title in place, it looks better.

pageid

The $pageid variable is used to populate this and $pageid is set on a main page file, not a tab file. The tab files are included by main page files and so can access $pageid by default. The page id is not an integer/numeric value, it is a slug similar to the page title itself. It is used to make form ID sometimes but is also used in hidden form input as part of troubleshooting.

panelnumber

I use panels everywhere and each one increases the panel number variable. The integer value is another ID and can be used to make forms unique.

panel_name

Another value set for using by the panel but can be passed to the form and jQuery functions to help make up ID that the user may see or I may see. This helps in troubleshooting to confirm not only the page and tab being used but the exact panel the user was interacting with.

panel_title

I use the $panel_title value to make up content in the dialogue box, helping it to relate.

dialoguebox_title

This is the text within the windows title bar. I usually make it as short as possible but use the panel_title value and the term for the action that is being applied or can be.

dialoguebox_height [numeric or false]

Enter a numeric value to control the height of the dialogue box. Use “false” to prevent the height value being used in the JavaScript.

dialoguebox_width [numeric or false]

The same as height but setting both to false will force on auto re-sizing.

dialoguebox_autoresize [true or false]

If you use true, the dialogue box will re-size to display all the content possible, usually all of it. This also avoids a scroll bar being displayed.

noticebox_type

This effects the WTG Notice Box output, the styled div. There are various types, see the WTG Notice Boxes plugin for more information.

noticebox_size

The WTG Notice Box plugin has a range of pre-set sizes, each with a slightly different styling.  Tiny, Small, Large and Extra (large).

form_id

Use this to control the forms ID used by the JavaScript to know which form to submit when the dialogue box buttons are.

form_name

Add the form name.