0

Am having an autocomplete search box in my visualforce page with ajax call which uses a JSON static resource file to load the data. Since the JSON file is a static data source, I want to get it dynamically. I already formed a dynamic values in the controller class constructor method itself but the URL parameter of the ajax call is not accepting the getter setter variable from the controller class.

Here is my ajax call,

$.ajax({
            'async': true,
            'global': false,
            'url': "{!URLFOR($Resource.techareasubtecharea, '/techandsubtechareacombinations.json')}",
            'dataType': "json",
            'success': function (data) {
                $("#search").catcomplete({
                    delay: 0,
                    source: {!fieldDependencies},
                    select: function (event, ui) {
                        $('#search').val(ui.item.techarea + " : " + ui.item.subtecharea);
                       return false;
                    },
                })
            }

        });
    })

Now I want to replace the JSON file from static resource with dynamically formed JSON data(string variable with JSON format values) in URL parameter of the ajax call.

I tried directly replacing the getter setter variable with in the URL parameter but it is not loading the data.

Any help would be appreciated!.

Edit: static resource json data format

[{"techarea":"3rd Party Apps","subtecharea":"App Inefficiency (Performance Issue)","keywords":"","label":"3rd Party Apps => App Inefficiency (Performance Issue) => "}]

Dynamically formed string variable values

[{"techarea":"3rd Party Apps","subtecharea":"App Inefficiency (Performance Issue)","keywords":"","label":"3rd Party Apps => App Inefficiency (Performance Issue) => "}]
4
  • When you have the data, you can directly pass it to the plugin as source: data where data is your JSON data. Refer the snippet in this example.
    – Raul
    Dec 13, 2017 at 11:02
  • Am already putting the data in source: {!fieldDependencies} with URL parameter as it is with static resource file. But It is not populating anything in the search box Dec 13, 2017 at 11:07
  • ah missed it, then why are you ajax call if you have the data?
    – Raul
    Dec 13, 2017 at 11:09
  • OMG!. How I missed it. I just commented the URL parameter and changed the datatype parameter from JSON to text. It works!!!. Thanks for the help. Dec 13, 2017 at 11:13

2 Answers 2

1

You can simply remove the ajax call as you have the data with you already:

$("#search").catcomplete({
    delay: 0,
    source: {!fieldDependencies},
    select: function (event, ui) {
        $('#search').val(ui.item.techarea + " : " + ui.item.subtecharea);
       return false;
    }
})

Triggering the autocomplete directly might work.

-1

I just removed the URL parameter and changed the datatype from JSON to text, it works.

$.ajax({
            'async': true,
            'global': false,
            'dataType': "text",
            'success': function (data) {
                $("#search").catcomplete({
                    delay: 0,
                    source: {!fieldDependencies},
                    select: function (event, ui) {
                        $('#search').val(ui.item.techarea + " : " + ui.item.subtecharea);
                       return false;
                    },
                })
            }

        });
    })

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .