Jump to content
imgrooot

How do you show php foreach loop results as ajax mousehover?

Recommended Posts

Here's what I'm trying to do.

 

I retrieve results using php foreach loop. Within that loop results, I want to show a div(.show-details) on mouse over only.  How do I do that?

 

This is my code so far.  

<style>
  .show-details {
    display: none;
  }
</style>

$get_records = $db->prepare("SELECT * FROM records WHERE record_id = :record_id");
$get_records->bindParam(':record_id', $record_id);
$get_records->execute();
$result_records = $get_records->fetchAll(PDO::FETCH_ASSOC);
if(count($result_records) > 0){
    foreach($result_records as $row) {

    $get_record_title 	 		  =	$row['record_title'];
    $get_record_details 	 	  =	$row['record_details'];
    $get_record_price		          =	$row['record_price'];

    ?>
      <div class="product">
        <div class="product-title">
          <?php echo $get_record_title; ?>
        </div>
        <div class="product-price">
          <?php echo $get_record_price; ?>
        </div>
      </div>
      <div class="show-details">
        <?php echo $get_record_details; ?>
      </div>
    <?php

  }
} else {

  echo 'no results.';

}

<script>
  $(document).ready(function() {
    $(".product").mouseover(function(){
      $(".show-details").css("display", "block");
    });
  });
</script>
Edited by imgrooot

Share this post


Link to post
Share on other sites

The php loop will happen on the server so the mouse over effect is moot at that point. The script will do its thing and return whatever to the client. At that point your html/css can hide the div if you want and a little JS can 'show' it upon mouseover.

 

Two separate processes.

Share this post


Link to post
Share on other sites

The php loop will happen on the server so the mouse over effect is moot at that point. The script will do its thing and return whatever to the client. At that point your html/css can hide the div if you want and a little JS can 'show' it upon mouseover.

 

Two separate processes.

 

The thing is, if I have 10 records on a page and I use the above javascript code to show the hidden div, it will show the div for all 10 records at the same time. I don't want that.  I just want it show a div for each unique record one at a time as I hover my mouse over them.  So that is why I am asking what the javascript code will look like to make that work?

Share this post


Link to post
Share on other sites

You also need a mouseout to set the display back to "none"

 

 

So something like this?

<script>
  $(document).ready(function() {
    $(".product").mouseover(function(){
      $(".show-details").css("display", "block");
    });
    $(".product").mouseout(function(){
      $(".show-details").css("display", "none");
    });
  });
</script>

Share this post


Link to post
Share on other sites

You'll have to target each 'show-details' class individually. Put that div inside the 'product' div and target it specifically. This is untested, but should theoretically work:

$(document).ready(function(){
	$('.product').mouseover(function(){
		$(this).find('.show-details').css({ display: 'block' });
	});
	$('.product').mouseout(function(){
		$(this).find('.show-details').css({ display: 'none' });
	});
});

Share this post


Link to post
Share on other sites

 

You'll have to target each 'show-details' class individually. Put that div inside the 'product' div and target it specifically. This is untested, but should theoretically work:

$(document).ready(function(){
	$('.product').mouseover(function(){
		$(this).find('.show-details').css({ display: 'block' });
	});
	$('.product').mouseout(function(){
		$(this).find('.show-details').css({ display: 'none' });
	});
});

 

Yep the above works if I have the ".show-details" div as a child of parent div ".product" like this.

      <div class="product">
        <div class="product-title">
          <?php echo $get_record_title; ?>
        </div>
        <div class="product-price">
          <?php echo $get_record_price; ?>
        </div>
        <div class="show-details">
         <?php echo $get_record_details; ?>
        </div>
      </div>
      

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.