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) => "}]
  • 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 '17 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 – mohammed azarudeen Dec 13 '17 at 11:07
  • ah missed it, then why are you ajax call if you have the data? – Raul Dec 13 '17 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. – mohammed azarudeen Dec 13 '17 at 11:13
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;
                    },
                })
            }

        });
    })

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.