jquery ui token

hello i have followed this tutorial wich uses jquery UI to generate tokens facebook like: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-use-the-jquery-ui-autocomplete-widget/

my problem is i need to pass two values thru Json: the ID and the NAME: the server side script looks like this:

header('Content-Type: text/html; charset=iso-8859-1', true);
include($_SERVER['DOCUMENT_ROOT'].'/inrees/inrees/communaute/includes/_db.php');

$param = $_GET["term"];
$query = mysql_query("SELECT * FROM comm_carnet, in_emails 
                       WHERE carnet_iduser=emails_id 
                         AND emails_id!='".$_COOKIE['INREES_ID']."'  
                         AND emails_nom REGEXP '^$param'");

//build array of results
for ($x = 0, $numrows = mysql_num_rows($query); $x < $numrows; $x++) {
    $row = mysql_fetch_assoc($query);
    $friends[$x] = array("name" = > $row["emails_nom"], "id" = > $row["emails_id"]);
}

//echo JSON to page
$response = $_GET["callback"]."(".json_encode($friends).")";

echo $response;

the echo from the server side script is:

([{"name":"dupont","id":"34998"},{"name":"castro","id":"34996"},{"name":"castelbajac","id":"34995"}])

(wich is exactly what i need)

right now i am passing the the "name" array but not the "id" wich needs to be a hidden input with the corresponding id from the database, the html page where the call to the php is done looks like this:

//attach autocomplete
$("#to").autocomplete({

    //define callback to format results
    source: function (req, add) {

        //pass request to server
        $.getJSON("messages_ajax.php?callback=?", req, function (data) {

            //create array for response objects
            var suggestions = [];

            //process response
            $.each(data, function (i, val) {
                suggestions.push(val.name);
            });

            //pass array to callback
            add(suggestions);
        });
    },

    //define select handler
    select: function (e, ui) {

        //create formatted friend
        var friend = ui.item.value,
            span = $("<span>").text(friend),
            a = $("<a>").addClass("remove").attr({
                href: "javascript:",
                title: "Remove " + friend
            }).text("x").appendTo(span);
        $("<input />", {
            value: "id",
            type: "hidden",
            name: "id"
        }).appendTo(span);
        //add friend to friend div
        span.insertBefore("#to");
    },

    //define select handler
    change: function () {
        //prevent 'to' field being updated and correct position
        $("#to").val("").css("top", 2);
    }
});

//add click handler to friends div
$("#friends").click(function () {
    //focus 'to' field
    $("#to").focus();
});

//add live handler for clicks on remove links
$(".remove", document.getElementById("friends")).live("click", function () {

    //remove current friend
    $(this).parent().remove();

    //correct 'to' field position
    if ($("#friends span").length === 0) {
        $("#to").css("top", 0);
    }
});

so is basically where you see the comment: "//define select handler" that something needs to be done but i cant do it! i added the line :

$("<input />", {value:"id", type:"hidden", name:"id"}).appendTo(span); but it does not fetch my array "id", any help is apreciated.

regards

Answers:

Answer

your code should be:

UPDATE With DEMO

$(function() {
    $("#to").autocomplete({
        //define callback to format results
        source: function(req, add) {
            //pass request to server
            $.getJSON("json.json", req,
            function(data) {
                add($.map(data,
                function(item) {
                    return {
                        id: item.id,
                        label: item.name,
                        value: item.name
                    }
                }));
            });
        },
        //define select handler
        select: function(e, ui) {
            $('<a class="del_friend" href="#' + ui.item.id + '" title="remove">' + ui.item.label + '<span>x</span>' + 
              '<input name="friend[]" type="hidden" id="friend_' + ui.item.id + '" value="' + ui.item.id + '" /></a>').insertBefore('#to');
        },
        //define select handler
        change: function() {
            $("#to").val("");
        }
    });
 //delete friends
    $('a.del_friend').live('click', function(e) {
        e.preventDefault();
        var friend_id = this.hash.split('#')[1];
        alert(friend_id); //AJAX Call and delete item by it's ID
        $(this).fadeOut(500).remove()
    });
});
  • NOTE: this assuming your json code look like:

    [{"name":"dupont","id":"34998"},{"name":"castro","id":"34996"},{"name":"castelbajac","id":"34995"}]


Answer

So, it looks like you're adding only the names to the suggestions list, not the entire data object which would contain the name and id members. Instead of doing this:

suggestions.push(val.name)

try pushing the entire data object onto the list you're passing to your callback:

suggestions.push(val)

Then, in your callback, ui.item.value will contain the full data member, so you'll need to change your code around a bit. To access the name and id values separately, you could presumably do something like this:

var friendName = ui.item.value.name;
var friendID = ui.item.value.id;

Then, you can use those variables where you need to (friend becomes friendID, and instead of passing {value:"id" ...} to the hidden input, you could do {value:friendID ...}

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.