Cumulative space shift in Widget form

[addinall]

Hi. Firstly thanks for all of your help. Response times and information has been first class. I’ll be using your stuff again.

http://www.crosscitydjs.com.au

The left hand side of the screen is a widget area. In this Widget is a QuForm “Play List”.
When one selects the first radio button, 50s & 60s, the margin around from the start of the checkbox part of the form and the title of that check box is correct.

When choosing different radio buttons (Type of music), the further down the list of selections we go, the top margin in the checkbox increases accumulativly. The margin between the top of the form element increases (it seems) by 1 el(??) as we progress down the radio selections.

I viewed the source between the extreems, ie. the first choice, 50s & 60s, and the last, Wedding Songs, and the source looks the same to me.


(ME. This is the start of the list elements )
<div class="iphorm-group-row iphorm-clearfix iphorm-group-row-1cols"><div class="iphorm-element-wrap iphorm-element-wrap-checkbox iphorm_4_12-element-wrap iphorm-clearfix iphorm-labels-above iphorm-element-optional" >
<div class="iphorm-element-spacer iphorm-element-spacer-checkbox iphorm_4_12-element-spacer">
<label style='color: rgb(0, 255, 111);' class="iphorm_4_12-outer-label">
50s & 60s </label>
<div class="iphorm-input-wrap iphorm-input-wrap-checkbox iphorm_4_12-input-wrap" >
<div class="iphorm-input-ul iphorm-input-checkbox-ul iphorm_4_12-input-ul iphorm-options-block iphorm-clearfix" >
<div class="iphorm-input-li iphorm-input-checkbox-li iphorm_4_12-input-li" style='border: 1px solid rgb(34, 34, 34);font-size: 12px;margin-left: 4px;'>
<label class="iphorm_4_12_1_label">
<input class="iphorm-element-checkbox iphorm_4_12 iphorm_4_12_1" type="checkbox" name="iphorm_4_12[]" id="iphorm_4_12_513c574e9a0ce_1" value="I Say a Little Prayer - Aretha Franklin" />
I Say a Little Prayer - Aretha Franklin </label>
</div>

( ME This is the end of the first element
Lots of stuff cut as we get the the start of the last element)
-------------------------------------------------------
<div class="iphorm-group-row iphorm-clearfix iphorm-group-row-1cols"><div class="iphorm-element-wrap iphorm-element-wrap-checkbox iphorm_4_31-element-wrap iphorm-clearfix iphorm-labels-above iphorm-element-optional" >
<div class="iphorm-element-spacer iphorm-element-spacer-checkbox iphorm_4_31-element-spacer">
<label style='color: rgb(0, 255, 111);' class="iphorm_4_31-outer-label">
Wedding Songs </label>
<div class="iphorm-input-wrap iphorm-input-wrap-checkbox iphorm_4_31-input-wrap" >
<div class="iphorm-input-ul iphorm-input-checkbox-ul iphorm_4_31-input-ul iphorm-options-block iphorm-clearfix" >
<div class="iphorm-input-li iphorm-input-checkbox-li iphorm_4_31-input-li" style='border: 1px solid rgb(34, 34, 34);font-size: 12px;margin-left: 4px;'>
<label class="iphorm_4_31_1_label">
<input class="iphorm-element-checkbox iphorm_4_31 iphorm_4_31_1" type="checkbox" name="iphorm_4_31[]" id="iphorm_4_31_513c574e9a0ce_1" value="I Do It For You - 1927" />
I Do It For You - 1927 </label>
</div>


The only thing I can think of is that the values of iphorm_4_12-element-spacer and iphorm_4_31-element-spacer are different as a result of the position in the list????

Had a look in Firebug but can’t get a handle on what to look at.

Any ideas?

Cheers,
Mark.

[Ally]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[addinall]

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.

[Ally]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[addinall]

Thanks Ally. Yeah that $map could com in handy on a number of applications. When I was writing the Javascript to handle each for element I was wishing “I wish I could GLOB the namespace like Perl”, so I googled it and discovered $map. Very happy with that function!

The CSS fix worked a treat! Thanks! I understand what was happening now.

I downloaded the export file, and it is being exported in the correct order.

I’ll mail it. Still displays in the wrong order %-/

Dunno.

Thanks for all your help,
Cheers,
Mark.

[addinall]

Actuall Ally, I inserted that CSS in the CSS element of the

Song List->Group Elements Wrapper

And it DID fix the margin error, but somehow overwrote the display size, i.e. I have it set at 500px but when this code is entered it just keep on drawing until the end of the list.

I’ll stick the code in some other places and see what happens!

Cheers,
Mark.

[addinall]

Moving the CSS down one level into the individual
[Song List Group]->Option Wrapper
Fixes the margin AND sizes the box correctly

It breaks this

border: 1px solid #222;

I can live with no borders on the elements, but it looked better.

Cheers,
Mark.

[Author]

Posts