Load comments dynamically

I have been running in circles on this one.

I just cannot load comments dynamically.

I need to click a button, and have the comments appear below based on the 2 parameters I pass.

If I just try to insert the code from getHTMLData call, it does not work.

If I create a php block with the initial comment parameters, it loads with the correct comments.

This is the PHP Block.

      bx_groups_import('Cmts');
        $o = new BxGroupsCmts ('bx_groups_images', 0);
        if (!$o->isEnabled()) return '';
        $sStuff = $o->getCommentsFirst();


echo '<div id="groupsPhotoCmt" class="groupsPhotoCmt" >';
echo $sStuff;
echo '</div>';

THIS is where I want to load it.

<div>
    <div id="__prefix__images_title_curr" class="bx_sys_block_images_title_curr">
        __title__
    </div>
    <div id="__prefix__images_curr" class="bx_sys_block_images_curr" >
        <img title="__title__" alt="___title__" src="__image_url__" />
        <input type="hidden" name="image_id" value="__base_id__">
        <div id="groupsPhotoRate" class="groupsPhotoRate" ></div>
       
    </div>
    <div id="__prefix__images_icons" class="bx_sys_block_images_icons">
        <bx_repeat:images_icons>
            <div class="sys_icon"><img alt="__image_url__" title="__title__" src="__icon_url__" />
            <input type="hidden" value="__id__" name="image_id">
            </div>
        </bx_repeat:images_icons>
        <div class="clear_both"></div>
 
    </div>
</div>
<script type="text/javascript" src="/plugins/tiny_mce/tiny_mce_gzip.js"></script>

<div id="groupsPhotoCmt" class="groupsPhotoCmt" >Comments</div>

           
    <script type="text/javascript">
        $(document).ready(function() {
                bx_center_content ('#__prefix__images_icons', '.sys_icon');
                $('#__prefix__images_icons > .sys_icon > img').bind('click', function () {
                    var e = $(this);
                    $('#__prefix__images_title_curr').html(e.attr('title'));
                    $('#__prefix__images_curr>img').attr('src', e.attr('alt'));
                    $('#__prefix__images_curr>img').attr('title', e.attr('title')).attr('alt', e.attr('title'));
                    iThisId = $(this).parent().find('input[type=hidden]').val();
                    $('.bx_sys_block_images_curr').find('input[type=hidden]').val(iThisId);                   
                    iId = $(this).parent().find('input[type=hidden]').val();
                    getHtmlData('groupsPhotoRate','__baseUrl__GetPhotoVotes/'+iId);

                    getComments('__baseUrl__GetPhotoCmts/',iId);
                                       
                });
        });

                getHtmlData('groupsPhotoRate','__baseUrl__GetPhotoVotes/'+__base_id__);
       
         $(document).ready(function() {      
                getComments('__baseUrl__GetPhotoCmts/',__base_id__);
                });
   
            function getComments(sUrl,iId){
            getHtmlData('groupsPhotoCmt',sUrl+iId,'group_comment');   

        }   
    </script>

With this code, I get the tinyMCE comment box, and all my comments the 1st time.

If I click the thumbnail to fire getComments, the main comment box does not load tinyMCE, but I can edit any existing comments with tinyMCE.  There are no errors in the browser console either.

If I remove the PHP block that initially loads the comments, I get the comments loaded with NO CSS, no tinyMCE just html with the data in it and the console gives me BxDolCmts not defined error.

If anyone can help me out here, I'd really appreciate it.

To further help anyone out that has any ideas, here is the response I get back from the getHtmlData function.

<div id="cmts-box-bx_groups_images-382"><div class="cmt-browse">
            <div class="cmt-order">Order by:&nbsp;<select onchange="javascript:oCmtsBx_groups_images382.changeOrder(this)"><option value="asc" >oldest first</option><option value="desc" selected="selected">newest first</option></select>
                <input type="checkbox" id="cmt-expand" name="cmt-expand" onclick="javascript:oCmtsBx_groups_images382.expandAll(this)"/><label for="cmt-expand">expand all</label>
            </div>
            <div class="cmt-pages">Per page:&nbsp;
