• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1131
  • Last Modified:

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:
// ******* 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
     } ?>

Open in new window

0
jpsnow
Asked:
jpsnow
1 Solution
 
mstrelanCommented:
You need to do an AJAX request back to the server, and your server side code will update the database and then return whether or not it was successful.

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.
0
 
VanHackmanCommented:

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");
			
		}
		
	);

Open in new window

0
 
Ravi KallaTechnology LeadCommented:
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
jpsnowAuthor Commented:
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.  
<!--  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>

Open in new window

0
 
VanHackmanCommented:
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>

Open in new window

0
 
jpsnowAuthor Commented:
The new code just opens a blank page.  
0
 
VanHackmanCommented:
Sorry, I didn't see some parts of your 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>

Open in new window

0
 
jpsnowAuthor Commented:
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.  
0
 
VanHackmanCommented:
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>

Open in new window

0
 
jpsnowAuthor Commented:
Good Link
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now