jpsnow
asked on
Update database with javascript
I a website in which people can click on a star under each picture. Ideally, when clicked, the database will update, but I am unsure of how to do this. Right now it just reads from the database and displays text based upon that.
I created a javascript function "change" to change the look of the star and now it also needs to update the database. How can I update the database through javascript. I know that it is a client-side language, so im not sure what to do.
See code below:
I created a javascript function "change" to change the look of the star and now it also needs to update the database. How can I update the database through javascript. I know that it is a client-side language, so im not sure what to do.
See code below:
// ******* JAVASCRIPT
function change(divName, rating)
{
if (rating >= 1)
{
document.getElementById(divName).innerHTML = "<span class='star_1'><img src='star_blank.png' alt='' onClick='change(divName)'/>";
}
else
{
document.getElementById(divName).innerHTML = "<span class='star_1'><img src='star_blank.png' alt='' class='hover' onClick='change(divName)'/>";
}
}
// THE PHP ************************
<div id="rating_<?php echo $fullPath; ?>">
<?php
if ($rating >= 1)
{
// hover turned on because cookie is set to 1
?>
Rating = 1
<span class="star_1"><img src="star_blank.png" alt="" class="hover" onClick="change('<?php echo 'rating_'.$fullPath; ?>, <?php echo $rating; ?>')"/>
<?php
}
else
{
// hover turned off because cookie is set to 0
?>
Rating = 0
<span class="star_1"><img src="star_blank.png" alt="" onClick="change('<?php echo 'rating_'.$fullPath; ?>, <?php echo $rating; ?>')"/>
<?php
} ?>
You need use AJAX to get it.
If you have not experience with AJAX and Dynamic Calls,
I suggest you use Jquery, and if you have no experiencie
using Jquery, I suggest you read the following tuto
about making Ajax calls with it :
http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/
Is very easy and good explained, so you will get what do you want in a little time.
Just remember the steps:
1- Create the script that will update the DB (UpdateDB.php)
2- Use Jquery to make a AJAX Call to UpdateDB.php using on a click event:
Something like:
// Star is the class of the "Stars" images in the raking system.
$(".Star").click(
function()
{
load("UpdateDB.php");
}
);
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
I checked out the sites and they have been helpful, but I still have some problems. It works if I explicitly write out the div name, but I am creating them on page load with php. I then simply want to change the div that I click on. Right now my load file simply has "Text" written in it.
Why does it do nothing when I click it. If I view the source, the div id and the paramaters in myLoad() are the same so it should work. Im so confused.
Take a look at what I have. myLoad function is below.
Why does it do nothing when I click it. If I view the source, the div id and the paramaters in myLoad() are the same so it should work. Im so confused.
Take a look at what I have. myLoad function is below.
<!-- NEW STAR CODE -->
<!-- array and count of image number -->
<div id="<?php echo $fullPath; ?>">
<?php
// if there is a cookie with the name of the picture
$ratingPath = "rating_".$fullPath;
if ($rating >= 1)
{
// hover turned on because cookie is set to 1
?>
<span class="star_1"><img src="star_blank.png" alt="" class="hover" onClick="myLoad('#<?php echo $fullPath ?>')"/>
<?php
}
else
{
// hover turned off because cookie is set to 0
?>
<span class="star_1"><img src="star_blank.png" alt="" onClick="myLoad('#<?php echo $fullPath; ?>')"/>
<?php
}
$divCount++; ?>
</div>
<!-- END NEW STAR CODE -->
<!-- myLoad Function -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$.ajaxSetup ({
cache: false
});
var loadUrl = "ajax/load.php";
function myLoad(div)
{
$(div).html(ajax_load).load(loadUrl);
}
</script>
Try the following code:
<!-- NEW STAR CODE -->
<!-- array and count of image number -->
<div id="<?php echo $fullPath; ?>">
<?php
// if there is a cookie with the name of the picture
$ratingPath = "rating_".$fullPath;
if ($rating >= 1)
{
// hover turned on because cookie is set to 1
?>
<span class="star_1"><img src="star_blank.png" alt="" class="hover" onClick="myLoad('#<?php echo $fullPath ?>')"/>
<?php
}
else
{
// hover turned off because cookie is set to 0
?>
<span class="star_1"><img src="star_blank.png" alt="" onClick="myLoad('#<?php echo $fullPath; ?>')"/>
<?php
}
$divCount++; ?>
</div>
<!-- END NEW STAR CODE -->
<!-- myLoad Function -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$.ajaxSetup ({
cache: false
});
function myLoad(div)
{
var loadUrl = "ajax/load.php";
$("<?php echo $fullPath; ?>").html("Loading...").load(loadUrl);
}
</script>
ASKER
The new code just opens a blank page.
Sorry, I didn't see some parts of your code.
Try this code:
Try this code:
<!-- NEW STAR CODE -->
<!-- array and count of image number -->
<div id="<?php echo $fullPath; ?>">
<?php
// if there is a cookie with the name of the picture
$ratingPath = "rating_".$fullPath;
if ($rating >= 1)
{
// hover turned on because cookie is set to 1
?>
<span class="star_1"><img src="star_blank.png" alt="" class="hover" />
<?php
}
else
{
// hover turned off because cookie is set to 0
?>
<span class="star_1"><img src="star_blank.png" alt="" />
<?php
}
$divCount++; ?>
</div>
<!-- END NEW STAR CODE -->
<!-- myLoad Function -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$.ajaxSetup ({
cache: false
});
var loadUrl;
$(".star_1").click(
function()
{
loadUrl = "ajax/load.php";
$("#<?php echo $fullPath; ?>").html("Loading...").load(loadUrl);
}
);
</script>
ASKER
Im still having issues because the div is actually in a php loop, so it changes and this would only work for a single div. My div name changes in the loop outputting several divs to the actual page.
The following code seems right for me:
<!-- NEW STAR CODE -->
<!-- array and count of image number -->
<div id="<?php echo $fullPath; ?>">
<?php
// if there is a cookie with the name of the picture
$ratingPath = "rating_".$fullPath;
if ($rating >= 1)
{
// hover turned on because cookie is set to 1
?>
<span class="star_1"><img src="star_blank.png" alt="" class="hover" onClick="myLoad('#<?php echo $fullPath ?>')" />
<?php
}
else
{
// hover turned off because cookie is set to 0
?>
<span class="star_1"><img src="star_blank.png" alt="" onClick="myLoad('#<?php echo $fullPath ?>')" />
<?php
}
$divCount++; ?>
</div>
<!-- END NEW STAR CODE -->
<!-- myLoad Function -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$.ajaxSetup ({
cache: false
});
var loadUrl;
function myLoad(div)
{
loadUrl = "ajax/load.php";
$(div).html("Loading...").load(loadUrl);
}
</script>
ASKER
Good Link
I would suggest first do some research understanding how AJAX works and then start using JQuery. JQuery is just a library of common javascript functions to make it a lot easier to code. JQuery has a function called "post" which performs an AJAX request.
Do some quick reading and let me know if you need further help.