select2 jquery with asp.net with images

Question

i have a jquery select2 integrated webform working flawlessly but want to integrate with another dropdown with dynamic image path

scenario1 dropdown with static number of fields and known images with known image names like

<asp:DropDownList runat="server" ID="ddl_heat" CssClass="selectdropdown form-control">
    <asp:ListItem Text="Select" Selected="True" Value="" disabled="disabled"></asp:ListItem>
    <asp:ListItem Text="Low" Value="1"></asp:ListItem>
    <asp:ListItem Text="Moderately Low" Value="2"></asp:ListItem>
    <asp:ListItem Text="Moderate" Value="3"></asp:ListItem>
    <asp:ListItem Text="Moderately High" Value="4"></asp:ListItem>
    <asp:ListItem Text="High" Value="5"></asp:ListItem>
</asp:DropDownList>

now i found by digging to add images in the dropdown by using below jquery

function formatHeat(heatlvl) { if (!heatlvl.id) { return heatlvl.text; } var $heat = $('<span><img src="images/heatmeter/heatmeter ' + heatlvl.text + '.png" class="img-flag" width="50px"/> ' + heatlvl.text
+ '</span>'); return $heat; }; $('.selectdropdown').select2({ templateResult: formatHeat });

this thing works flwalessly

now i need some another thing to be done

that is

image path for heat meter comes from the database

means when list is populated data comes from database but both text and value of

<asp:ListItem>

are occupied by text and id so where to put image path and how do i set image path

Answer 1

What you can do is create an AJAX call to the server using jQuery. Write logic to fetch specific images for each drop down option and when you return this data back to the web page you can loop through the result set,find the matching drop down option and set the "data-imagepath" (or any other similar name) to the location of the image.Then whenever you need access to this field you can simply read it like this:

alert($("#ddl_heat option[value='1']").attr("data-imagepath"));

Code behind:

public partial class SetDropDownImagePath : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    [System.Web.Services.WebMethod]
    public static List<MyImage> GetImagePaths()
    {
        var image1 = new MyImage { ID = 1, Path = "../Images/bullet.png" };
        var image2 = new MyImage { ID = 2, Path = "../Images/bullet.png" };
        return new List<MyImage> { image1, image2 };
    }
}

public class MyImage
{
    public int ID { get; set; }
    public string Path { get; set; }
}

.ASPX:

<head runat="server">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script type="text/javascript">
        $(function () {
            $.ajax({
                type: "POST",
                url: 'SetDropDownImagePath.aspx/GetImagePaths',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    debugger;
                    for (var i = 0; i < response.d.length; i++) {
                        var id = response.d[i].ID;
                        var imagePath = response.d[i].Path;
                        $("#ddl_heat option[value='" + id + "']").attr("data-imagepath", imagePath);
                    }
                },
                failure: function (response) {
                    alert(response.d);
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:DropDownList runat="server" Width="200" ID="ddl_heat" CssClass="selectdropdown form-control">
            <asp:ListItem Text="Select" Selected="True" Value="" disabled="disabled"></asp:ListItem>
            <asp:ListItem Text="Low" Value="1"></asp:ListItem>
            <asp:ListItem Text="Moderately Low" Value="2"></asp:ListItem>
            <asp:ListItem Text="Moderate" Value="3"></asp:ListItem>
            <asp:ListItem Text="Moderately High" Value="4"></asp:ListItem>
            <asp:ListItem Text="High" Value="5"></asp:ListItem>
        </asp:DropDownList>
    </form>
</body>

Output:

select2 jquery with asp.net with images

Question

1 answers

solution1
0 2016-06-11 13:29:41

select2 jquery with asp.net with images

Question

1 answers

solution1 0 2016-06-11 13:29:41

solution1
0 2016-06-11 13:29:41