How to prevent refreshing the page continuously when add Chosen Image in Asp .net document ready function

Question

In one of my ASP.Net project I have used the chosen-image (https://github.com/djgrant/chosen-image) for add images to drop down list.

I added chosen library as well. Everything work fine for chosen. It will create the chosen list view if I use following code in document load function.

 $(document).ready(function () {
          $(".chosen-select").chosen({
              disable_search_threshold: 10
                 });
    }

Then I wanted to add images to list view. So i added chosen-image js file and css files and changed the above code as following.

$(document).ready(function () {
              $(".chosen-select").chosenImage({
                  disable_search_threshold: 10
                     });
        }

in the back end I am binding the images to list view.

protected void Bind_BuyerImages() {
        if (cmbBuyer != null)
        {
            foreach (ListItem li in cmbBuyer.Items)
            {
                li.Attributes["data-img-src"] = "../Buyers/" + li.Value; 
            }
        }
    }

In the list view all the images are showing but page is refreshing continuously. How can i prevent this ?

Answer 1

I don't know how the results of chosenImage should look like, because I can't see the example from the Git, but there's a forked chosen version which allow you to customize the item inside the list that you can use from here

then you can call the function like this

$('.chosen-select').chosen({
    template: function (text, templateData) {
        return "<img src='" + templateData.imgsrc + "'></img> <span>" + text + "</span>";
    }
});

if you need to change the style of the item, just add class for it's template (img and span for this example), then style it with the class from the CSS

then when you bind the list, change it to

foreach (ListItem li in cmbBuyer.Items)
{
    li.Attributes["data-imgsrc"] = "../Buyers/" + li.Value; 
}

Edit:

After I recheck it, it only pass 2 parameters in the template function, so you need to change

template: function (text, value, templateData)

to

template: function (text, templateData)

Here's an example of the custom template: Demo (The CSS doesn't load when I try it in the Fiddle), try to change your template to what you need.