Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New Coder
    Join Date
    Oct 2010
    Posts
    68
    Thanks
    29
    Thanked 0 Times in 0 Posts

    help with onclick ajax function

    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>

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,391
    Thanks
    11
    Thanked 568 Times in 561 Posts
    $(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
    }

  • Users who have thanked devnull69 for this post:

    aaron4osu (04-03-2012)

  • #3
    New Coder
    Join Date
    Oct 2010
    Posts
    68
    Thanks
    29
    Thanked 0 Times in 0 Posts
    Thanks for the help, but I'm still having problems getting it anything to happen.

    I've stripped out everything else from the function trying to just get the alert box to pop.
    DO you see anything wrong?

    Code:
    <!DOCTYPE html>
    <html>
    
    <head>
    	<title> Auditions</title>
    	<script src="js/jquery-1.7.min.js" type="text/javascript"></script>
    <script>
    		
    $(document).ready(function() {
    
    	$('.audition_btn').click(function() {
    		alert($(this).attr("name")); // will give you the name of the clicked element
    
    	}
    
    }); // 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' name='audition_btn'  id='audition_btn' 
    					src='img/audition_btns/audition_btn.png'>
    
    	</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>

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,391
    Thanks
    11
    Thanked 568 Times in 561 Posts
    Yes, did you check your console for Syntax errors? You should always(!) do that before asking :-)

    There is a missing closing parenthesis ")" at the end of the click handler (which was there before)

  • Users who have thanked devnull69 for this post:

    aaron4osu (04-03-2012)

  • #5
    New Coder
    Join Date
    Oct 2010
    Posts
    68
    Thanks
    29
    Thanked 0 Times in 0 Posts
    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());
    }

  • #6
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,391
    Thanks
    11
    Thanked 568 Times in 561 Posts
    The die() method of PHP will already send back a message, all you need to do is receive this message in the $.ajax success handler.

    Code:
    success: function(data){
       alert(data);  // this will alert you with everything the server responded
    }

  • Users who have thanked devnull69 for this post:

    aaron4osu (04-03-2012)

  • #7
    New Coder
    Join Date
    Oct 2010
    Posts
    68
    Thanks
    29
    Thanked 0 Times in 0 Posts
    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?

    Code:
    <input type='image' class='audition_btn' name='job_id1'  value='1' src='...'>
    in php how to I grab those values?
    Code:
    $job_id = $_POST['value']; //?
    it doesn't seem to work is this right?

  • #8
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,391
    Thanks
    11
    Thanked 568 Times in 561 Posts
    There are actually two ways of doing that

    1. By an object literal (preferred)
    Code:
    data: {"parametername" : value},
    2. As a URI parameter
    Code:
    data: "parametername=" + encodeURIComponent(value),
    In both cases you'll be able to access the value of the parameter with $_POST["parametername"] in PHP

  • #9
    New Coder
    Join Date
    Oct 2010
    Posts
    68
    Thanks
    29
    Thanked 0 Times in 0 Posts
    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
    is this right?
    Code:
    data: {"job_id" : value},
    Code:
    <input type='image' class='audition_btn'  name='job_pos_id=1' value='1' >
    also if I need to store multiple values how would I right that.

    Again thank you so much for your help.

  • #10
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,391
    Thanks
    11
    Thanked 568 Times in 561 Posts
    Of course you need to replace "value" with whatever value you want to send :-)

    I expect that you actually wanted to send the content of the buttonNumber variable?
    Code:
    data: {"job_id" : buttonNumber},

  • Users who have thanked devnull69 for this post:

    aaron4osu (04-03-2012)

  • #11
    New Coder
    Join Date
    Oct 2010
    Posts
    68
    Thanks
    29
    Thanked 0 Times in 0 Posts
    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

  • #12
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,391
    Thanks
    11
    Thanked 568 Times in 561 Posts
    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.

  • Users who have thanked devnull69 for this post:

    aaron4osu (04-04-2012)

  • #13
    New Coder
    Join Date
    Oct 2010
    Posts
    68
    Thanks
    29
    Thanked 0 Times in 0 Posts
    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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •