Reply To: Cumulative space shift in Widget form

Hi thanks again Ally. I got the sooper dooper automagic playlist construction finished. I discovered jQuery map which saved me a lot of coding and duplication, so, even ‘though that wasn’t an issue for you to resolve, it is resolved, here is the code if you want to share it with your users.


<!-- This is the custom Javascript (jQuery) that will allow two
dynamic forms to interact with each others DOM elements.
Each form, and each element in a form has a unique DOM id.
This id is used to manipulate the DOM when applying conditional
manipulation of the visible form elements.
Mark Addinall. February 2013 -->

<script type="text/javascript">

// Ths script relies on jQuery already being loaded
// it is, probably more than once which is a worry
//
// There are any number of check boxes in this system that
// appear or dissapear in and out of the visible DOM depending
// on the value of a radio selection in the same form.
//
// Even 'though the checkbox portions of the for appear
// and re-appear, the checked-unckecked values are
// maintained.
//
// when a check box is clicked (to check or uncheck, this
// script rebuilds the value of the Play List textarea
// from the values in the visible and the hidden checkboxes.
//
// Mark Addinall. March 2013
// function build() - uses map to look at all elements in a div
//
// This started in life as about 300 or so lines. I discovered
// map.
//
// What happens now is real magic. Each checkbox in a group
// within a form is accessed by map whether it is visible by
// the DOM or not. The textarea in another page is rebuilt
// based on the values of all of the checked items in each of
// the checkboxes within the group. This has some very real
// benefits. Getting rid of 300 lines of code is always a plus.
// Also, this way the user (ungrateful bastard) can delete, add,
// modify checkboxes in the group with aplomb, and never darken my
// doorstep again....
//

//----------------------------------
jQuery(document).ready(function ($) {

var $textarea = $('.iphorm_3_9'); // this is a text area
// second WINDOW
// (widget)
//----------------
function build() {

// this is the function that does the work
// of interrogating ALL the checkboxes that
// are included in the system
//
// map returns an ARRAY of object values
// (much like Perl

var text_boxes = $.map($('input:checkbox:checked'), function(e, i) {

return e.value;
});

// OK, we now have the array containing the values
// from ALL the checkboxes, from these values we
// build up a text area that is in another form
// on another screen (WIDGET area)

$textarea.val('My selected playlist is: \n\n' +
text_boxes.join('\n'));
}

// first time in, check if there are any persistent
// values left in the checkboxes. Customer may
// have timed out or refreshed for some reason

build();

// OK. We are only using checkboxes for ONE
// form for ONE function in this system, so the
// level of granularity can be quite broad.
// iphorm-element-checkbox is enough

$('.iphorm-element-checkbox').on('click', build);
});

</script>


It might me me being thick, but I don’t really understand what you just told me!! Grey hair, holes in Brain 😉

At the moment we have Page -> Contact
Then some of our conditional logic
(if we are on the Contact Page, show the Widget that contains QuForm ‘Play List’)
In Play list we have a HTML area that is static up the top of the form
Then a Radio button SELECT that is also static
Then a series of Check Box INPUT areas that are swapped in and out of the visible DOM by your conditional logic that is described in
Group Song List
and the first Check Box set is in
50s and 60s
This area has conditional logic applied through the wp-admin area of yours that describes
SHOW this field IF type === ’50s && 60s’

And so on for the dozen lists of SUBTYPES of TYPES of music

Seemed logical enough and works really well.
I was going to write exactly the same thing myself so $30 was well spent. No complaints here!

I can’t see where to alter the granurality of the control?

Looking at the CSS and HTML produced one segment looks the same as the next, although something basic must be going on as it is not erratic. It gains a line space for every section.

So no sorry. I don’t understand.

Also, in the Form builder, the group that is Weddings is BELOW New Releases, but displays ABOVE New Releases.

I thought it might have something to do with the ordinality of the id, viz. New Release is _32 and Weddings is _31, but checking the rest, the ids are not in any order, ie. Rock is _5 and displays BELOW Party Anthems which is _32 (these two are displayed in the order shown in the admin section)….

Getting close. I am going to have a go at the conditional Ajax read, but as you mentioned, that is a BIG job, so for now we cut the amount of data down to semi-realistic levels.

Everything else is resolved as far as I am concerned. None of my queries were actually the fault of your plugin.

Cheers,
Mark.