Monitor Reply

Support

Magic Tabs Formidable conflict

Permalink Browser Info Environment October 14, 2014 at 7:38 PM

Hi team,

Just wanted to say that I really like your block however I've noticed that there is a conflict between your block (Magic Tabs) and another block called Formidable.

Essentially the main issue is that after placing the formidable form within a tab then form element 'file upload' fails to render.

Any help resolving this issue would be greatly appreciated.

Thanks!

Type:	Ticket
Status:	Archived

JohntheFish replied on Oct 15, 2014 at 5:10 am Permalink Reply

Is the upload field in the first tab or a subsequent tab? The reason I ask is that some scripts do not render properly when hidden (for example, Google Maps on older c5 cores - that block was fixed since 5.6.1).

An easy test for the above is to create a page with the upload form block and no magic tabs, but in block design set it to display:none. Then after the page is rendered use the developer console to remove the display:none style from the block.

If it shows the same symptoms with no magic tabs involved, that will confirm it is the same hidden render issue.

If you can you post a link that demonstrates the problem I can have a look.

John

bashton replied on Oct 15, 2014 at 6:22 am Permalink Reply

As far as I can tell the issue occurs even if the form is not located within tabs. Seems to be the upload file button only appears once I completely remove the tabs from the area.

JohntheFish replied on Oct 15, 2014 at 6:28 am Permalink Reply

What happens if it is in a different area?

bashton replied on Oct 15, 2014 at 6:43 am Permalink Reply

Same problem the file upload button just disappears.

bashton replied on Oct 15, 2014 at 6:45 am Permalink Reply

For the record I'm using Magic Tabs v 1.1.0.1 and Formidable v 2.0.11

bashton replied on Oct 15, 2014 at 6:47 am Permalink Reply

Actually my mistake if I move the tabs to a different area it does seem to work.

JohntheFish replied on Oct 15, 2014 at 6:57 am Permalink Reply

Thanks, that gives me some ideas.

Within an area, Magic tabs uses javascript to look for tab markers then slices up the area based on the tab markers it finds. My guess is that whatever formidable uses to show an upload button is sensitive to the area being sliced up into tabs.

Do you know if Formidable uses a variation of the trick in this howto?
http://www.concrete5.org/documentation/how-tos/developers/style-a-f...

If you look in the developer console, is the file upload element there behind the scenes?

Can you give me a URL to look at?

bashton replied on Oct 15, 2014 at 7:08 am Permalink Reply

When you click Upload File it seems to making an ajax call to a file located within 'tools' which is then being routed to a function within the block controller called upload.

Below is an extract from a file called fileupload.php which is located within models/formidable/element/fileupload.php and which I believe is the function used to generate the form element.

