CouchCMS Forum Bug Reporting and Troubleshooting
Problems, need help? Have a tip or advice? Post it here.
13 posts Page 1 of 2
Post a reply
Previous 1, 2 Next

Browser-Specific Inline Editor/JQuery Clash

User avatar
tim
Registered User
I'm really pleased with the new on-page editing feature of Couch. What a great treat to add on to v1.4! On-page editing makes a very usable interface for the least technically sophisticated users, and your implementation with its two types of editing - popup and inline - seems just right.

It was really easy to convert a site to on-page editing and I'm also adding some additional on-page admin tasks for really full-featured front-facing site management.

I ran into an unfortunate behavior I wanted to let you know about. My site uses JQuery Tools (http://jquerytools.org) for several UI features, including tabbed navigation. The "pages" of my site are all on the same page. As you navigate around the site, the page you're on is shown and the other panes are hidden.

In Firefox, on-page editing works like a charm. I can navigate from page to page and the editable regions in all of the different panes work as expected.

In Chrome, Safari, and Midori, however, the starting page works normally, but when I switch to another tab the inline editor doesn't work. There is no yellow border, and if I click on the area, the editor appears but it's icons are greyed out and it doesn't edit. The pop-up editor works normally.

If I refresh the page, then the editor works on the current page, but none of the others. So it still works. But you have to refresh the browser on the page you want to edit first. It's just a little clumsy and inelegant.

I imagine there's some sort of javascript or DOM conflict going on. I don't know if there's anything that can be done about it, but I wanted to let you know.

EDIT:
After a little more sleuthing, I discovered that non-working editor regions carry the style
Code: Select all
h1[Attributes Style] {-webkit-user-modify: read-only;}

while the working sections have
Code: Select all
h1[Attributes Style] {-webkit-user-modify: read-write; word-wrap: break-word; -webkit-line-break: after-white-space;}


Adding the "good" styles to the element inline showed that the styles were applied (according to the inspector), but had no effect on the page. So far, I've had no luck overriding this webkit style.

Re: Browser-Specific Inline Editor/JQuery Clash

User avatar
cheesypoof
Registered User
Hi tim,

Thank you for the on-page editing feedback. This feature should ideally still function even if the content is not visible when the page loads. I'll have to take a look at this next week, but it would be helpful if you could in the meantime prepare a reduced test case for me - this way I can jump right in to troubleshooting.

Re: Browser-Specific Inline Editor/JQuery Clash

User avatar
tim
Registered User
This test page demonstrates the problem. Any editor that is initially hidden gets the style "-webkit-user-modify: read-only;" applied to it, breaking the editor.

Code: Select all
<?php require_once( 'couch/cms.php' ); ?>

<cms:template title='test'>
   <!-- Page 1 -->
   <cms:editable name='first' type='text' >
      This is the first pane.</cms:editable>
   <!-- Page 2 -->
   <cms:editable name='second' type='text' >
      This is the second pane.</cms:editable>
</cms:template>

<html>
<head><cms:load_edit /></head>

<body>
<a class="change">Change</a>
   <p class="pane" <cms:inline_edit 'first' />><cms:show first /></p>
   <p class="pane" style="display:none;" <cms:inline_edit 'second' />><cms:show second /></p>

<!-- Toggle Between Show and Hide -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
   $(".change").click(function(){
      $(".pane").toggle();
   });
</script>

</body></html>

<?php COUCH::invoke(); ?>

Re: Browser-Specific Inline Editor/JQuery Clash

User avatar
cheesypoof
Registered User
Tim, could you give the following replacement file for 'couch/addons/inline/view/scripts.php' a try? Make sure to backup your original.

Attachment removed.

Re: Browser-Specific Inline Editor/JQuery Clash

User avatar
tim
Registered User
Nice work, cheesypoof! That fixed the issue on my test page, but not on my actual website. I simplified quite a bit for clarity. In real life, the editor is inside of a containing DIV that is hidden. If you wrap the paragraphs on the test page like so, the editor breaks again.

Code: Select all
   <div class="pane"><p <cms:inline_edit 'first' />><cms:show first /></p></div>
   <div class="pane" style="display:none;"><p <cms:inline_edit 'second' />><cms:show second /></p></div>


Thanks,
Tim

Re: Browser-Specific Inline Editor/JQuery Clash

User avatar
cheesypoof
Registered User
Please give this new attachment a try. Thanks.

Attachment removed.

Re: Browser-Specific Inline Editor/JQuery Clash

User avatar
tim
Registered User
I'm sorry, CP. Once again my test page was oversimplified. But it's good that we're covering this intermediate territory, right? I think the difference might be that in real life, my page sets "display:none" dynamically with JQuery.

Here's a test page that more closely replicates the actual situation.
Code: Select all
<?php require_once( 'manage/cms.php' ); ?>

<cms:template title='full-test'>
   <!-- Page 1 -->
   <cms:editable name='home' type='text' >
      This is the Home Page.</cms:editable>
   <!-- Page 2 -->
   <cms:editable name='second' type='text' >
      This is the second pane.</cms:editable>
   <!-- Page 3 -->
   <cms:editable name='third' type='text' >
      This is the third pane.</cms:editable>
   <!-- Page 4 -->
   <cms:editable name='fourth' type='text' >
      This is the fourth pane.</cms:editable>
</cms:template>


<!DOCTYPE html>
<html><head><cms:load_edit /></head>
<body>

<nav>
   <ul class="tabs">
      <li><a href="#">Home</a></li>
      <li><a href="#Page 2">Page 2</a></li>
      <li><a href="#Page 3">Page 3</a></li>
      <li><a href="#Page 4">Page 4</a></li>
   </ul>
</nav>

<div class="panes">
   <!--HOME-->                 
   <article>
      <p <cms:inline_edit 'home' />><cms:show home /></p>
    </article>
    <!--PAGE 2-->                   
    <article>
      <p <cms:inline_edit 'second' />><cms:show second /></p>
     </article>       
   <!--PAGE 3-->                   
   <article>
      <p <cms:inline_edit 'third' />><cms:show third /></p>
    </article>
   <!--PAGE 4-->                  
    <article>
      <p <cms:inline_edit 'fourth' />><cms:show fourth /></p>
    </article>
</div>

<!-- jQuery Tools by Tero Piirainen http://jquerytools.org -->
<script type="text/javascript" src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>

<script type="text/javascript">
$(function() {
   $("ul.tabs").tabs("div.panes > article", {history:true});
});
</script>

</body></html>
<?php COUCH::invoke(); ?>

Re: Browser-Specific Inline Editor/JQuery Clash

User avatar
tim
Registered User
AHA! I found a fix. If I move my script into the head above <cms:load edit />, the problem goes away. I guess the issue is that "display:none" is being set dynamically after the editor is instantiated.

Still, it would be nice not to have to rework my code to accommodate the editor if possible. I tried taking <cms:load edit/> out of the <head> and placing it after the script at the bottom of the page. That worked, too, but the <style> tag outside of the <head> may offend the validator police.

Also, I can imagine a situation where moving the script would not be an option. Using AJAX, for instance, or an event listener.

-Tim

Re: Browser-Specific Inline Editor/JQuery Clash

avatar
KK
Moderator
@tim,
I am glad the problem could be pin-pointed.

Could you please let us know if the solution worked with the original script or whether you had to use cheesypoof's mod?
I tried taking <cms:load edit/> out of the <head> and placing it after the script at the bottom of the page. That worked, too, but the <style> tag outside of the <head> may offend the validator police.
I wouldn't be concerned with this as no validator will ever see the style tag - it is outputted only for the admin.

Finally, may I request you to please use the cms:load_edit tag at the bottom of your page and let us know if everything works as expected?
After your feedback we'll then make the necessary changes to allow using the tag at the new position.

Thanks.

Re: Browser-Specific Inline Editor/JQuery Clash

User avatar
tim
Registered User
Without cheesypoof's mod, changing the position of <cms:load_edit/> to the bottom of the page makes no difference in any of the tests or the live site.

The mod + repositioning <cms:load_edit/> works in all instances.
Post a reply
Previous 1, 2 Next
13 posts Page 1 of 2
Return to Bug Reporting and Troubleshooting