Forums

bogus

Hey all.

Now, what I want to accomplish is to load only one post at a time into a div. I made a graphic to show what I hve in mind. Look at ist here. Basically if you click on one of the red containers (blogposts) it should load that particular post into the grey box on top. My mockup is this.

I use this script for the ajax part:

  <script>
  jQuery(document).ready(function(){
   // ajax pagination
   jQuery('.box a').live('click', function(){ // if not using wp_pagination, change this to correct ID
   var link = jQuery(this).attr('href');
   // #main is the ID of the outer div wrapping your posts
   jQuery('#main').html('<div><h2>Loading...</h2></div>');
   // #entries is the ID of the inner div wrapping your posts
   jQuery('#main').load(link)
   });
  }); // end ready function
  </script>

I really do't know how to get it to work. Any hints?

Help is well appreciated!

jamy_za

I've created a small example:

Example

Zip

Let me know if you need any explaining, etc.

bogus

wow thanks jamy!

do you think your code works with wordpress? I wonder if this line

$content.load(link + ' .stuff', function(data){

need something wordpress specific (permalink) so it knows what to load?

jamy_za

Nothing extra needs to be added for it to work with Wordpress.

.stuff is a class it is referencing. It is pulling out all the HTML within .stuff on the target page and loading it into .content on the current page. So those classes can be changed and swapped out to IDs, etc.

If you're pointing to the correct class/ids/elements it should just work.

bogus

just to doublecheck the way it works:

after I click on a permalink it will fetch the data from single.php and fill the container div with that?

i'm a noob :(

jamy_za

Assuming that the permalink has the .more class, yes. Just give it a shot, it won't break anything :p and if it does it will be a step forward in getting it to work.

(If it does completely break, the permalink will just link through to the page like normal)

bogus

mhh. I'm fiddling around with your mockup and trying to get it in the direction i have in mind.

now i've changed the position of the link, so it's positioned outside the div i want my content to appear in. That would resemble the situation i have outlined. boom, it won't work anymore.

Have I linked everything together correctly?

bogus

the code thing is broken somehow. I put the code on codepen here.

jamy_za

Hmm, ok I see what the problem is. Give an example of the markup and I'll get the js to work with that. Make sure the markup includes exactly how the markup would be (including multiple articles if you want that).

bogus

yay! here's my index.php markup

  <?php get_header(); ?>
  <div id="main"></div>
  <?php while (have_posts()) : the_post(); ?>
          <div class="archive">
              <div class="masonry">
                  <div class="box">
                  <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                  <?php the_time('jS F Y'); ?>
                  <?php the_content(''); ?>

                      <a href="<?php the_permalink(); ?>#comments"><?php comments_number('No Comments', '1 Comment', '% Comments' );?></a>
                  </div>
              </div>
          </div>
  <?php endwhile; ?>

  <?php get_footer(); ?>

bogus

its the code from my mockup which you can see here.

jamy_za

This /should/ work:

http://codepen.io/joe/pen/FJLge

note: I wrapped the <?php the_content(); ?> stuff in a <div class="content"> element.

bogus

ugs, the code paste in this forum is awful! In my code there was an additional div (#main), which should be the container element. the codebox ate it.

here it is on codepen. sorry jamy!

jamy_za

No change required from the js. Are there problems?

bogus

I tried to modify it. and it doesn't work. :(

as i've shown in my graphic in the first post, #main is my container, the grey boxes below are the posts that are put out by wordpress. I only need to get the single.php to open in #main. but therefore the link can not be inside #main, as i understand this.

phuu ajax is really hard to get to work.

jamy_za

Try this: http://codepen.io/joe/pen/FJLge I've updated it to add the content into #main instead of .content

bogus

yay! thanks so much jamy!

jamy_za

Yay :p no problem.

treehouse : what would you like to learn today?

Forums

[Solved] A little Ajax+Wordpress help needed