CODEWITHSUNDEEP
jqueryruby-on-railsjquery-tokeninput
Shruthi R
Shruthi R

Reputation: 1923

In rails, jQuery token input is not allowing custom entry

In rails, jQuery token input is not allowing custom entry.

I have downloaded 1.6.0 version of token input but i can't enter custom entry. As soon as i enter some text in a text box & take out cursor, the text will disappears. Only i need to select from auto completion list.

Eg :- If i am using below kind of script function, what will be the solution ?

<pre>
<script type="text/javascript">
tokenInput("SOME_ID", "/token_input/name");

function tokenInput(text_box_id, url){
    jQuery("#" + text_box_id).tokenInput(url, {
      allowCustomEntry: true,
      preventDuplicates: true,
      theme: "facebook",
    });
  }
</script>
</pre>

Please give me the solution for this, token input should allow the custom entry.

Upvotes: 3

Views: 1750

Answers (2)

MD SHAHIDUL ISLAM
MD SHAHIDUL ISLAM

Reputation: 14523

It is working for me as charm.

I had need custom entry which will store database and auto increment id will be the value of this token.

I have fixed this as following. There is a tricks, on add token a request goes to server add new token to database and its new insert id comes to client side and set as value of added token.

Get plugin with allow free tagging facility from github.

<input type="text" name="w_i_tk" id="w_i_tk">

<script>
$(document).ready(function() {.

    $("#w_i_tk").tokenInput("token.php", {
        theme: "facebook",
        hintText: "Type tag by which other can search, e.g. PHP, MySql etc.",
        preventDuplicates: true,
        tokenLimit: 5,
        minChars: 2,
        onAdd: function (item) {
            if(item.id=="0") {
                $.ajax({
                    type:"GET",
                    url:"token.php",
                    data:{action:"newtoken",name:item.name},
                    success: function(resp) {
                        $("#w_i_tk").tokenInput("remove", {name: item.name});
                        $("#w_i_tk").tokenInput("add", {id: resp, name: item.name});    
                    }
                });

            }

        },
        animateDropdown: false,
        allowFreeTagging: true
    });
});
</script>

token.php

<?php
if(isset($_GET["q"])) {
    $q = trim($_GET["q"]);
    $isSearchItemExists = false;
    $sql = sprintf("SELECT token_id, token from tokens WHERE token LIKE '%%%s%%' ORDER BY popularity DESC LIMIT 10", mysql_real_escape_string($q));
    $rec = mysql_query($sql);

    $arr = array();
    while($row = mysql_fetch_array($rec)) {
        $obj = new stdClass();
        $obj->id = $row["token_id"];
        $obj->name = $row["token"];
        if($obj->name==$q) {
            $isSearchItemExists = true; 
        }
        $arr[] = $obj;
    }
    if(!$isSearchItemExists) $arr = array_merge(getNewToken($q),$arr);

    $json_response = json_encode($arr);


    echo $json_response;

} else if(isset($_GET["action"]) && $_GET["action"]=="newtoken") {

    $token = strtolower($_REQUEST["name"]);
    $sql = "SELECT * FROM tokens WHERE token='$token'";
    $rec = mysql_query($sql);
    $numRows = mysql_num_rows($rec);
    if($numRows>0) {
        $row = mysql_fetch_array($rec);
        $id = $row["token_id"]; 
    } else {
        $sql = "INSERT INTO tokens SET token='$token'";
        $rec = mysql_query($sql);
        $id = mysql_insert_id();    
    }
    echo $id;
    exit;
}

function getNewToken($q) {

    $sql = "SELECT max(token_id) as token_id FROM tokens";
    $rec = mysql_query($sql);
    $row = mysql_fetch_array($rec);
    $maxToken = $row["token_id"];
    $newToken = $maxToken + 1;

    $newItem = array();
    $new = new stdClass();
    $new->id = "0";
    $new->name = $q;
    $newItem[] = $new;

    return $newItem;    
}
?>

Upvotes: 1

Chris Fritz
Chris Fritz

Reputation: 1940

This should hopefully be fixed soon in the Tokeninput master branch, but in the meantime, merging this branch into your own fork should fix this for you.

Upvotes: 0

Related Questions