Question

I using WordPress to display a list of thumbnails which will load a page when clicked using AJAX. I’m using a hidden div to store the page name of the particular thumbnail, like this:

<div class="load_image">
  <div class="image_path" style="display:none">portfolio-1</div>
  <img src="..here is the thumbnail source" />
</div>

And here is the AJAX code:

var ajax_load = "<img src='img/load.gif' alt='loading...' />";
    var loadUrl = "ajax/load.php";
    $(".load_image").click(function(){
            //Get the hidden-div-content from class image_path.....somehow
        $("#ajax_result").html(ajax_load).load("<?php bloginfo('url') ?>/image_path");
    });

How would I go about getting the content of the hidden div when clicked so I can pass it to the AJAX call?

Answer 1

You can use this as a reference to the element clicked, then wrap it in a jQuery object and use .children('.image_path') to get the hidden div, and then .html() to get its content.

$(".load_image").click(function(){
    var hidden_content = $(this).children('.image_path').html();
    $("#ajax_result").html(ajax_load).load("<?php bloginfo('url') ?>/image_path");
});

Or perhaps better would be to store the data as a custom attribute using HTML5 data- attribute.

<div class="load_image" data-hidden="portfolio-1">
  <img src="..here is the thumbnail source" />
</div>

Then use jQuery’s .data() method to retrieve the data.

var hidden_content = $(this).data('hidden');