1

I have a front end member profile editor that uses Zoo Visitor, Channel Images, and Matrix. I have updated them all to the latest version and they work…sort of. The jQuery on those pages no longer works. jQuery for opening and closing some divs as well as the buttons for the add ons (add a new row, CI open the file viewer for files on the server, etc). I can upload a file using CI.

I've seen this before with multiple jQuery loads on the same page, but this time around I can't seem to find what changed. I tried to turn off jQuery in Channel:Form but that didn't work.

Updating the content does work, however you can't see images already uploaded via CI stored images feature.

Are there any changes to 2.7.2 and channel form that impact how to implement jQuery on the front end? Everything works from the CP.

Sample Code:

{if segment_3 == "edit-profile"}
    {exp:zoo_visitor:update_form return="{segment_1}/account/edit-profile"}
    <h3 class="arrow-right">About You - The Basics</h3>
    <div class="about-you"> 
        <fieldset>
            <div class="row">
                <div class="span3">
                    <label for="member_first-name">Your {label:member_first-name}</label>
                    <input type="text" name="member_first-name" id="member_first-name" value="{member_first-name}"/>
                    <label for="label:member_last-name">Your {label:member_last-name}</label>
                    <input type="text" name="member_last-name" id="member_last-name" value="{member_last-name}"/>
                </div>

                <div class="span2 offset1">
                    <label for="label:member_avatar">{label:member_avatar}</label>
                    <p>no larger than 200px by 200px and 50kb</p>
                    {field:member_avatar}
                </div>
                <div class="span5 offset1">
                    <label for="member_bio">Your {label:member_bio}</label>
                    <textarea class="span5" rows="8" name="member_bio" id="member_bio">{member_bio}</textarea>
                </div>
            </div>
        </fieldset>
    </div>
    {if {exp:stash:get name='primary'} == member_id}
    <h3 class="arrow-right">Main/Family Photo</h3>
    <div class="details">
        <fieldset>
            <div class="row">
                <div class="span12">
                    <label for="label:member-cf-family-photo">{label:member-cf-family-photo}</label>
                    <p>{instructions:member-cf-family-photo}</p>
                    {field:member-cf-family-photo}
                </div>
            </div>
        </fieldset>
    </div>
    <h3 class="arrow-right">Contact and Ministry Details</h3>
    <div class="details">
        <fieldset>
            <div class="row">
                <div class="span4">
                    <h5>Social Media</h5>
                    <label for="label:member-cf-facebook">{label:member-cf-facebook}</label>
                    <input class="span4" type="text" name="member-cf-facebook" id="member-cf-facebook" value="{member-cf-facebook}"/>
                    <label for="label:member-cf-twitter">{label:member-cf-twitter}</label>
                    <input class="span4" type="text" name="member-cf-twitter" id="member-cf-twitter" value="{member-cf-twitter}"/>
                    <label for="label:member-cf-email-form">{label:member-cf-email-form}</label>
                    <input class="span4" type="text" name="member-cf-email-form" id="member-cf-email-form" value="{member-cf-email-form}"/>

                    <label for="label:member-cf-vimeo">{label:member-cf-vimeo}</label>
                    <input class="span4" type="text" name="member-cf-vimeo" id="member-cf-vimeo" value="{member-cf-vimeo}"/>
                    <label for="label:member-cf-youtube">{label:member-cf-youtube}</label>
                    <input class="span4" type="text" name="member-cf-youtube" id="member-cf-youtube" value="{member-cf-youtube}"/>
                </div>
                <div class="span4">
                    <h5>Office/Contact Information</h5>
                    <label for="label:member-cf-phone-office">{label:member-cf-phone-office}</label>
                    <input class="span4" type="text" name="member-cf-phone-office" id="member-cf-phone-office" value="{member-cf-phone-office}"/>
                    <label for="label:member-cf-phone-mobile">{label:member-cf-phone-mobile}</label>
                    <input class="span4" type="text" name="member-cf-phone-mobile" id="member-cf-phone-mobile" value="{member-cf-phone-mobile}"/>
                    <label for="label:member-cf-phone-home">{label:member-cf-phone-home}</label>
                    <input class="span4" type="text" name="member-cf-phone-home" id="member-cf-phone-home" value="{member-cf-phone-home}"/>
                    {!--<label for="label:member_email">{label:member_email}</label>
                    <input class="span4" type="text" name="member_email" id="member_email" value="{email}"/>--}
                    <label for="label:member_location">{label:member_location}</label>
                    <input class="span4" type="text" name="member_location" id="member_location" value="{member_location}"/>
                </div>
                <div class="span4">
                    <h5>Account/Privacy Settings</h5>
                    {!--<p><label for="label:member-cf-security">{label:member-cf-security}</label>
                    {field:member-cf-security}</p>--}
                    <p><label for="label:member-cf-sharing">{label:member-cf-sharing}</label>
                    {instructions:member-cf-sharing}<br />
                    {field:member-cf-sharing}</p>
                    <label for="label:member-cf-percent">{label:member-cf-percent}</label>
                    {field:member-cf-percent}
                </div>
            </div>
        </fieldset>
    </div>
    {/if}   
    <div>
        <input type="hidden" name="title" value="{username}">
        <input type="submit" value="Update" class="btn btn-primary"/>
    </div>
    {/exp:zoo_visitor:update_form}

    {/if}
