JQuery UI токен - PullRequest
Новая
       9

JQuery UI токен

1 голос
/ 26 октября 2010

Здравствуйте, я следовал этому руководству, которое использует jquery UI для генерации токенов в Facebook, например: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-use-the-jquery-ui-autocomplete-widget/

Моя проблема в том, что мне нужно передать через Json два значения: ID и ИМЯ: скрипт на стороне серверавыглядит так: 

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;

эхо от скрипта на стороне сервера: 

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

(что именно то, что мне нужно)

сейчас я прохожумассив «name», но не «id», который должен быть скрытым вводом с соответствующим идентификатором из базы данных, html-страница, где выполняется вызов php, выглядит следующим образом: 

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

так в основном, где вы видите комментарий: "//define select handler" что-то должно быть сделано, но я не могу это сделать!я добавил строку:

$("<input />", {value:"id", type:"hidden", name:"id"}).appendTo(span);, но он не получает "id" моего массива, любая помощь приветствуется.

regards

Ответы [ 2 ]

3 голосов
/ 02 ноября 2010

Ваш код должен быть:

ОБНОВЛЕНИЕ С ДЕМО 

$(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()
    });
});

  • ПРИМЕЧАНИЕ: это при условии, что ваш код json выглядит следующим образом:

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

0 голосов
/ 28 октября 2010

Похоже, вы добавляете в список предложений только name, а не весь объект data, который будет содержать элементы name и id. Вместо этого: 

suggestions.push(val.name)

попробуйте поместить весь объект данных в список, который вы передаете обратному вызову: 

suggestions.push(val)

Тогда в вашем обратном вызове ui.item.value будет содержать полный элемент данных, так что вам придется немного изменить свой код. Чтобы получить доступ к значениям name и id по отдельности, вы, вероятно, могли бы сделать что-то вроде этого: 

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

Затем вы можете использовать те переменные, где вам нужно (friend становится friendID, и вместо передачи {value:"id" ...} на скрытый ввод, вы можете сделать {value:friendID ...}

...