Data is not appending to Dropdown without page refresh?

Question

Hi everyone i am facing a weird problem, i am appending my drop downdata from jquery (fSlect Plugin) Plugin link

it is my select in html

<select name="ownerparm" class="demo" multiple="multiple" id="addownok">
</select>

and this is my function for appending data options

function Preload7()
{
    $("#addownok").find('option').remove();
    console.log("i am called preload7");
    $.getJSON("/FrontEnd/resources/getowner", function (jsonData) {
        $.each(jsonData, function (i, j) {

        $("#addownok").append($("<option value="+j.societyOwnerId+"></option>").html(j.socityOwnersNames));

        }); 
        $('#addownok').fSelect();
    });

}

without refresh of page whenever i try to call Preload7() function data is not appending to drop down, if i remove fSelect plugin then it will work fine(and if i Refresh page then it will append data with fSelect also) i want this without refreshing the page,

as you see when first time i load my application data is properly append in option and in fSelect DOM,

now when i add another owner it cannot append to fSelect DOm

as a result only 3 options is displayed in dropdown

please tell me how to do this witout refreshing page i am waste my 3 days on it but i am not able to do it ?

actually it is not able to show on fiddle, simple is that with fSelect plugin data is not appending, but when i refresh my page data is append with fSelect also — Ahmad
Did you try to reload it? $('#addownok').fSelect().reload() — Alex Art.
$('#addownok').fSelect('reload'); should work, but i see its adding a duplicate search box. Alternate way could be $('#addownok').fSelect('destroy').fSelect('create'); — shakib
@shakib, You are bang on target! Go on with this for answer...Here is the fiddle for you! jsfiddle.net/rayon_1990/k425mtv1/20 — Rayon

shakib shakib · Accepted Answer · 2016-04-26T06:04:27

The plugin has some exposed API functions, such as create, reload, destroy

$('#addownok').fSelect('reload');

should reload the options after changes, but it also duplicates the search box,

Alternate solution,

$('#addownok').fSelect('destroy').fSelect('create');

hope this helps.

Data is not appending to Dropdown without page refresh?

1 Answers