<select name="per_page" onchange="oCmtsBx_groups_images382.changePerPage(this)">
   
        <option value="4" >4</option>
   
        <option value="6" >6</option>
   
        <option value="8" >8</option>
   
        <option value="10"  selected="selected">10</option>
   
        <option value="12" >12</option>
   
        <option value="14" >14</option>
   
        <option value="16" >16</option>
   
</select></div>
            <div class="clear_both">&nbsp;</div></div><div class="cmt-reply">
                <div class="cmt-post-reply">
                   
                    <table class="cmt-balloon">
                        <tr class="cmt-head">
                            <td class="cmt-head-l">&nbsp;</td>
                            <td class="cmt-head-m">Type Your Comment Below<br>
You MUST use at least 3 characters of text.<div class="clear_both"></div></td>
                            <td class="cmt-head-r">&nbsp;</td>
                        </tr>
                        <tr class="cmt-cont">
                            <td class="cmt-cont-l">&nbsp;</td>
                            <td class="cmt-cont-m">
                <form name="cmt-post-reply" onsubmit="oCmtsBx_groups_images382.submitComment(this); return false;">
                <input type="hidden" name="CmtParent" value="0" />
                <input type="hidden" name="CmtType" value="text" />
                <div class="cmt-post-reply-text"><textarea name="CmtText"  tinypossible="true"  ></textarea></div>
                <div class="comment_add_ons">
                <div class="cmt-post-reply-video"></div>
                    <div class="cmt-post-reply-post"><input type="submit" value="Post Comment" />
                    <a href="javascript:void(0)" onclick="window.open('http://dev2.mytikibar.com/modules/?r=simple_messenger/get_operation/help','_blank','width=580,height=520,left=200,top=100,copyhistory=no,directories=no,menubar=no,location=no,resizable=no,scrollbars=yes')" title="Smiley Codes">
                    <img src="http://dev2.mytikibar.com/templates/base/images/icons/info.gif" width="14" height="14" border="0" /></a></div> </div></form></td>
                            <td class="cmt-cont-r">&nbsp;</td>
                        </tr>
                        <tr class="cmt-foot">
                            <td class="cmt-foot-l">&nbsp;</td>
                            <td class="cmt-foot-m">&nbsp;</td>
                            <td class="cmt-foot-r">&nbsp;</td>
                        </tr>
                    </table>
                </div></div><div class="cmts"><ul class="cmts"><li id="cmt76" class="cmt cmt-mine"><div class="cmt-cont"><div class="thumbnail_block" style="float:left;">
    <div class="thumbnail_image" style="width:36px;height:36px;">
        <a href="http://dev2.mytikibar.com/admin" onmouseover="javascript:startUserInfoTimer( 1, $(this).find('.sys-online-offline:first') )" onmouseout="javascript:stopUserInfoTimer(1)">
            <img src="http://dev2.mytikibar.com/templates/tmpl_MyTikiBar/images/spacer.gif" style="background-image:url(http://dev2.mytikibar.com/modules/boonex/avatar/data/images/33i.jpg);" width="32" height="32" alt="admin" title="admin" />
            <img src="http://dev2.mytikibar.com/templates/base/images/icons/sys_status_online.png" alt="Online" title="Online" class="sys-online-offline" onclick="showFloatUserInfo(1, $(this)); return false;" width="12" height="12" />
    <!-- [begin] membership level icon (modzzz) -->
   
    <!-- [end] membership level icon (modzzz) -->           
        </a>
    </div>   


    <div class="thumb_username" ><a href="http://dev2.mytikibar.com/admin"></a></div>