7
  • anywhere we can look at a live example to view the source code?
    – Phil
    Nov 8, 2013 at 3:41
  • updated post with link and log in.
    – Doug
    Nov 8, 2013 at 15:48
  • If I remove the Zoo Visitor tag then the page's jQuery works fine. SOmething in the change from the Safecracker version of EE/ZooVisitor is not messing with jQuery.
    – Doug
    Nov 8, 2013 at 16:08
  • Hey @Doug, what happens if you just remove {field:member_avatar}, {field:member-cf-family-photo}, and {field:member-cf-percent} one at a time? Nov 8, 2013 at 16:20
  • Still broken. I removed all the fields, just leaving the ZV tags and the divs (no custom field tags) and it is still broken. If I remove the ZV tags the jQuery will work again. I also found on the front end blog post pages the Channel Images and Matrix jQuery isn't working there either. That uses channel:form. I believe ZV uses Channel Form as well, so it may be something to do with that.
    – Doug
    Nov 8, 2013 at 16:35

2 Answers 2

2

In your source code it looks like you have a ie conditional endif that doesn't have an opening which may be causing some errors

                    <table>
            <tbody>
                <tr>
                    <td class="imagefilter">
                        <div class="filter">
                            <div class="left">
                                                                                                                                                                                                                                                                                                                                                                <!--[if IE]>
                                <input rel="desc" type="text" value="Description" maxlength="256" onblur="if (value == '') {value='Description'}" onfocus="if (value == 'Description') {value =''}">
                                <![endif]-->
                                <!--[if !IE]> -->
                                <input rel="desc" type="text" value="" maxlength="256" placeholder="Description">
                                <![endif]-->
                                                                                                                <!--[if IE]>
                                <input rel="category" type="text" value="Category" maxlength="256" onblur="if (value == '') {value='Category'}" onfocus="if (value == 'Category') {value =''}">
                                <![endif]-->
                                <!--[if !IE]> -->
                                <input rel="category" type="text" value="" maxlength="256" placeholder="Category">
                                <![endif]-->
                                                                                                                                                                                                                                                                            </div>
                            <div class="right">
                                <label>Last</label>
                                <select rel="limit"><option>50</option><option>75</option><option>100</option><option>150</option><option>200</option><option>500</option><option>1000</option><option>2500</option></select>
                                <label>Images</label>
                            </div>
                            <br clear="all">
                        </div>
                        <div class="images">
                            <p class="Loading">Loading Images...</p>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>

See that first <![endif]-->. I doubt this is the cause of your problems but you never know how this messes up browsers. I think you also have an extra </div> in there towards the bottom.

<style type="text/css">.hasDatepicker{background:#fff url(https://dev.uscwm.org/themes/cp_themes/default/images/calendar_bg.gif) no-repeat 98% 2px;background-repeat:no-repeat;background-position:99%;}</style>
        </div>

    </div> <!-- /container -->

Console is showing a JS error TypeError: ChannelImages.CFields.find(...).sortable is not a function

.sortable is a jquery UI function. I can't see anywhere in your document where you are loading jquery ui. I assume in your channel:form call you have include_jquery="no" as you are including your own version. I would consider changing that to ="yes" and taking a look at what it is putting out. Likely it is loading the jquery ui

2

I paid the $50 to have EllisLabs support look into it. In 30 minutes I had the solution. Turns out when EE updated it missed adding a row to the Actions table in the DB. Channel:form was looking for this action, but didn't find it. Producing this:

<script type="text/javascript" charset="utf-8" src="http://dev.uscwm.org/?ACT={AID:Channel:combo_loader}&amp;ui=core,widget,mouse,position,draggable,resizable,sortable,button,dialog,tabs,datepicker&amp;plugin=markitup,toolbox.expose,overlay,tmpl&amp;file=underscore&amp;v=1383866052&amp;include_jquery=y"></script> 

Kevin at EL says,

“{AID:Channel:combo_loader}”? That should be replaced with an action ID, if it’s not, it means the action ID likely isn’t present in your actions table. So, I simply added a row to the actions table to Channel:combo_loader and now it seems to be working.

I know I never would have figured this one out. Well worth it to get this taken care of so my weekend will be better without this hanging over my head!

1
  • that makes sense that is the call for jquery ui that I was mentioning I couldn't see but your right never would have hunted it down to a missing update in the database.
    – Phil
    Nov 9, 2013 at 8:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.