I'm having trouble getting an onclick function to work. I'm trying to connect an image to an onclick ajax function that calls a php script(process_php.php) and then returns an alert box on success.
I'm showing a static html version to make it easier to see, but each role_box div is generated with php. The button image repeats on all of them, but I need to know which button they clicked. audition_btn1, audition_btn2, audition_btn3...
Code:
<html>
<head>
<title>Projects</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/project_page.css">
<script src="js/jquery-1.7.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('.audition_btn').click(function() {
$.ajax({
url: 'process_php.php',
success: function(){
alert('You have auditioned for this project.');
}
});
return false;
});
}); // end ready
</script>
</head>
<body>
<div id='auditionForRole'>
<div id='open_roles'>
<!-- role 1 -->
<div class='role_box'>
<img src='img/users/missing_225x300.png'>
<div class='role_info'>
<h3>Actress</h3>
<h4>Mossad officer Ziva David</h4>
<h4>A native of Israel, Ziva...</h4>
</div> <!-- close role info -->
<input type='image' class='audition_btn' src='img/audition_btns/audition_btn.png' name='audition_btn1' id=' audition_btn1' >
</div> <!-- close role1 -->
<!-- role 2 -->
<div class='role_box'>
<img src='img/users/missing_225x300.png'>
<div class='role_info'>
<h3>Actress</h3>
<h4>Mossad officer Ziva David</h4>
<h4>A native of Israel, Ziva...</h4>
</div> <!-- close role info -->
<input type='image' class='audition_btn'
src='img/audition_btns/audition_btn.png' name='audition_btn2' id=' audition_btn2' >
</div> <!-- close role2 -->
<!-- role 3 -->
<div class='role_box'>
<img src='img/users/missing_225x300.png'>
<div class='role_info'>
<h3>Actress</h3>
<h4>Mossad officer Ziva David</h4>
<h4>A native of Israel, Ziva...</h4>
</div> <!-- close role info -->
<input type='image' class='audition_btn' src='img/audition_btns/audition_btn.png' name='audition_btn3' id=' audition_btn3' >
</div> <!-- close role3 -->
</div> <!-- close open roles -->
</div> <!-- close auditionForRole -->
</body>
</html>
$(this) will give you a reference to the clicked element inside the click handler
Code:
$('.audition_btn').click(function() {
alert($(this).attr("name")); // will give you the name of the clicked element
$(this).attr('src', 'whatever.png'); // change the src attribute of the currently clicked element
}
Thanks devnul I'm still trying to learn to use the console.
Now i'm trying to figure out how to return data back to the success function inside of the ajax call. Right now the php script is not running the query is there a way to return mysql error back to the alert box?
Code:
$(document).ready(function() {
$('.audition_btn').click(function() {
var buttonNumber = $(this).attr("name"); // to figure out which button was clicked
alert(buttonNumber); // just for testing
$.ajax({
type: "POST",
url: "scripts/process_audition.php?proj_id="+<?php echo $requested_proj_id ?>,
data: buttonNumber,
success: function(){
alert('You have auditioned for this project');
}
}); // end of ajax
}); // end click
}); // end ready
for some reason the query is not running. It works if I drop the same query into mysql workbench.
How do I sent back an error message that will display inside of the alert box.
php
Code:
<?php
require_once 'scripts/app_config.php';
require_once 'scripts/database_connection.php';
require_once 'inc/db.php';
$proj_id = $_REQUEST['proj_id'];
$user_id = 1; // hardcode user_id for now
$audition_id = $_POST['buttonNumber']
$query = 'update jobs set job_user_id = 1 where job_id= 1';
$result = mysql_query($query);
if (!$result)
{
die(mysql_error());
}
Thanks, I'm getting closer. The php script is now running the query.
Now the only thing left, that I can't figure out is how to move data from the javascript function to php script. I know I need to use the data attribute, but I can't find anything(that I understand) explaining the syntax.
Code:
$.ajax({
type: "POST",
url: "scripts/process_audition.php?proj_id="+<?php echo $requested_proj_id ?>,
data: value,
success: function(data){
alert(data); // this will alert you with everything the server responded
//alert('You have auditioned for this project');
}
}); // end of ajax
So how do I move the value and name values to php?
I'm getting a reference error:Can't find variable: value
Code:
$('.audition_btn').click(function() {
var buttonNumber = $(this).attr("name"); // to figure out which button was clicked
alert(buttonNumber); // just for testing
$.ajax({
type: "POST",
url: "scripts/process_audition.php?proj_id="+<?php echo $requested_proj_id ?>,
data: {"job_id" : value},
success: function(data){
alert(data); // this will alert you with everything the server responded
alert('You have auditioned for this project');
}
}); // end of ajax
}); // end click
Great that function is working perfect now. Thanks.
Now I'm trying to add a mouseover event to change the src when hovering over. Of course I can't get it to work though. I've tried to just duplicate what I did above and change the event to onmouseover, but I'm getting the following error:
TypeError: 'undefined' is not a function(evaluating'$('.remove_btn').onMouseover')
here is what I have so far: Any ideas?
Code:
$('.remove_btn').onmouseover(function() {
// change the src attribute of the currently mouseover element
$(this).attr('src', 'img/audition_btns/removeOver_btn.png');
});// end mouseover
Yes, Javascript is very much a matter of Syntax. Without looking into the docs you shouldn't start using a method.
The jQuery method to bind an event handler to "mouseover" is .mouseover() and not .onmouseover(). If you want the event to fire only once you enter the element (and not each time you slightly move the mouse over the element) you can use .mouseenter() instead.
thanks that helped. here is the finished button functions
Code:
<script>
$(document).ready(function() {
$(".remove_btn").hover(
function() {$(this).attr("src","img/audition_btns/removeOver_btn.png");},
function() {$(this).attr("src","img/audition_btns/remove_btn.png");
}); // end .hover
$('.remove_btn').click(function() {
var job_id = $(this).attr("value"); // to figure out which button was clicked
var r=confirm("Are you sure you want to delete this person from your project?")
if (r==true)
{
// remove from project
$.ajax({
type: "POST",
url: "scripts/proc_remove_from_proj.php?proj_id="+<?php echo $requested_proj_id ?>,
data: {
"job_id" : job_id,
},
success: function(data){
alert(data); // this will alert you with everything the server responded
alert('That user has been removed from the project');
}
}); // end of ajax
} // end if
}); // end click
}); // end ready
</script>
Before you post, read our: 