</div><table class="cmt-balloon"><tr class="cmt-head"><td class="cmt-head-l">&nbsp;</td><td class="cmt-head-m"><a href="http://dev2.mytikibar.com/admin" class="cmt-author">admin</a> wrote <span class="cmt-posted-ago">12 Hours Ago</span></td><td class="cmt-head-r">&nbsp;</td></tr><tr class="cmt-cont" >
                <td class="cmt-cont-l">&nbsp;</td>
                <td class="cmt-cont-m">
                    <div class="cmt-mood">0</div>
                    <div class="cmt-body"><p>1st comment</p></div>
                </td>
                <td class="cmt-cont-r">&nbsp;</td></tr><tr id="cmt-jp-76" class="cmt-jp"><td class="cmt-cont-l">&nbsp;</td><td class="cmt-cont-m"><a class="cmt-comment-manage-edit" title="Edit" href="javascript:void(0)" onclick="oCmtsBx_groups_images382.cmtEdit(this, '76'); return false;">Edit</a>&nbsp;<a class="cmt-comment-manage-delete" title="Remove" href="javascript:void(0)" onclick="oCmtsBx_groups_images382.cmtRemove(this, '76'); return false;">Remove</a></td><td class="cmt-cont-r">&nbsp;</td></tr><tr class="cmt-foot"><td class="cmt-foot-l">&nbsp;</td><td class="cmt-foot-m">&nbsp;</td><td class="cmt-foot-r">&nbsp;</td></tr></table><div class="cmt-replies">&nbsp;</div><div class="clear_both">&nbsp;</div></div></li></ul></div></div>
<!-- tinyMCE gz -->   
<script type="text/javascript" src="http://dev2.mytikibar.com/plugins/tiny_mce/tiny_mce_gzip.js"></script>
<script type="text/javascript">
    tinyMCE_GZ.init({
        themes     : "advanced",
        skin       : "mytikibar",       
        height     : "480",
        plugins    : "inlinepopups,emotions,advimage,embed",
        languages  : "en",
        disk_cache : true,
        debug      : false
        /* MYTB  Micro */
    });

    if (window.attachEvent)
        window.attachEvent( "onload", InitTiny );
    else
        window.addEventListener( "load", InitTiny, false);

    function InitTiny() {
        tinyMCE.init({
            convert_urls : false,
            height: "480",
            mode : "specific_textareas",
            theme : "advanced",
            skin : "mytikibar",
            plugins: "inlinepopups,emotions,advimage,embed",

            delta_height: -9, // just for correct sizing

            editor_selector : /(group_edit_html|story_edit_area|classfiedsTextArea|blogText|comment_textarea|form_input_html)/,

            theme_advanced_buttons1 : "emotions,image,embed",
            theme_advanced_buttons2 : "",
            theme_advanced_buttons3 : "",
            theme_advanced_toolbar_location : "top",
            theme_advanced_toolbar_align : "center",
            extended_valid_elements : "object[align<bottom?left?middle?right?top|archive|border|class|classid"
                                       +"|codebase|codetype|data|declare|dir<ltr?rtl|height|hspace|id|lang|name"
                                       +"|onclick|ondblclick|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove"
                                       +"|onmouseout|onmouseover|onmouseup|standby|style|tabindex|title|type|usemap"
                                       +"|vspace|width],"
                                       +"iframe[class|src|frameborder=0|alt|title|width|height|align|name],"
                                     +"a[name|href|title],"
                                     +"img[class|src|border=0|alt|title|hspace|vspace|width|height|align|name],"
                                     +"hr[class|width|size|noshade],"
                                     +"font[face|size|color|style],"
                                     +"span[class|align|style]",
           
            entity_encoding : "raw",

            paste_use_dialog : false,
            paste_auto_cleanup_on_paste : true,
            paste_convert_headers_to_strong : false,
            paste_strip_class_attributes : "all",
            paste_remove_spans : false,
            paste_remove_styles : false,
          
        });
    }
