jQuery not working after update to 2.7.2 and several add ons

Question

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}

Answer 1

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

Answer 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!