TypeError, help in tracking down the issue

I have AntonLV's Profile Composer module installed, latest version, and it seems that it is breaking the colour picker on a standard member's page.  AntonLV is not interested in tracking this down since it involves a third party non-Dolphin jquery.  On the accounts where the member is allowed to use Profile Composer, the colour picker works.  On the standard accounts the colour picker does not work and returns TypeError errors in the error console; I would have expected the reverse.  What can I do to try and track down why I am having this issue?

what is the third party non dolphin jquery, and why is it being used when dolphin comes with jquery? What happens if you uninstall the profile customizer?

http://www.boonex.com/forums/topic/Replacing-the-Colour-Picker-on-Profile-Customiser.htm

Not jquery but a jquery script.  Have you looked at the colour picker that ships with Dolphin 7.1.4, it is very old and very outdated.

All my searches on the internet about the TypeError talks about bad code, bad programming.  I am guessing this is a conflict error somewhere.  How do you track down TypeError errors when it is not bad code?  What do I look for, what do I test for, any guidelines for how to proceed to figure this out?

Looking at the error it is telling you that those are not functions. So it would seem like your new color picker is either not coded properly for the jquery file that comes with dolphin, or you may have a typo, or you may need an updated jquery.js. But not sure how that would affect things.

Or there are two versions of jquery loading resulting in conflicts.

Yes, the colour picker developer lists the jquery that is needed.  However, look me go and do a detail examination of the differences between the two "pages", Profile Composer versus no Profile Composer.  The Profile Composer loads in a special version of the page view code for the Profile view; let me see what that is doing as well.  Perhaps it loads in a different version of jquery and is the reason the colour picker works when the Profile Composer is active and not when the Profile Composer is not active.  I wish AntonLV would give me more information on what his module is doing.

I saved out the two profile views and use WinMerge to compare the two to make it easier to see what was what; I did have to edit the files and put all the links and scripts lines on a separate line before running the compare.

What I found was that on the Profile Composer page and not on the non Profile Composer Page was:

  <script language="javascript" type="text/javascript" src="/modules/aqb/pcomposer/js/main.js"></script>
  <script language="javascript" type="text/javascript" src="/modules/aqb/pcomposer/js/composer.js"></script>
  <script language="javascript" type="text/javascript" src="/plugins/jquery/jquery.ui.all.min.js"></script>

I am wondering if it is that last line that is missing from the non Profile Composer page that is needed for the colour picker?  If AntonLV is loading that in, I may need to remove the load from the module and put it into the header so that both pages can pick it up.

Possible. But does your color picker need the jquery ui library? I know it needs jquery. The base which is just jquery.js. Which most of dolphin has, not everything needs the UI library tho.

OK, just to clarify this, for a sec, please.

Profiles With the Profile Customizer and new Color Picker - things work fine

Profiles WIthout the profile customizer and color picker - you get screwy things.

That would seem like you have included something that is not needed for the non profile customization page. So it seems,  whatever you added is kicking in when it is not needed.

After looking at your other post on how you added the color picker, I would remove the code from the _header.html page and put it in that html template file for the profile customizer. That way it is not called unless it is absolutely needed. I have done such things and it works well.

EDIT: Here is an example of one of my usages. I have this in the .html template file for a block:

        <style type="text/css" title="currentStyle">
            @import "modules/mts/clients/templates/base/css/jquery.dataTables.css";
        </style>
       
        <script type="text/javascript" language="javascript" src="modules/mts/clients/js/jquery.dataTables.js"></script>
       
        <script type="text/javascript" charset="utf-8">
            (function($) {
            /*
             * Function: fnGetColumnData
             * Purpose:  Return an array of table values from a particular column.
             * Returns:  array string: 1d data array
             * Inputs:   object:oSettings - dataTable settings object. This is always the last argument past to the function
             *           int:iColumn - the id of the column to extract the data from
             *           bool:bUnique - optional - if set to false duplicated values are not filtered out
             *           bool:bFiltered - optional - if set to false all the table data is used (not only the filtered)
             *           bool:bIgnoreEmpty - optional - if set to false empty values are not filtered from the result array
             * Author:   Benedikt Forchhammer <b.forchhammer /AT\ mind2.de>
             */
            $.fn.dataTableExt.oApi.fnGetColumnData = function ( oSettings, iColumn, bUnique, bFiltered, bIgnoreEmpty ) {
                // check that we have a column id
                if ( typeof iColumn == "undefined" ) return new Array();
               
                // by default we only want unique data
                if ( typeof bUnique == "undefined" ) bUnique = true;
               
                // by default we do want to only look at filtered data
                if ( typeof bFiltered == "undefined" ) bFiltered = true;
               
                // by default we do not want to include empty values
                if ( typeof bIgnoreEmpty == "undefined" ) bIgnoreEmpty = true;
               
                // list of rows which we're going to loop through
                var aiRows;
               
                // use only filtered rows
                if (bFiltered == true) aiRows = oSettings.aiDisplay;
                // use all rows
                else aiRows = oSettings.aiDisplayMaster; // all row numbers
           
                // set up data array   
                var asResultData = new Array();
               
                for (var i=0,c=aiRows.length; i<c; i++) {
                    iRow = aiRows[i];
                    var aData = this.fnGetData(iRow);
                    var sValue = aData[iColumn];
                   
                    // ignore empty values?
                    if (bIgnoreEmpty == true && sValue.length == 0) continue;
           
                    // ignore unique values?
                    else if (bUnique == true && jQuery.inArray(sValue, asResultData) > -1) continue;
                   
                    // else push the value onto the result data array
                    else asResultData.push(sValue);
                }
               
                return asResultData;
            }}(jQuery));
           
           
            function fnCreateSelect( aData )
            {
                var r='<select><option value=""></option>', i, iLen=aData.length;
                for ( i=0 ; i<iLen ; i++ )
                {
                    r += '<option value="'+aData[i]+'">'+aData[i]+'</option>';
                }
                return r+'</select>';
            }
           
           
            $(document).ready(function() {
                /* Initialise the DataTable */
                var oTable = $('#clients').dataTable( {
                } );
               
                /* Add a select menu for each TH element in the table footer */
                $("tfoot th").each( function ( i ) {
                    this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) );
                    $('select', this).change( function () {
                        oTable.fnFilter( $(this).val(), i );
                    } );
                } );
            } );
        </script>

