Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Update database with javascript

Posted on 2010-01-01
11
Medium Priority
?
1,127 Views
Last Modified: 2012-06-27
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
Comment
Question by:jpsnow
10 Comments
 
LVL 10

Expert Comment

by:mstrelan
ID: 26159124
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
 
LVL 11

Expert Comment

by:VanHackman
ID: 26159226

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
 
LVL 6

Accepted Solution

by:
Ravi Kalla earned 1500 total points
ID: 26161048
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

Author Comment

by:jpsnow
ID: 26162012
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
 
LVL 11

Expert Comment

by:VanHackman
ID: 26163656
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
 

Author Comment

by:jpsnow
ID: 26163755
The new code just opens a blank page.  
0
 
LVL 11

Expert Comment

by:VanHackman
ID: 26163780
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
 

Author Comment

by:jpsnow
ID: 26166978
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
 
LVL 11

Expert Comment

by:VanHackman
ID: 26167929
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
 

Author Closing Comment

by:jpsnow
ID: 31671845
Good Link
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article discusses how to create an extensible mechanism for linked drop downs.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Suggested Courses
Course of the Month21 days, 7 hours left to enroll

810 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