Editing (v7+)

Custom Theme broke Concrete 5's editor

Permalink 1 user found helpful November 23, 2016 at 2:50 PM

I am updating my custom theme to have a hover navigation as well as a slide out navigation for mobile. Both are working. My problems accrued when I went to edit the page via the Concrete 5 editor.

I can select "edit this page"
The edible regions highlight properly
I can click on one of the editable regions to get the small menu.
But when I select one of the options, I get the overlay with the loading icon, and then the page is switched to just the texted (I am a supposing it is just displaying the html page with out css) of what is supposed to be the overlay menu/editor. (Screenshot attached)

This is the mobile sidebar I added.
https://www.adchsm.com/slidebars/help/usage/opening-and-closing-slid...
This is the nesting accordion I added inside the sidebar.
https://codepen.io/anon/pen/mAErWB...

Here is a link to the page with my updated navigation.
http://www.savageriver.com/savageriver/canoes/recreational/pontoon...

Note: I couldn't get the small menu to pop up, when I clicked on one of the edible regions. The nested accordion was using a class called inner, that after changed fixed the problem.

Thanks for any help you can provide. I have been trying to fix this for several days now.

1 Attachment

hutman replied on Nov 23, 2016 at 3:02 pm Permalink Reply

You have two javascript errors, these could possibly be causing issues

Uncaught TypeError: $(...).flexNav is not a function
Uncaught TypeError: $(...).flexslider is not a function

Kershar replied on Nov 23, 2016 at 4:07 pm Permalink Reply

The error is caused from my footer.php file. the code is used in the rest of my site, just not on this page.

<script> 
   $("[role='navigation']").flexNav(); 
</script>
<!--FlexSlider-->
<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider();
  });
</script>
<script> 
   var $buoop = {} 
   $buoop.ol = window.onload; 
   window.onload=function(){ 
       try {if ($buoop.ol) $buoop.ol();}catch (e) {} 
       var e = document.createElement("script");

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

 
<script> 
   $("[role='navigation']").flexNav(); 
</script>
<!--FlexSlider-->
<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider();
  });
</script>
 
<script> 
   var $buoop = {} 
   $buoop.ol = window.onload; 
   window.onload=function(){ 
       try {if ($buoop.ol) $buoop.ol();}catch (e) {} 
       var e = document.createElement("script"); 
       e.setAttribute("type", "text/javascript"); 
       e.setAttribute("src", "http://browser-update.org/update.js"); 
       document.body.appendChild(e); 
   } 
</script>

Would this cause my problem? If so I can move it out of the footer.php file

hutman replied on Nov 23, 2016 at 4:15 pm Permalink Best Answer Reply

Actually I think this is caused because you have 2 versions of jquery being loaded on the page, which could be causing the other two errors I cited. Can you remove the jquery from your header.php and see if that fixes the errors?

Kershar replied on Nov 23, 2016 at 4:20 pm Permalink Reply

This is the header.php

<?php defined('C5_EXECUTE') or die(_("Access Denied.")); ?>
<!DOCTYPE html>
<!--[if IE 8]> <html class="ie8" lang="<?php echo LANGUAGE?>"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="<?php echo LANGUAGE?>"> <!--<![endif]-->
<head>
   <?php Loader::element('header_required'); ?>
   <meta name="viewport" content="width=device-width; initial-scale=1.0" />
   <!--[if lt IE 9]>
      <script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6/html5shiv.min.js"></script>
   <![endif]-->

or are you referring to this code here?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

hutman replied on Nov 23, 2016 at 4:21 pm Permalink Reply

Yes, that second bit, remove that and see if it works. C5 already includes a copy of jquery so you don't need two.

Kershar replied on Nov 23, 2016 at 4:31 pm Permalink Reply

I removed it but it seams to have done nothing. Apparently just some redundant code that in didn't need to be there.

the errors are still there as well

hutman replied on Nov 23, 2016 at 4:33 pm Permalink Reply

There is another duplicate copy of jquery in your page too, it's down toward the footer

<!-- Slidebars -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Kershar replied on Nov 23, 2016 at 4:39 pm Permalink Reply

Fixed!

Thanks a lot!

hutman replied on Nov 23, 2016 at 4:42 pm Permalink Reply

Glad things are working, you still have those original 2 javascript errors on your page that will probably cause problems in the future. You're calling flexNav and flexSlider but not including the js files for those. So you should either include those js files or remove the references to them.

Kershar replied on Nov 23, 2016 at 4:45 pm Permalink Reply

I am planning on phasing them out, but right now the rest of my site is using them. So I don't want to remove them yet.

Forums

Editing (v7+)

Custom Theme broke Concrete 5's editor

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?