Login

04-21-2010, 10:33 AM

[eluser]flyenig[/eluser]
Ok i was reading this tutorial: http://net.tutsplus.com/tutorials/javasc...te-widget/

and I am trying to apply that to my current project, but im having trouble.

How can i get the id from the selected from the jquery ui?(most important)
How can i convert this to codeigniter format(i think i can do this but all help is great Smile

)

here is the code from that website

getfriends.php

Code:
&lt;?php   

    //connection information   

    $host = "localhost";   

    $user = "root";   

    $password = "your_mysql_password_here";   

    $database = "test";   

    $param = $_GET["term"];   

    //make connection   

    $server = mysql_connect($host, $user, $password);   

    $connection = mysql_select_db($database, $server);   

    //query the database   

    $query = mysql_query("SELECT * FROM friends WHERE name 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["name"]);   

    }   

    //echo JSON to page   

    $response = $_GET["callback"] . "(" . json_encode($friends) . ")";   

    echo $response;   

    mysql_close($server);   

?&gt;

and the front page

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

&lt;html&gt;

    &lt;head&gt;

        &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;

        &lt;title&gt;jQuery UI Autocomplete&lt;/title&gt;

        &lt;link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.8.custom.css"&gt;

        &lt;link rel="stylesheet" type="text/css" href="css/autocomplete.css"&gt;

    &lt;/head&gt;

    &lt;body&gt;

        <div id="formWrap">

            &lt;form id="messageForm" action="#"&gt;

                <fieldset>

                    <legend>New message form</legend>

                    <span>New Message</span>

                    <label id="toLabel">To:</label>

                    <div id="friends" class="ui-helper-clearfix">

                        &lt;input id="to" type="text"&gt;

                    </div>

                    <label>Subject:</label>

                    &lt;input id="subject" name="subject" type="text"&gt;

                    <label>Message:</label>

                    &lt;textarea id="message" name="message" rows="5" cols="50"&gt;&lt;/textarea>

                    <button type="button" id="cancel">Cancel</button>

                    <button type="submit" id="send">Send</button>

                </fieldset>

            &lt;/form&gt;

        </div>

        <scr1pt type="text/javascript" src="js/jquery-1.4.2.min.js"></scr1pt>

        <scr1pt type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></scr1pt>

        <scr1pt type="text/javascript">

            $(function(){

                //attach autocomplete

                $("#to").autocomplete({

                    //define callback to format results

                    source: function(req, add){

                        //pass request to server

                        $.getJSON("friends.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: "[removed]",

                                title: "Remove " + friend

                            }).text("x").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);

                    }                

                });                

            });

        </scr1pt>

    &lt;/body&gt;

</scr1pt>

Please help, Thanks Smile

04-21-2010, 02:18 PM

[eluser]Dan Horrigan[/eluser]
What "id" are you trying to get? The way this work is they start typing in the To box, then it uses the autocomplete, then they select which one they wanted and it puts the text in the input. So when you submit the form, you get the value like any other input.

For your second question: I normally create an AJAX controller, with methods for the actions. Then you just change your JS calls to call that URI.

EDIT: Forgot to mention...If I were you I would post the question on the jQuery forums, it is really the most appropriate place (except for the second part about AJAX and CI).

Dan

06-24-2011, 04:48 AM

[eluser]Andrei VISAN[/eluser]
In your controller you must build you $friends array like this

Code:
$friends[$i]['name'] = array("name" => $row["name"]);

$friends[$i]['id'] = array("id" => $row["id"]);

Then you must call your javascript like this:

Code:
source: function(request, response) {

                $.ajax({ url: "friends.php?callback=?",

                data: { term: $("#to").val()},

                dataType: "json",

                type: "POST",

                success: function(data){

                    response($.map(data, function (item) {

                                return {label: item.name, value: item.name, id: item.id}

                            }))

                }

            });

        },

        select: function (event, ui) {

            $('#hiddenId').attr('value', ui.item.id);

                },