Forums

asp

Hi!

I'm trying to get the ID of a div using jquery. The Point is to get the ID when the user clicks on the div. Then I'll use the ID of the div in a PHP script that retrieves information from a database. It’s hard to describe but:

User clicks on a div --> jquery gets the div ID --> then echo’s it in a php script

How do i get the ID the JS retrieves in to a PHP script?

PHP:
"SELECT * FROM news WHERE news_id = '".(this is where the jquery retrieves ID goes)."' LIMIT 1");

Is it even possible to do something like this, or is there a smarter way?

Tanks ;)

davesgonebananas

Getting the ID of the div in a click event is simply a case of this.id, sending it to a PHP using AJAX is a matter of using $.post.

This example makes all divs clickable, you will obviously want to use a better selector. Also, it will send the id of the div to test.php and update the div with an id of news - you should change these to suit your needs.

In the PHP file the id can be referenced using $_POST['id'] - you should addslashes() before using it a SQL query.

<script type=\"text/javascript\">
	$(function() { 
		$('div').click(function() {
			$id = this.id;
			$.post('test.php', { id : $id}, function(data) {
					$('#news').html(data);
			});
			return false;
		});
	});
</script>

asp

Thank you! I think I understand.

asp

I got the jquery function to work, but not in the main part. I'll post an image to show you what I really want to do.

http://mathiasb.no/stuff/Fil_save/bilder/demo.jpg

You can see on the image that it’s a list with php generated elements. When a user clicks on one of this elements the information div would fadeIn additional information about the file. The ting is that this is not that hard if you reloade the page but I want to do this without reloading the page.

Do somebody got any tips/suggestions on how to do this.

chriscoyier

When you do that $.post, you are going to get some data back from that test.php file (where you do the database call and all that). Check out jQuery's documentation on post:

http://docs.jquery.com/Ajax/jQuery.post ... llbacktype

It includes a callback function, or a function to run when that post is done. In there, you'd do your fading and drop in any data that you get back from that post call.

asp

EDIT: I understand now... Thank you!

Oki, I’ll take a look at it, but I still don’t understand hove I can do this without reloading the page.

asp

Well now I have made this script:

		
		$(function(){	
			$(\".index\").click(function () {
				//var to send, the id of the other div
				var id = element.attr(\"id\");
				//if the div is hidden do your thing
				if ($(\"#info_inner\").is(\":hidden\")) {					
					$.ajax({
						type: \"POST\",
						//post to proses page
						url: \"/stuff/Fil_save/prosess.php\",
						data: id,
						//div fades in when operation is a success
						success: function(){
						$(\"#info_inner\").fadeIn(\"fast\");
					}
					});
				} 
				else {
					$(\"#info_inner\").fadeOut(\"fast\");
					return false;
				}
			});
		});

Is this right?

And to display the div should I include the prosess.php page on the index page? That’s what I don’t understand. I understand how to send the id to the page, and how to implement it in the php but not how to get the information back to the index.php. :?

davesgonebananas

Your process.php needs to take the id as input and generate the HTML for the information div.

Then your success() function needs to take a parameter that will contain the HTML outputted from process.php.

//div fades in when operation is a success
// data contains the html output of process.php
                  success: function(data){
                  // fade out, then replace the contents of the div then fade in
                  $(\"#info_inner\").fadeOut(\"fast\").html(data).fadeIn(\"fast\");
               }

asp

Sorry, can’t get it to work. I'll just lay the project to rest for now and test it in small scale.

asp

Now I hav made a new script. I can't get it to work, but I'm wondering if some of you cold figger out whats wrong.

        $(\".index\").click(function () {
		//var to send, the id of the other div
				var id = element.attr(\"id\");
				//if the div is hidden do your thing					
					$.ajax({
						type: \"POST\",
						//post to proses page
						url: \"getinfo.php\",
						data: id,
						//div fades in when operation is a success
						// data contains the html output of process.php
                     	 success: function(data){    
          					$(\"#info_inner\").fadeOut(100, function() {

						<!-- empty the current content and then fetch new data -->
						$(\"#info_inner\").empty
						<!-- load the getinfo.pho file which will replace all the content -->
						$(\"#info_inner\").load(\"getinfo.php\", function() {
							$(\"#info_inner\").fadeIn();
						});
					});
				return false;
            });
		});

Do somone got an idea? :roll:

Just ask if you need more info on how stuff are suposed to happen. You can also find it in some previos posts.

treehouse : what would you like to learn today?

Forums

Get the ID using javascript/jquery