</script>
<!-- /tinyMCE -->
            <script  type="text/javascript">
                    var oCmtsBx_groups_images382 = new BxDolCmts({
                    sObjName : 'oCmtsBx_groups_images382',
                    sBaseUrl : 'http://dev2.mytikibar.com/',
                    sSystem : 'bx_groups_images',
                    sSystemTable: 'bx_groups_images_cmts',
                    iAuthorId: '1',
                    iObjId : '382',
                    sOrder : 'desc',
                    sDefaultErrMsg : 'Error occurred',
                    sConfirmMsg : 'Are you sure?',
                    sAnimationEffect : 'slide',
                    sAnimationSpeed : '2000',
                    isEditAllowed : 1,
                    isRemoveAllowed : 1,
                    sTextAreaId: 'cmtBxGroupsImagesTextAreaParent',
                    iGlobAllowHtml: 1,
                    iSecsToEdit : 90});
                    oCmtsBx_groups_images382.oCmtElements = {
'CmtParent' : { 'reg' : '/^[0-9]+$/', 'msg' : "bad comment parent id" },
'CmtText' : { 'reg' : '/^.{3,2048}$/m', 'msg' : "Please enter 3-2048 characters" },
'CmtMood' : { 'reg' : '/^-?[0-9]?$/m', 'msg' : "You need to select the mood" }
};
oCmtsBx_groups_images382.createEditor(0, $('#cmts-box-bx_groups_images-382> .cmt-reply form [name=CmtText][tinypossible=true]'), true);
</script>

So everything is there.

What's happening in the console is this...

http://dev2.mytikibar.com/undefined/tiny_mce_gzip.php?js=true&diskcache=true&core=true&suffix=&themes=advanced&plugins=inlinepopups%2Cemotions%2Cadvimage%2Cembed&languages=en

I don't know why I am getting undefined there.

Figured out the undefined.  That's fixed, I still have no joy with getting tinyMCE to initialize in the block.

