Hi,

I'm developing a website for a DJ-Booking agency, which amongst other stuff contains profiles for the DJs (a cloneable template called artists.php) and a booking form. I'm calling this template in the form, so each artist is represented as a checkbox:

Code: Select all

           <cms:input type="checkbox" name="artist" opt_values="
                   <cms:pages masterpage='artists.php'>  
                     <cms:show k_page_title />                                            |                                                                                                                                                                                                                                                                               </cms:pages>         
                   "
            />

That works, but it's not enough .
The artists.php-template contains an editable called artist_profile_pic. I want to use the profile pic to replace the html-checkboxes with some neater looking solution (with CSS & jQuery).
Is there any way I could attach this variable (and others) to the corresponding label or input as a data-attribute, so the output looks something like this:

Code: Select all

<label for="artist0">
<input id="artist0" type="checkbox" value="The Beatles" name="artist[]" data-profile-pic="images/beatles.jpg" />
The Beatles
</label>
<label for="artist1">
<input id="artist1" type="checkbox" value="Rolling Stones" name="artist[]"  data-profile-pic="images/stones.jpg" />
Rolling Stones
</label>
<!-- et cetera -->

?
I guess what I'm asking makes no sense, since the pages tag is called inside the opt_values parameter and there's no way to push a variable outside of the pages tag ?

Alternatively, I tried to wrap the pages tag around the cms:input like this:

Code: Select all

            <cms:pages masterpage='artists.php'>  
                        
                        <cms:input type="checkbox" name="art" opt_values=" <cms:show k_page_title /> " data-profile-pic="<cms:show artist_profile_pic />" />                                                                                                                                    </cms:pages>  

This resulted in the correct amount of checkboxes, but all were filled with k_page_title and artist_profile_pic of the most recently added artist. Any ideas what I'm doing wrong here?

Thanks in advance

[KK]

Hi Nukun

Suppose we were to output the checkboxes HTML the way you wish using <cms:pages> alone (i.e. without using <cms:input>). Following is how we could do it -

Code: Select all

<cms:pages masterpage='artists.php' startcount='0'>
    <label for="artist<cms:show k_count />">
        <input id="artist<cms:show k_count />" type="checkbox" value="<cms:show k_page_name />" name="artist[]" data-profile-pic="<cms:show artist_profile_pic />" />
        <cms:show k_page_title />
    </label>
</cms:pages>

The code above would output something like -

Code: Select all

<label for="artist0">
    <input id="artist0" type="checkbox" value="the-beatles" name="artist[]" data-profile-pic="images/beatles.jpg" />
    The Beatles
</label>

<label for="artist1">
    <input id="artist1" type="checkbox" value="rolling-stones" name="artist[]"  data-profile-pic="images/stones.jpg" />
    Rolling Stones
</label>

The markup above is fine as far as display is concerned but is not attached to Couch <cms:input> tag, so we lose out on having validation etc.

To get the code above attached to <cms:input> tag, we do the following -

Code: Select all

<cms:hide>
    <cms:input type="checkbox" name="artist" required='1' opt_values="
        <cms:pages masterpage='artists.php'>
            <cms:show k_page_title />=<cms:show k_page_name /> |
        </cms:pages>
    "></cms:input>
</cms:hide>

<cms:pages masterpage='artists.php' startcount='0'>
    <label for="artist<cms:show k_count />">
    <input id="artist<cms:show k_count />" type="checkbox" value="<cms:show k_page_name />" name="artist[]" data-profile-pic="<cms:show artist_profile_pic />" />
        <cms:show k_page_title />
    </label>
</cms:pages>

You'll notice that we have added the Couch method of generating checkboxes to our existing code. So now we have two versions of the checkboxes on the same page - the Couch version and the HTML version (make sure the 'name' attributes match in both versions).

You'll also notice that we have wrapped the Couch version of checkboxes within <cms:hide> block which prevents the Couch version from showing up on the front-end.

However, this does not prevent the Couch <cms:input> tag code from being executed on the server. So we'll have all the validation etc. stuff server-side while on the client-side we get to display using our own logic.

This way we can combine both methods to achieve what you wished.
This, incidentally, has been discussed before -
viewtopic.php?f=2&t=9374
viewtopic.php?p=13095#p13095

Hope it helps.