Grow your CSS skills. Land your dream job.

Get the ID using javascript/jquery

  • asp
    # June 19, 2009 at 5:50 pm

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

    # June 19, 2009 at 7:10 pm

    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 – you should addslashes() before using it a SQL query.

    Code:
    asp
    # June 20, 2009 at 3:54 am

    Thank you! I think I understand.

    asp
    # June 20, 2009 at 9:36 am

    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.

    [img]http://mathiasb.no/stuff/Fil_save/bilder/demo.jpg[/img]

    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.

    # June 20, 2009 at 10:37 am

    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
    # June 20, 2009 at 1:03 pm

    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
    # June 20, 2009 at 3:46 pm

    Well now I have made this script:

    Code:
    $(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. :?

    # June 21, 2009 at 5:08 am

    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.

    Code:
    //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
    # June 21, 2009 at 2:34 pm

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

    asp
    # July 1, 2009 at 6:48 pm

    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.

    Code:
    $(“.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() {


    $(“#info_inner”).empty

    $(“#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.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".