if (!empty($this->value))
      {
         $i = 0;
         $_input .= '<div class="ax-uploader" id="formidable_uploaded_files_'.$this->elementID.'">';
         $_input .= '<fieldset>';
         $_input .= '<ul class="ax-file-list">';
         foreach ((array)$this->value as $file)
         {
            $_input .= '<li id="file_'.$i.'">';
            $_input .= '<a class="ax-prev-container ax-filetype-'.$file['ext'].'">';
            if ($file['ext'] == 'jpg' || $file['ext'] == 'gif' || $file['ext'] == 'png')
               $_input .= $image->outputThumbnail(DIR_FILES_UPLOADED.'/tmp/formidable/'.$this->elementID.'/'.$file['name'], 40, 40, '', true); 
            $_input .= '</a>';
            $_input .= '<div class="ax-details">';
            $_input .= '<div class="ax-file-name">'.$file['name'].'</div>';

Viewing 15 lines of 32 lines. View entire code block.

 
if (!empty($this->value))
      {
         $i = 0;
         $_input .= '<div class="ax-uploader" id="formidable_uploaded_files_'.$this->elementID.'">';
         $_input .= '<fieldset>';
         $_input .= '<ul class="ax-file-list">';
         foreach ((array)$this->value as $file)
         {
            $_input .= '<li id="file_'.$i.'">';
            $_input .= '<a class="ax-prev-container ax-filetype-'.$file['ext'].'">';
            if ($file['ext'] == 'jpg' || $file['ext'] == 'gif' || $file['ext'] == 'png')
               $_input .= $image->outputThumbnail(DIR_FILES_UPLOADED.'/tmp/formidable/'.$this->elementID.'/'.$file['name'], 40, 40, '', true); 
            $_input .= '</a>';
            $_input .= '<div class="ax-details">';
            $_input .= '<div class="ax-file-name">'.$file['name'].'</div>';
            $_input .= '<div class="ax-file-size">'.$this->convert_size($file['size']).'</div>';
            $_input .= '</div>';
            $_input .= '<div class="ax-toolbar">';
            $_input .= '<a href="javascript:;" class="ax-file-remove" onclick="ccmFormidableUploaderDropFile('.$this->elementID.', '.$i.');"><span>'.t('Delete').'</span></a>';
            $_input .= '</div>';
            $_input .= $form->hidden($this->handle.'[999'.$i.'][name]', $file['name']);
            $_input .= $form->hidden($this->handle.'[999'.$i.'][ext]', $file['ext']);
            $_input .= $form->hidden($this->handle.'[999'.$i.'][size]', $file['size']);
            $_input .= '</li>';
            $i++;
         }
         $_input .= '</ul>';
         $_input .= '</fieldset>';
         $_input .= '</div>';
      }
 
      $this->addJavascript("if(typeof window.ccmFormidableUploaderInit == 'function') ccmFormidableUploaderInit('".$this->elementID."');");
 
      $this->setAttribute('input', $_input);

Hope this helps!

JohntheFish replied on Oct 15, 2014 at 8:02 am Permalink Reply

I dont see anything in that code that would be upset by the area being sliced up. It should all be within one tab with its DOM and events intact, so should continue to behave.

When the page is rendered and the tabs initialised, can you look in the developer console elements tab and see if the elements output by the code with associated hidden elements are still there (and just not showing), or are they missing completely?

bashton replied on Oct 15, 2014 at 11:15 pm Permalink Reply

So I've inspected the dom before and after adding the magic tabs block and here is the result i get:

Before adding magic tabs:

<div class="fileupload">
                                                            <div name="submission-file-upload-8" data-allowed_global_extensions="flv, jpg, gif, jpeg, ico, docx, xla, png, psd, swf, doc, txt, xls, xlsx, csv, pdf, tiff, rtf, m4a, mov, wmv, mpeg, mpg, wav, 3gp, avi, m4v, mp4, mp3, qt, ppt, pptx, kml, xml, svg, webm, ogg, ogv" data-allowed_extensions="jpg, gif, jpeg, png, tiff, docx, doc, xls, xlsx, csv, pdf" data-ccm_token="1413428944:b845b8c6fde0767f075b727d1643b154" data-current_files="0" data-max_files="5" data-min_files="5" data-uploadername="submission-file-upload-8" data-uploaderid="8" class="ccm_formidable_upload ax-uploader" id="formidable_uploader_8"><div class="ax-main-container"><h5 class="ax-main-title">Select Files or Drag&Drop Files</h5><a title="Add files" class="ax-browse-c ax-button"><span class="ax-plus-icon ax-icon"></span> <span class="ax-text btn">Add files</span><input type="file" name="ax_file_input" class="ax-browse" multiple=""></a><a title="Upload all files" class="ax-upload-all ax-button"><span class="ax-upload-icon ax-icon"></span> <span class="ax-text btn">Start upload</span></a><a title="Remove all" class="ax-clear ax-button"><span class="ax-clear-icon ax-icon"></span> <span class="ax-text btn">Remove all</span></a><div class="ax-extensions">Allowed extensions: jpg, gif, jpeg, png, tiff, docx, doc, xls, xlsx, csv, pdf</div><ul class="ax-file-list"></ul></div></div> 
                                                        </div>

After adding magic tabs:

<div class="fileupload">
                                                            <div name="submission-file-upload-8" data-allowed_global_extensions="flv, jpg, gif, jpeg, ico, docx, xla, png, psd, swf, doc, txt, xls, xlsx, csv, pdf, tiff, rtf, m4a, mov, wmv, mpeg, mpg, wav, 3gp, avi, m4v, mp4, mp3, qt, ppt, pptx, kml, xml, svg, webm, ogg, ogv" data-allowed_extensions="jpg, gif, jpeg, png, tiff, docx, doc, xls, xlsx, csv, pdf" data-ccm_token="1413429100:e818ccde64e96348f22b9d65624a92f0" data-current_files="0" data-max_files="5" data-min_files="5" data-uploadername="submission-file-upload-8" data-uploaderid="8" class="ccm_formidable_upload ax-uploader" id="formidable_uploader_8"></div> 
                                                        </div>

JohntheFish replied on Oct 16, 2014 at 4:42 am Permalink Reply

Looks like the div with the class ax-main-container and all its contents being removed. But I don't know why that could be happening. There is nothing about it that suggests MT would be stripping that out. I will try adding similar markup to a test site and see what MT does with it.

One thing that can throw MT out is mismatched tags, perhaps a missing /div elsewhere in the page template. I expect you have already checked that, but perhaps you could double check to make sure.

Have you asked a similar question on the support for Formidable?

I have reformatted the HTML to make it easier to read, posted here for convenience:

<div class="fileupload">
   <div name="submission-file-upload-8"
       data-allowed_global_extensions=
       "flv, jpg, gif, jpeg, ico, docx, xla, png, psd, swf, doc, txt, xls, xlsx, csv, pdf, tiff, rtf, m4a, mov, wmv, mpeg, mpg, wav, 3gp, avi, m4v, mp4, mp3, qt, ppt, pptx, kml, xml, svg, webm, ogg, ogv"
       data-allowed_extensions=
       "jpg, gif, jpeg, png, tiff, docx, doc, xls, xlsx, csv, pdf"
       data-ccm_token=
       "1413428944:b845b8c6fde0767f075b727d1643b154"
       data-current_files="0"
       data-max_files="5"
       data-min_files="5"
       data-uploadername="submission-file-upload-8"
       data-uploaderid="8"
       class="ccm_formidable_upload ax-uploader"
       id="formidable_uploader_8">

Viewing 15 lines of 39 lines. View entire code block.

 
<div class="fileupload">
   <div name="submission-file-upload-8"
       data-allowed_global_extensions=
       "flv, jpg, gif, jpeg, ico, docx, xla, png, psd, swf, doc, txt, xls, xlsx, csv, pdf, tiff, rtf, m4a, mov, wmv, mpeg, mpg, wav, 3gp, avi, m4v, mp4, mp3, qt, ppt, pptx, kml, xml, svg, webm, ogg, ogv"
       data-allowed_extensions=
       "jpg, gif, jpeg, png, tiff, docx, doc, xls, xlsx, csv, pdf"
       data-ccm_token=
       "1413428944:b845b8c6fde0767f075b727d1643b154"
       data-current_files="0"
       data-max_files="5"
       data-min_files="5"
       data-uploadername="submission-file-upload-8"
       data-uploaderid="8"
       class="ccm_formidable_upload ax-uploader"
       id="formidable_uploader_8">
      <div class="ax-main-container">
         <h5 class="ax-main-title">
            Select Files or Drag&Drop Files
         </h5><a title="Add files"
             class="ax-browse-c ax-button"> <span class=
             "ax-text btn">Add files</span> <input type=
             "file"
               name="ax_file_input"
               class="ax-browse"
               multiple="multiple" /></a> <a title=
               "Upload all files"
             class="ax-upload-all ax-button">
             <span class="ax-text btn">Start
             upload</span></a> <a title="Remove all"
             class="ax-clear ax-button"> <span class=
             "ax-text btn">Remove all</span></a>
         <div class="ax-extensions">
            Allowed extensions: jpg, gif, jpeg, png,
            tiff, docx, doc, xls, xlsx, csv, pdf
         </div>
         <ul class="ax-file-list"></ul>
      </div>
   </div>
</div>

<div class="fileupload">
   <div name="submission-file-upload-8"
       data-allowed_global_extensions=
       "flv, jpg, gif, jpeg, ico, docx, xla, png, psd, swf, doc, txt, xls, xlsx, csv, pdf, tiff, rtf, m4a, mov, wmv, mpeg, mpg, wav, 3gp, avi, m4v, mp4, mp3, qt, ppt, pptx, kml, xml, svg, webm, ogg, ogv"
       data-allowed_extensions=
       "jpg, gif, jpeg, png, tiff, docx, doc, xls, xlsx, csv, pdf"
       data-ccm_token=
       "1413429100:e818ccde64e96348f22b9d65624a92f0"
       data-current_files="0"
       data-max_files="5"
       data-min_files="5"
       data-uploadername="submission-file-upload-8"
       data-uploaderid="8"
       class="ccm_formidable_upload ax-uploader"
       id="formidable_uploader_8"></div>

Viewing 15 lines of 16 lines. View entire code block.

 
<div class="fileupload">
   <div name="submission-file-upload-8"
       data-allowed_global_extensions=
       "flv, jpg, gif, jpeg, ico, docx, xla, png, psd, swf, doc, txt, xls, xlsx, csv, pdf, tiff, rtf, m4a, mov, wmv, mpeg, mpg, wav, 3gp, avi, m4v, mp4, mp3, qt, ppt, pptx, kml, xml, svg, webm, ogg, ogv"
       data-allowed_extensions=
       "jpg, gif, jpeg, png, tiff, docx, doc, xls, xlsx, csv, pdf"
       data-ccm_token=
       "1413429100:e818ccde64e96348f22b9d65624a92f0"
       data-current_files="0"
       data-max_files="5"
       data-min_files="5"
       data-uploadername="submission-file-upload-8"
       data-uploaderid="8"
       class="ccm_formidable_upload ax-uploader"
       id="formidable_uploader_8"></div>
</div>

JohntheFish replied on Oct 16, 2014 at 5:05 am Permalink Reply 2 Attachments

I have pasted the 'before' html into an html block amongst a set of tabs and it renders correctly and is not distorted by the tabs.

So with the formidable markup, but without the formidable JavaScript, the tabs and form controls render correctly with nothing removed.

I suspect the formidable uploader script does some DOM manipulation to create the uploader target, and that manipulation becomes confused by the manipulation that Magic Tabs does.

bashton replied on Oct 16, 2014 at 7:07 pm Permalink Reply

I've sent a message to the formidable developer hopefully he has some ideas.

If you want to weight in please feel free to do so.

You can find a link to the discussion below.
http://www.concrete5.org/marketplace/addons/formidable/support/form...

ConcreteCMS replied on Dec 22, 2014 at 12:55 pm Permalink Reply

Attention: Since there has been no activity on this issue for two weeks, this issue has been automatically archived.

To re-open this issue, reply to this message.

Magic Tabs (c5.6)

Support

Magic Tabs Formidable conflict

Issue Reply

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

Request Refund

Code

Delete Post