How to get a specific value out of a loop in JQuery – wordpress queried post

3 Views

I have a question about being able to get values out of the hidden input boxes in this: 

<?php  $i = 0; $j = 1;?>
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <?php get_template_part( 'content', get_post_format() ); 
        $postid[$i] = get_the_ID();
        echo "<input type='hidden' value='".$postid[$i]."' id='hiddenpostitle".$j."' name='hiddenpostitle'/> ";
        echo "<input type='hidden' value='".$j."' id='hiddenpostnumfield".$j."'/> ";            
    ?>
    <?php 
        $i++;
        $j++;
    ?>
<?php endwhile; endif; ?>

So what this does is draw in all the post and formats them according to WordPress. While each post is looped I create 2 input boxes for each, one with the post id with a incremental variable and one that stores the value of the above input box with an incremental variable. I am making a product overview so I need to be able to access the proper post and have that sent using JSON.

Read More

The part that I am stuck on is the getting the correct post type that was clicked.

Here is my JQuery code so far: 

<script type="text/javascript">
$(function () {
    $('.item-post a').each(function (i) {
        $(this).on("click", function (e) {
            alert(i);

            var num = $('#hiddenpostitle').val();
            alert(num);

            var prodname = $('#hiddenpostitle' + num /* + (i+1)*/).val();

            $.post('overviewcheck-515adfzx8522', {'ProdName': prodname}, function (response) { }, 'json');
        });
    });
    $('.item-post a').colorbox({ opacity: 0.3, href: "../overviewa512454dzdtfa" });
});
</script>

This is not working properly because it will always give me the first post there is because I am not getting the associated product that was clicked.

Example: lets say you click 3 and 1 is first, you will always get 1 even if you click 2 or 3 or 4.

I am really stuck and need help on this. Not to sure how to proceed.

Merry Christmas!

UPDATE:

new Code being used 

    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <div class="post-id-holder">
      <?php get_template_part('content',get_post_format()); ?>
      <div class="post-id-data" post-id="<?php echo get_the_ID(); ?>" post-title="something"></div>
      </div>                        

    <?php endwhile; endif; ?>
<script type="text/javascript">
(document).ready(function() {
   $('.item-post a').click(function(){
    // find the article for the post
    var article  = $(this).parentsUntil('article').parent();
    var post_id = article.attr("id");
    var post_title $('.entry-title a',article).text();
    alert(post_id);
    alert(post_title);


    $.post('overviewcheck-515adfzx8522', 
    { 
    'ProdName': prodname

    },
    function(response) {
    },
    'json'
    );


   $('.item-post a').colorbox({opacity:0.3, href:"../overviewa512454dzdtfa"});
   });
});

ANSWER:

Thanks Matt! 🙂

Here is the code, so if you ever run into this you can use it!

WordPress Queried section: 

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
 <div class="post-id-holder">
 <?php get_template_part('content',get_post_format()); ?>
  <div class="post-id-data" post-id="<?php echo get_the_ID(); ?>" post-title="something">      </div> 
 </div>                     

<?php endwhile; endif; ?>

JQuery Side: 

<script type="text/javascript">
$(document).ready(function() {
 $('.item-post a').click(function(){
    // find the article for the post
        var article  = $(this).parentsUntil('article').parent();
    var post_id = article.attr("id");
    var post_title = $('.entry-title a',article).text();



        $.post('overviewcheck-515adfzx8522', 
                                        { 
        'ProdName': post_title

                                        },
         function(response) {
                                        },
         'json'
        );



       });
    $('.item-post a').colorbox({opacity:0.3, href:"../overviewa512454dzdtfa"});
});

</script>

Again thanks everyone! Merry Christmas!

Post Views: 3

Related posts

Leave a Reply

2 comments

  1. There really isn’t a need to use an input tag if you are not creating a form. It will just cause issues if by chance your code is executed inside a form block. If you just want to discover the post-id at javascript time, then it’s better to stuff it into a property of a div or span tag.

    <?php while(have_posts()): ?>
<?php the_post(); ?>
<div class="post-id-holder">
    <?php get_template_part('content',get_post_format()); ?>
    <div class="post-id-data" post-id="<?php echo get_the_ID(); ?>" post-title="something"></div>
</div>
<?php endwhile; ?>

    Later you can access it via javascript as such.

    <script type="text/javascript">
$(document).ready(function() {
   $('.item-post a').click(function(){
      // where are we? we are at any link inside the post, and that's no good.

      // find the holder parent
      var holder = $(this).parentsUntil('.post-id-holder');
      var data = $(".post-id-data",holder);

      var post_id = data.attr("post-id");
      var post_title = data.attr("post-title");
   });
});
</script>

    EDIT:

    After reviewing the HTML, I think you can get the post ID and title without having to add anything to the template.

    <script type="text/javascript">
$(document).ready(function() {
   $('.item-post a').click(function(){
      // find the article for the post
      var article  = $(this).parentsUntil('article').parent();
      var post_id = article.attr("id");
      var post_title $('.entry-title a',article).text();
      alert(post_id);
      alert(post_title);
   });
});
</script>

  2. May be not an answer to your question but first of all you shoud remove the each part from here

    $('.item-post a').each(function (i) {
    $(this).on("click", function (e){
        //...
    });
});

    It should be

    $('.item-post a').on("click", function (e){
    //...
});

    You should register your event outside of each, doesn’t need to loop, jQuery will do it. Also you are using following code

    $.post('overviewcheck-515adfzx8522', {'ProdName': prodname}, function (response) { 

}, 'json');

    In this case the first argument doesn’t look like a valid url and the callback function is doing nothing at all, so You should fix these.