End result is the image below.

Using this same theory. I would create a folder in the profile customizer module called colorpicker, and place all the files for the color picker in there. Then use the method above and link to those files.

I originally added it to the profile customizer section (note, profile customizer is the Boonex module that allows changes to the profile page) but the colour picker was a little slow as it had to wait for those js to load in.  Maybe if I moved them to the page_5.html file; however, I would like to use the same colour picker in other areas of the site so they would need to be able to be accessed site wide.

I need to go back and read the instructions again for the colour picker to see what it needs.  I added this colour picker some time back, it was working fine with the Profile Composer module.  Then AntonLV upgraded the module due to a jquery change so it would be compatible with Dolphin 7.1.4 (if I recall correctly) and that is when I started having issues.  The Profile Composer module is suppose to be 7.1.x compatible and I am planning on upgrading the site so wanted to make sure that I would not have issues with the composer module when I upgraded.  The problem is that I keep working on everything but my site.

OK, I have figured this out.  The colour picker requires the jquery UI library.  When I first installed this colour picker, I already had AntonLV's Profile Composer module installed.  I did not know he was loading in the UI library; I thought Dolphin was loading that in.  When I installed the colour picker; and if you go and look at my instructions in the post I made, I did not load in the jquery UI and it was working because the profile composer module was loading in the UI library.  Now I had AntonLV to add membership levels to the module when I first purchased it back when I first started my site; it was one of the very first modules I installed.  Evidently with the way that it was set up for membership levels at that time, it was still loading the UI library for standard members.  However, since then the module has been changed several times.  With the current way the module is set up for membership levels (I finally asked AntonLV to add it to the standard module and he did), it does not add the UI library to the standard members page.  So I need to make a change so that the UI library is loaded in outside of the module.

Question, will loading in the UI library outside of the module in the header present a problem anywhere else for the site?  Should I load it page specific?

It shouldn't cause conflicts when its not used, but you should not load things you don't need for the sake of web page optimization unless you're using js cache and compression.

If you load it like from lets say the page header file, then on pages that do load it, it will get loaded twice. So that is a bad idea. It should be page specific. Modules have built in functions so we as developers can load in whatever JS we need. Which is most likely how he is doing it. If your using PHP anywhere with this then you may be able to force the load using this php function.

$GLOBALS['oSysTemplate']->addJs(array('jquery.ui.all.min.js'));

Yes, I understand but I also want to use the colour picker in the groups customiser module from the market that I have added to the groups.  Should I just add to the specific pages then?  Page_5.html is the template for the profile page; I could add the js files to that template.  I might move them back to the profile customizer module's customizer_block.html file and see how fast it loads the colour picker.  I think that block only loads in when you click on customise in the action block of the profile page.

The PC module was doing this for the library:

    function init($iProfile, $iViewer){
        global $_page, $_page_cont, $_ni;

<snip>

       if ((int)$iProfile == (int)$iViewer || $isAdmin)
       {
      
       $this -> _oMain -> _oTemplate -> addJs(array('jquery.ui.all.min.js'));

OK, I need to figure out how to load it so that it gets loaded to the standard member's page when the PC module is not active so that it does not get loaded twice to the members that have the PC module active.

As far as i remember, if you use the addJs() function you can't load the same file twice.

Ok. You could do this.

Add it to the profile page template. page_5.html.

Then find it in Antons mod and comment it out so his module does not try to load it because it already is.

OK, will try the suggestions and thanks guys for the help

Update: added

<script language="javascript" type="text/javascript" src="<bx_url_root />plugins/jquery/jquery.ui.all.min.js"></script>

to the page_5.html file and both Profile Composer and my colour picker are working.

Thanks for the help guys.