asked on

jQuery Div onClick Query Database Display Rows Without Page Refresh

Hi Experts,

Thanks for reading. I'm looking for a jQuery solution that when a div is clicked, the database is queried via POST variables stored in hidden inputs and rows are displayed on the same page without page refresh. Is there a way to do this? Here is what I'm thinking -

<div id="onClickQueryDB1"><input type="hidden" value="Blue" />Click Here for Blue</div>
<div id="onClickQueryDB2"><input type="hidden" value="Green" />Click Here for Green</div>
<div id="rowContainer">All color rows in DB displayed here after clicked above.</div>

Open in new window

Thank you!

haloexpertsexchange

try this

$('div[id^=onClickQuery]').click(function() {
var color = $('this input:hidden').val();
$.post('yourfileName',{'color':color},function(data){
$(#rowContainer).html(data);
});

Open in new window

haloexpertsexchange

you can try using this for color instead of what I've got
var color = $('this:first-child').val();

SevenAteAnthony

ASKER

Hi haloexpertsexchange,

Thanks for the reply. Let's say I have 2-3 hidden inputs per color. Would the appriopriate code be the following?

var color = $('this input.color:hidden').val();
var category = $('this input.category:hidden').val();
var size = $('this input.size:hidden').val();

Open in new window

Thanks!

haloexpertsexchange

if these are based off of the names use it like this
var color = $('this input:hidden[name=color]').val();
var category = $('this input:hidden[name=category]').val();
var size = $('this input:hidden[name=size]').val();
if it is based off of ids it makes things even easier since you can just look it up like this
$(#color).val(); and so on putting a # before the id of any element that you want to look up.

SevenAteAnthony

ASKER

Thanks for the info. I tried to run your code, but it didn't quite work. I modified it a bit. Can you help me?

<script type="text/javascript">
$(#color).click(function() {
var color = $('this input:hidden').val();
$.post('switchLocation.php',{'color':color},function(data){
$(#listings).html(data);
});
</script>

Open in new window

switchLocation.php:

<?php

echo "<h2>Success</h2>";

?>

Open in new window

Thank you.

ASKER CERTIFIED SOLUTION

haloexpertsexchange

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial