Ahmad Ahmad - 7 months ago 32
Javascript Question

Data is not appending to Dropdown without page refresh?

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,
enter image description here

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

enter image description here

as a result only 3 options is displayed in dropdown
enter image description here

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 ?

Answer

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.