:(

Maybe TinyMCE does not see the textarea as a textarea it is suppose to init with.

Probably you need to reinitialize tinymce again.

Take a look here http://stackoverflow.com/questions/4651676/how-do-i-remove-tinymce-and-then-re-add-it

I've got it kind of working, but I have to initialize all the tinyMCE scripts outside the HTML I am inserting.

Apparently in the function getHtmlData, there is a way to create a callback to start the javascript I just inserted.

I cannot find anywhere what the proper format is for that parameter to make it work.

I need to perform the callback InitTiny() and I think it will work.

getHtmlData('groupsPhotoCmt',sUrl+iId,'function() {InitTiny();}','post');

But sadly, it doesn't.  The code is clearly inside the div that is inserted in the block.

It works with the proper parameters 1st time it's loaded.  When I go to the next image, it just loads the default tinyMCE inside the div.

I just am not that strong in understanding the DOM inside a browser.

I have this working, I will post code changes tonite.

Well, I got it to work.

1. BACKUP your site!

2. Do this on a test site, NOT your live site!

3. It works for me.  Your mileage may vary.

4. You MAY need to use firebug and track down any errors if you have issues.

5. TinyMCE with D7.0.9 code is 3.3.9.4, D 7.1.4 contains 3.5.8, this is what I used. 3.3.9.4 does NOT work.

For those who are curious...

DATABASE Changes

copy from bx_groups_cmts to bx_groups_images_cmts

copy from bx_groups_cmts_track to bx_groups_images_cmts_track

in bx_groups_images add Comments_count row

copy table containing bx_groups to bx_groups_images in sys_objects_cmts

change the following fields in bx_groups_images

 ObjectName     -> bx_groups_images
 TableCMts      -> bx_groups_images_cmts
 TableTrack     -> bx_groups_images_cmts_track
 TriggerTable   -> bx_groups_images
 TriggerFieldId -> media_id

in the file /inc/js/functions.js find function getHTMLdata

edit

  if (undefined != method && (method == "post" || method == "POST")) {

to this

   if (undefined != method && (method == "post" || method == "POST") && callback != 'groups') {

edit

  } else {
        $block.load(url + "&_r=" + Math.random(), function () {

to this


       } else if(callback =="groups"){
          $.post(url, function (data) {
            $block.html(data);
            InitTiny();
        });
  
   } else {
        $block.load(url + "&_r=" + Math.random(), function () {

the file /templates/base/entry_view_block_images

<div>
    <div id="__prefix__images_title_curr" class="bx_sys_block_images_title_curr">
        __title__
    </div>
    <div id="__prefix__images_curr" class="bx_sys_block_images_curr" >
        <img title="__title__" alt="___title__" src="__image_url__" />
        <input type="hidden" name="image_id" value="__base_id__">
        <div id="groupsPhotoRate" class="groupsPhotoRate" ></div>
      
    </div>
    <div id="__prefix__images_icons" class="bx_sys_block_images_icons">
        <bx_repeat:images_icons>
            <div class="sys_icon"><img alt="__image_url__" title="__title__" src="__icon_url__" />
            <input type="hidden" value="__id__" name="image_id">
            </div>
        </bx_repeat:images_icons>
        <div class="clear_both"></div>
 
    </div>
</div>

<div id="groupsPhotoCmt" class="groupsPhotoCmt" ></div>

<script type="text/javascript" src="__plugins__tiny_mce/tiny_mce_gzip.js"></script>
<script type="text/javascript" src="__root__inc/js/classes/BxDolCmts.js"></script>
<link href="/templates/YOURTEMPLATE/css/cmts.css" rel="stylesheet" type="text/css" />

                  
    <script type="text/javascript">
        $(document).ready(function() {
                bx_center_content ('#__prefix__images_icons', '.sys_icon');
                $('#__prefix__images_icons > .sys_icon > img').bind('click', function () {
                    var e = $(this);
                    $('#__prefix__images_title_curr').html(e.attr('title'));
                    $('#__prefix__images_curr>img').attr('src', e.attr('alt'));
                    $('#__prefix__images_curr>img').attr('title', e.attr('title')).attr('alt', e.attr('title'));
                    iThisId = $(this).parent().find('input[type=hidden]').val();
                    $('.bx_sys_block_images_curr').find('input[type=hidden]').val(iThisId);                  
                    iId = $(this).parent().find('input[type=hidden]').val();
                    getHtmlData('groupsPhotoCmt','__baseUrl__GetPhotoCmts/'+iId,'groups','post');
                });
        });
     
         $(document).ready(function() {     
             getHtmlData('groupsPhotoCmt','__baseUrl__GetPhotoCmts/'+__base_id__,'groups','post');
            });
    </script>

NOTICE the variable YOURTEMPLATE!  I have not figured out how to grab that yet.


in the file /modules/boonex/groups/BxGroupsModule.php

add this function below any function around line 200

    function actionGetPhotoCmts($iId=0){      
        bx_groups_import('Cmts');  
        $o = new BxGroupsCmts ('bx_groups_images', $iId);
        if (!$o->isEnabled()) return '';
        echo $o->getCommentsFirst();
}

/inc/classes/BxDolTwigPageView.php

find function _blockPhoto

around line 101 find

               $aVars['image_url'] = $aImageFile['file'];
                $aVars['title'] = $aImageFile['title'];
ADD

               $aVars['plugins'] = $GLOBALS['site']['plugins'];
                $aVars['root']    = BX_DOL_URL_ROOT;
                $aVars['base_id'] = $iMediaId;
                $aVars['baseUrl'] = $sPageUrl = $GLOBALS['site']['url'].$this->_oConfig->getBaseUri();

around line 112 find

           $aVars['bx_repeat:images_icons'][] = array (
                'icon_url'     => $aImageIcon['file'],
                'image_url' => $aImageFile['file'],
                'title'     => $aImageIcon['title'],
add

               'id'         => $iMediaId,

Have fun!