Custom loop losing its data

1 Views

so I have a custom loop.

Let say there are 5 posts on a single page as below:

Read More

Post 1: 

 Title : Post 1

 Content : Content 1

 Show more button

Post 2: 

 Title : Post 2

 Content : Content 2

 Show more button

and so on….

And the code: 

<div class="title">
    <?php the_title(); ?>
</div>
<div class="content">
    <?php the_content(); ?>
</div>
<button type="button" class="show_me_open">
  Show more button
</button>
<div id="show_me">
   <?php the_title(); ?>
   <?php the_content(); ?>
</div>

So, the title and contents are all different for 5 posts. The popup button (show more button) is from http://dev.vast.com/jquery-popup-overlay/

Problem

Let say you don’t have the popup layout enabled, and use some other ways to show it. Then the title and contents match the original title and content (example below).

However if the title and contents are shown by the popup (show more button), then it only shows the first post’s title and content (example below).

1. Without popup:

Post 1: 

 Title : post 1
 Content: content 1
 Show more button:  
        Title : post 1
        Content: content 1

Post 2: 

 Title : post 2
 Content: content 2
 Show more button:  
        Title : post 2
        Content: content 2

Post 3: 

 Title : post 3
 Content: content 3
 Show more button:  
        Title : post 3
        Content: content 3

With the popup enabled:

Post 1: 

 Title : post 1
 Content: content 1
 Show more button:  
        Title : post 1
        Content: content 1

Post 2: 

 Title : post 2
 Content: content 2
 Show more button:  
        Title : post 1
        Content: content 1

Post 3: 

 Title : post 3
 Content: content 3
 Show more button:  
        Title : post 1
        Content: content 1

I am not sure why it is doing it, but any suggestion would be much appreciated!

Thanks!

EDIT

Js code is pretty simple: 

  $(document).ready(function() {          
    $('#show_me').popup();                  
    });

EDIT 2

It was pointed out to me that one ID was used for all other posts and it was only pulling the first one.

So, I am adding post_id to the button and it will only trigger the div with the same post_id. 

 <?php echo '<button type="button" class="show_me_open" data-post_id="' . esc_attr( $post->id ) . '">' ;?>
    <i class="material-icons royal_setting">settings</i>
<?php echo '</button>';?>

<?php echo '<div class="show_me" data-post_id="' . esc_attr( $post->id ) . '">' ;?>                     
    <?php the_title(); ?>                       
<?php echo '</div>';?>

Now for the jQuery, how can I change it so that only the same post_id with the class of show_me will be targeted?

Thanks!

Post Views: 1

Related posts

1 comment

  1. @Emily, I think the problem is only related to your popup id “show_me”.

    As you mentioned above show_me is a div element for post 1. Similarly you have to give different ids to each post like for post 2 give show_me_2 and so on and after that in your document.ready initialize all popup elements.

    $('#show_me_1').popup();  
$('#show_me_2').popup();  
$('#show_me_3').popup();  
$('#show_me_4').popup();  
$('#show_me_5').popup();

    EDIT-4 Solution

    <script>
$(document).ready(function() { 
    $('.show_me').popup(); //it was #show_me                    
    }); 
</script>
<?php echo '<button type="button" class="show_me_'. esc_attr( $post->id ) .'_open">' ;?>
    Show me open
<?php echo '</button>';?>

<?php echo '<div id="show_me_'. esc_attr( $post->id ) .'" class="show_me">' ;?>                     
    <?php the_title(); ?>                       
<?php echo '</div>';?>

    I added id to div element and add “$post->id” with it. May be this may can solve your issue.

Comments are closed.