Select input with values from mysql database

Question

I want to use this jquery plugin to get values from database...

I create jquery ajax code and HTML to get values from database:

 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<link href="http://ivaynberg.github.com/select2/select2-3.3.2/select2.css" rel="stylesheet" type="text/css" />
<script src="http://ivaynberg.github.com/select2/select2-3.3.2/select2.js"></script>
</head>

<body>


<select id="test" style="width:200px;">
              <option value=""><option>

    </select>


        <script>
$('#test').select2({
    ajax: {
        dataType: "json",
        url: "json.php",
        results: function (data) {
            return {results: data};
        }
    }
});

</script>
  </body>

and json.php code:

<?php
$pdo=new PDO("mysql:dbname=ddd;host=localhost","ddd","ddd");
$statement=$pdo->prepare("SELECT id,ime_prezime FROM radnici");
$statement->execute();
$results=$statement->fetchAll(PDO::FETCH_ASSOC);
$json=json_encode($results);
echo $json;
?>

when I run php code i get json:

[{"id":"1","ime_prezime":"Pera Peric"}]

s the problem is not with php code... what is wrong in my html/jquery code?

I dont get anything, I cant fetch values from json.php file

UPDATE:

I find error is was json format, but now I cant save values that I get , so when I click values just disapear...

<input id="test" style="width:300px;">
<select multiple id="test" style="width:300px"></select>




        <script>
        function formatValues(data) {
    return data.ime_prezime;
}
$('#test').select2({
    ajax: {
        dataType: "json",
        url: "json.php",
        results: function (data) {
            return {results: data};
        }
    },
    formatResult: formatValues
});

</script>

i also try with: <div id="test" style="width:300px;"></div> but again i dont get values from database — gmaestro
– gmaestro, Commented Mar 13, 2014 at 19:33
If you use chrome, right-click->inspect element->network tab and refresh the page and see what request and response are for the ajax — NEO
– NEO, Commented Mar 13, 2014 at 19:45
I update my code but now I cant choose it, becouse when I choose and click then value just dessapear — gmaestro
– gmaestro, Commented Mar 13, 2014 at 19:50

Hüseyin BABAL · Accepted Answer · 2015-09-22 05:58:14Z

1

You need to return id, text pair and use following structure;

<input type="hidden" name="test" id="test" style="width:200px;"/>



$('#test').select2({
    ajax: {
        dataType: "json",
        url: "json.php",
        results: function (data) {
            return {results: data};
        }
    }
});

You can see demo here: http://jsfiddle.net/huseyinbabal/68fD2/1/ . In demo, I have used local data, but it works with your ajax code like above.

Edit:

If you want to do that as in your demo, you can use following;

function formatValues(data) {
    return data.ime_prezime;
}
var test = $('#test');
var data = [{"id":"1","ime_prezime":"Pera Peric"},
          {"id":"2","ime_prezime":"Something else"},
          {"id":"3","ime_prezime":"Lorem"},
          {"id":"4","ime_prezime":"Ipsum"}
         ];
$(test).select2({
    data:{results: data, text: 'ime_prezime'},
    width: "300px",
    formatResult: formatValues,
    formatSelection: formatValues,
    multiple: true
});

Here is a working demo: http://jsfiddle.net/huseyinbabal/68fD2/6/

edited Sep 22, 2015 at 5:58

answered Mar 13, 2014 at 19:51

Hüseyin BABAL

15.6k5 gold badges53 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

gmaestro Over a year ago

yes but please try, agroagro.com/select2/select.html when I choose value then just desapear, dont get it

gmaestro Over a year ago

how to choose multiple? how to save data, Why my data desapear when I coose it

Hüseyin BABAL Over a year ago

Let me check your demo you have provided, and I will fix it

Hüseyin BABAL Over a year ago

@gmaestro Your input hidden, and multiple select has same id, could you please update id of multipe select as test_multiple? then we can continue

Hüseyin BABAL Over a year ago

@gmaestro I have fixed it. See my updated answer for Edit part

|

Collectives™ on Stack Overflow

Select input with values from mysql database

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related