logo
Ask your WordPress questions! Pay money and get answers fast! (more info)

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.

$15
Formatting Select2 JS for remote json data

I'm trying to implement the Select2 dropdown plugin and having some issues pulling results.

Select2 Plugin Github Page

My Test Page

My current code
jQuery(document).ready(function(){
jQuery( ".gfield_list_2_cell1 input" ).select2(
{
placeholder: "Search for a fund",
minimumInputLength: 1,
ajax: {
url: "http://ktrusak.com/mf3.json",
dataType: 'json',
quietMillis: 100,
data: function(term, page) {
return {
types: ["exercise"],
limit: -1,
term: term
};
},
results: function(data, page ) {
return { results: data.results.exercise }
}
},
formatResult: function(exercise) {
return "<div class='select2-user-result'>" + exercise.term + "</div>";
},
formatSelection: function(exercise) {
return exercise.term;
},
initSelection : function (element, callback) {
var elementText = $(element).attr('data-init-text');
callback({"term":elementText});
}
});
});

This question has been answered.

Kyle | 06/17/13 at 6:12pm Edit
Tutorial: How to assign prize money


The experts have suggested, on average, a prize of $30 for this question.

(8) Responses

See a threaded view of answers?

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

  • avatar
    Last edited:
    06/17/13
    7:16pm
    Luis Abarca says:

    I think this


    results: function(data, page ) {

    return { results: data.results.exercise }

    }


    Should be:


    results: function(data, page ) {

    return { results: data.results}

    }

  • avatar
    Last edited:
    06/17/13
    7:24pm
    Kyle says:

    Thanks for the reply

    I put your change in but no results still

  • avatar
    Last edited:
    06/17/13
    7:55pm
    Luis Abarca says:

    The json response has some elements not encoded like this:

    "ELEMENTS - "Dogs of the Dow" Linked to the DJ High Yield Select TR IndexDODDOD:US",


    This quotes will break the json document.

    Also, you are trying to get the term as an object.term, but it is an array of strings, maybe you can access them like an array with 0 index.


    var index = 0;

    formatResult: function(exercise) {

    return "<div class='select2-user-result'>" + exercise[index] + "</div>";

    },

    formatSelection: function(exercise) {

    return exercise[index];

    },


    Then increment the index to get the next element, or you can change the json results to return objects like:


    {
    results: [
    {term: "13D Activist Fund - ADDDAXDDDAX:US"},
    {term: "13D Activist Fund - IDDDIXDDDIX:US"},
    {term: "1492 Small Cap Growth Fund - InstitutionalFNTGXFNTGX:US"},
    ]
    }

  • avatar
    Last edited:
    06/17/13
    8:00pm
    Kyle says:

    Ah you are absolutely right about the dogs "", I fixed that

    The whole 'exercise' thing is part of me pulling it out of this demo: http://jsfiddle.net/LUsMb/16/ I'm not sure if I actually need it or not

    The formatting I took from http://stackoverflow.com/questions/16598549/json-format-for-jquery-select2-multi-with-ajax

    I will start trying your changes, but thought I'd put those two there

  • avatar
    Last edited:
    06/17/13
    8:10pm
    Luis Abarca says:

    OK, well, the example, uses the same way to get JSON data, try to replace your current methods and JSON document with the examples i gave you, using data as object is far more easy and readable than using it as arrays.

  • avatar
    Last edited:
    06/17/13
    8:23pm
    Kyle says:

    Okay, its getting there. If you can have another look it isn't displaying the results or making a selection

    There are more errors in the Json code so I boiled it down to just a couple clean objects to test, but it uses your format

  • avatar
    Last edited:
    06/17/13
    8:30pm
    Luis Abarca says:

    Well, if you updated your JSON file, then you dont need an index, just use it as object.term.



    jQuery(document).ready(function(){
    jQuery( ".gfield_list_2_cell1 input" ).select2(
    {
    placeholder: "Search for a fund",
    minimumInputLength: 1,
    ajax: {
    url: "http://ktrusak.com/mf3.json",
    dataType: 'json',
    quietMillis: 100,
    data: function(term, page) {
    return {
    types: ["exercise"],
    limit: -1,
    term: term
    };
    },
    results: function(data, page ) {
    return { results: data.results }
    },
    formatResult: function(exercise) {
    return "<div class='select2-user-result'>" + exercise.term + "</div>";
    },
    formatSelection: function(exercise) {
    return exercise.term;
    },
    initSelection : function (element, callback) {
    var elementText = $(element).attr('data-init-text');
    callback({"term":elementText});
    }
    });
    });

  • avatar
    Last edited:
    06/17/13
    8:36pm
    Kyle says:

    Perfect, its work now. It won't let me make a selection though, can you tell why?

This question has expired.



Kyle voted on this question.



Current status of this question: Completed



Please log in to add additional discourse to this page.





Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.