0

I want to get the result of wp_dropdown_pages() to fire an ajax request to show an image instead of redirecting the user to the page url.

In other words, my pages are all for car models. I want to use the wordpress function to offer a list of the site's available car models and display their photo in a hidden carsphoto div.

The following is the code I have thus far which displays the list of my site's pages (cars) and fires a jquery submit automatically when an option is selected - no submit button needed.

<li id="pages">
<form action="<?php bloginfo('url'); ?>" method="get">
<?php  
$select = wp_dropdown_pages(
                    array(
                        'post_type' => 'page',
                        'show_option_none' => 'Select Car',
                        'echo' => 0
                    )
                );

echo str_replace('<select ', '<select onchange="this.form.submit()" ', $select);
?>
</form>
</li>

<div class="carphoto" style="display:hidden"></div>

The photos of the cars are stored in a cars folder in my uploads directory. Each car photo has a name that corresponds to the page title (without spaces).

So I know what I want to do is modify the "select onchange" code to send the stripped page title to an ajax request to fetch the photo corresponding to the page title selected in the dropdown... I just don't know how.

Your guidance is appreciated!

  • The photos should display in a div that is hidden when no pictures are selected. – Sweepster Jun 25 '16 at 13:51
  • Specifically, what i need help with it the part to be able to modify the output urls of the wp_dropdown_pages() function. – Sweepster Jun 26 '16 at 12:36
1

The following is the solution I came up with:

<div id="selection1">
<div id="dropdown1">
   <form id="choice1" action="<?php bloginfo('url'); ?>" method="get">
   <?php  
   $select = wp_dropdown_pages(
                        array(
                            'post_type' => 'page',
                            'show_option_none' => 'Select Car',
                            'echo' => 0
                        )
                    );

    echo $select; 
    ?>
   </form>
</div>

<div id="firstchoice"></div>
</div>

<script>
$('#choice1').change(function(){ //if the select value gets changed
var png = '.png';
var urlstart = <?php echo json_encode($url); ?>;
var imageSource = $(this).find('option:selected').text().replace(/\s/g, '').substring(6); //get the data from data-picture attribute
if(imageSource){ //if it has data
  $('#firstchoice').html('<img src="'+urlstart+imageSource+png+'">'); // insert image in div firstchoice
} else {
  $('#firstchoice').html(''); //remove content from div firstchoice, thus removing the image
}
})
</script>
  • Good work solving your own question, and thanks for coming back to tell us about it :) – Tim Malone Jun 29 '16 at 22:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.