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.