?
Solved

jQuery Div onClick Query Database Display Rows Without Page Refresh

Posted on 2011-10-18
6
Medium Priority
?
541 Views
Last Modified: 2012-05-12
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!
0
Comment
Question by:SevenAteAnthony
  • 4
  • 2
6 Comments
 
LVL 13

Expert Comment

by:haloexpertsexchange
ID: 36986781
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

0
 
LVL 13

Expert Comment

by:haloexpertsexchange
ID: 36986800
you can try using this for color instead of what I've got
var color = $('this:first-child').val();
0
 
LVL 1

Author Comment

by:SevenAteAnthony
ID: 36986817
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!
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 13

Expert Comment

by:haloexpertsexchange
ID: 36986847
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.
0
 
LVL 1

Author Comment

by:SevenAteAnthony
ID: 36987066
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.
0
 
LVL 13

Accepted Solution

by:
haloexpertsexchange earned 2000 total points
ID: 36987153
One problem that I see is my fault.
I didn't close all the { correctly.
Also unless you have changed the html code from what you showed me you do not have anything with an id of color so nothing is ever going to happen.
$(#color).click(function() {
var color = $('this input:hidden').val();<--not sure this will work, try $(this).find('input:hidden');
$.post('switchLocation.php',{'color':color},function(data){
$(#listings).html(data);
});
});<--needed to add this

Open in new window

Do you have any errors that you can see?'
Also if you want to check the values just use an alert to make sure that you have information.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
Ready to get certified? Check out some courses that help you prepare for third-party exams.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

579 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question