Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by ricky james
ricky james
38 Points

Swapping an element with another in WordPress using Jquery

l am trying to replace my navbar with a search form when visitors click on the search anchor. Then get the navbar back when the user click on the cloaw button. However this is not working as expected and end up with a javascript error. Any idea how l can make this work please? the code is below 

  $(function(){
    $('a.search').click(function() {
      $( 'nav.top-bar' ).replaceWith( '<div class="row search-bar"><div class="large-10 columns"><form><input tabindex="1" id="autocomplete" type="search" placeholder="Search Docs: e.g. forms" autocomplete="off" autofocus></form></div><div class="large-2 columns"><img class="close-search" src="<?php echo get_template_directory_uri();?>/img/close.png" alt="Video" ></div</div>' );
      });
    $('img.close-search').click(function() {
      $( 'row.search-bar' ).replaceWith( '<?php get_template_part('_navigation_wp'); ?>' );
    });
  });

1 Answer

Neil Docherty
Neil Docherty
10,418 Points
Neil Docherty
Neil Docherty
10,418 Points

First error I spot is a simple typo... you missed out a > on one of the closing div elements.

Correction:

...ectory_uri();?>/img/close.png" alt="Video" ></div></div>' );

Second error I see is that you are escaping the replaceWith string by using single quotation marks inside other single quotation marks. You need to change one of these sets to double quotation markss like so:

      $( '.row .search-bar' ).replaceWith( '<?php get_template_part("_navigation_wp"); ?>' );
ricky james
ricky james
38 Points

Thanks for spotting that, corrected that but didn't make any change :(

Neil Docherty
Neil Docherty
10,418 Points

What is the error message?

ricky james
ricky james
38 Points

http://imgur.com/6GrBqEF

saying Uncaught SyntaxError: Unexpected token ILLEGAL

Neil Docherty
Neil Docherty
10,418 Points

I've updated the answer... is that any good?