WikiViewer Problems [SOLVED]

1

On Github: https://github.com/solidfly/wikiViewer

currently can’t get it working on Codepen due to MIME types so you would need to download the zip file to view.

There are quite a few issues such as refactoring and layout but, the problem currently is:

When hitting enter after typing your search the page just reloads ?

(!Arggh?! This worked last night and I am not sure what I changed today).

If you hit enter after selecting an autocomplete suggestion the page loads results no problem…

Please help me.

2

Alright. There’s a lot going on here, but let’s focus on your reload problem. First of all, I’ve got your project (mostly) working in Codepen. Go ahead and fork it (also, rename it)

The page reloads because your search input is within a form element. When you trigger form elements, by default the make a POST request to whatever web server you specify and then reload the page. It’s old-school behavior that drove web form submissions before the days of AJAX. All you need to do is prevent that default behavior. There’s a handy method to do this called preventDefault - don’t forget about this one, it’s super important and you’ll be using it a lot. This method lives on the event object that gets passed to every event handler. All you need to do is define the parameter in your handler, like this:

$('#some-thing').on('click', function(event) { // << every event handler gets passed the event object
  event.preventDefault(); // << there it is!
  // do other stuff
});

In the CodePen I supplied, I’ve added the event object and called preventDefault, so your results show as expected. I haven’t done anything to get your autocomplete working, though.

Hope this helps!

3

Yes! This works, thank you!

Indeed. I was thinking I should be able to refactor the searchWiki() into a for loop and assign the results that way. I am also sure the clearPage() could be slimmed down into one line. I attempted these once but got lost. Perhaps there is a whole more that could be done? Or an entirely different approach I am sure?

This works for me locally and I will work on the codePen at some point. It would be interesting to add the autocomplete suggestion automatically highlighted into the input box as browsers do (???). This could be added to the .autocomplete success function but that the whole thing uses jqueryui so I would have to play around with it to see if something breaks.

P. S. If I am on the wrong track with something please do tell me.

BONUS:

I would also like to animate the divs…

onload:

h  h  h  h  h  h
h  h  s  s  h  h
h  h  h  h  h  h
h  h  h  h  h  h
r  r  r  r  r  r (five slim colored rows that will expand upon search)
f  f  f  f  f  f

and then when search is executed divs animate to:

h  h  s  s  h  h
r1  r1 r1  r1  r1
r1  r1 r1  r1  r1
r1  r1 r1  r1  r1
r2  r2 r2  r2  r2
r2  r2 r2  r2  r2
r2  r2 r2  r2  r2
r3  r3 r3  r3  r3
r3  r3 r3  r3  r3
r3  r3 r3  r3  r3
r4  r4 r4  r4  r4
r4  r4 r4  r4  r4
r4  r4 r4  r4  r4
r5  r5 r5  r5  r5
r5  r5 r5  r5  r5
r5  r5 r5  r5  r5
f   f  f   f   f

Any pointers in the right direction to achieve these animations?

4

Think about your animations as being in two different states. One is your finished state, the other is your starting state. Exactly what these states are depends on what you want to animate. If you want elements to fade in, then the starting state is invisible and the finished state is visible. If you want elements to move in from the left, then the starting state is far off the page to the left, and the finished state is whatever you’ve specified as their position. Any time you want to animate an element, you need to make sure that it’s first in its starting state.

Now, you’ve pre-written some elements on the page where data will go (#result1-5). These will need a starting state and a way to reset each element back to that state. I think your clearPage function would be a good spot for that. When you’re filling in those elements, you should be able to animate each one in, bringing it to its finished state.

Check out jQuery’s documentation on effects. Each effect has a counterpart, ie. fadeOut() and fadeIn(). This will make it really easy to get to the starting and finished state.

Later on, you’ll learn some tools and techniques to generate elements rather than hard coding them on your page. I would not encourage you to stop what you’re doing to pursue a template or front end library. Just do the best you can with what you’ve got, but know that there’s a lot of cool things in your future. In fact, generating a page from data is the hottest topic in front end development, and a lot of the big names you may have heard about - React, Angular, Vue - are different ways to tackle this exact problem. There are other, simpler options, too.

Here’s a simple-ish project I did a while ago that makes use of HandlebarsJS for templating. It’s very light weight compared to React et al. Have a peek:

The only parts I want you to really read start on line 14 of the HTML section and lines 107, 151 of the JavaScript. You’ll notice that the HTML seems really small for the amount of data that’s displayed on the page. Line 14 defines a template for each post.

<!-- line 14 -->
<template id="post-template">
   <li class="row posts">
     <a href="https://reddit.com{{permalink}}" class="col-xs-2">
       <img src="{{thumbnail-link thumbnail}}" alt="Thumbnail for the post {{title}}" class="thumbnail img-responsive"/>
     </a>
     <span class="info col-xs-offset-3 col-xs-6">
       <h2>{{{title}}}</h2>
       <p class="author">by {{author}}</p>
     </span>
  </li>
</template>

The stuff surrounded by double curly braces {{}} are spots that will be filled in by the data provided by Reddit. Notice that I am not writing this out for each post I want to display. The JavaScript will handle that.

Line 107 of the JavaScript gets this template has a string. It passes this string to the Handlebars library which is what will replace all of those curly braced variables with the data.

// line 107
const postTemplate = Handlebars.compile($("#post-template").html());

postTemplate is a function that will accept data and return the markup.

Much later, after I make an AJAX call to Reddit and receive a good response, I can give this template some data.

// line 151
response.posts.forEach(post => $posts.append(postTemplate(post))); // << using the postTemplate function

Simply, for each post in the response I got, give the post to postTemplate and append the output to the page at $posts (I define this earlier in the script, but that’s not important). Now, if I get 1, 5, 23, or 100 posts, it will work and I won’t have to change a thing about my HTML. I can also clear out all of the posts just by setting the container element’s HTML.

$posts.html('');

Again, this is just meant to show you a slice of the future. If you want to start with Handlebars, there are some Youtube tutorials that are quite good and it’s relatively easy to pick up. It’s not something most companies are looking for, though, so it’s not going to improve your chances of being hired and you’ll probably forget it all when you learn React.

1 Like
5

I have found a few different ways to animate the #header.

These following examples don’t really animate, moreso just move the header to desired position:

Jquery:

$('#header').animate({
      height: $('#header').get(0).scrollHeight
    }, 1500, function(){
      $(this).height('25%');
    });

Pure JS with CSS:

JS:

  document.getElementById('header').classList.toggle("is-active");

CSS: (add “is-active” class):

.header.is-active {
  height: 25%;
}

and add a transition to .header:

transition: height 1000ms;

To really animate what I find works is using JQuery:

$('#header').animate({height: "25%"}, 1500);

But the issue is: After the animation the #header is still taking up the original 80% of the window !!! The header animates up but leaves white space below not allowing following divs to move up and stay below the header. How can I remove this white space?

Please see this codePen for an animation example. You will notice .result1-5 animate down but desired effect isn’t achieved as the white space is still there. I would like the results to follow up with the header as they expand themselves. I do believe what I want to do is called ‘accordian’. I found some libraries that will do it but want to understand the engine before I add the wheels.

You may also notice that before the header animates up it also moves the button slightly left (no idea why).

6

a lot of thanks for the information, that’s super helpful for me as i’m new here and i was also having same problems. thanks again!

1 Like
8

I helpful advice to you. Use githubpages. No need to deal with CodePen. I do my projects locally on my computer then push the github. It is really simple