<script src="http://code.jquery.com/jquery-git2.js" type="text/javascript"></script>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function () {
$('.category').on('change', function () {
var category_list = [];
$('#list :input:checked').each(function () {
var category = $(this).val();
category_list.push(category);
});
if (category_list.length == 0)
$('.resultblock').fadeIn();
else {
$('.resultblock').each(function () {
var item = $(this).attr('data-tag');
if (jQuery.inArray(item, category_list) > -1)
$(this).fadeIn('slow');
else
$(this).hide();
});
}
});
});
</script>
<script type="text/javascript">
$(function () {
$("#dialog").dialog({
modal: true,
autoOpen: false,
width: 1000,
height: 500
});
$("#btnShow").click(function () {
$('#dialog').dialog('open');
});
});
</script>
<form id="form1" runat="server">
<input type="button" id="btnShow" value="View More" />
<div id="dialog" style="display: none" align="center" runat="server">
<%-- <div id="Div1" runat="server" visible="false">--%>
<table>
<tr>
<td rowspan="2">
<div class="container card">
<label class="text">
Color</label>
<asp:TextBox ID="txtnames" class="textbox" runat="server" placeholder="Search Color"
onkeyup="filter(this)" />
<ul id="list" runat="server" style="list-style-type: none;">
</ul>
<div id="filters" runat="server">
</div>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="searchresults" runat="server" id="resultdata">
</div>
</td>
</tr>
<%-- <tr>
<td colspan="2">
<div id="sugg" runat="server" visible="false">
</div>
</td>
</tr>--%>
<li>
<asp:LinkButton ID="lnkBestSellers" CssClass="btn btn-block" Text="Best Sellers"
runat="server" OnClick="bindimages" />
</li>
<tr>
</tr>
</table>
</div>
<script type="text/javascript">
function filter(element) {
var value = $(element).val();
$("#list > li").each(function () {
if ($(this).text().search(value) > -1) {
$(this).show();
}
else {
$(this).hide();
}
});
}
</script>
<script type="text/javascript">
$(".resultblock").click(function () {
var item = $(this).attr('ColorID');
$("input:checked").each(function () {
$(this).prop("checked", false);
});
});
</script>
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
fillcolor();
// fillcolors();
}
}
public void fillcolor()
{
string str = string.Empty;
string str1 = string.Empty;
string result = string.Empty;
clsColor objcolor = new clsColor(true);
clsColorProduct objProduct = new clsColorProduct(true);
objcolor.getColor();
for (int i = 0; i < objcolor.ListclsColor.Count; i++)
{
str += "<li><div class='filterblock'><input type='checkbox' id=" + objcolor.ListclsColor[i].ColorID + " name='check' value=" + objcolor.ListclsColor[i].ColorName + " class='category'><div class='font'><div class='Color' style=background-color:" + objcolor.ListclsColor[i].ColorCode + "></div></div><label class='font' for=" + objcolor.ListclsColor[i].ColorID + ">" + objcolor.ListclsColor[i].ColorName + "</label></div></li>";
if (objcolor.ListclsColor[i].ColorID != 0)
{
str1 += "<td><div class='resultblock' ColorID=" + objcolor.ListclsColor[i].ColorID + " data-tag=" + objcolor.ListclsColor[i].ColorName + "><div class='desc'><div class='desc_text'><div class='main'><div class='sub'><div class='box'>" + objcolor.ListclsColor[i].ColorName + "<span class=''><img height='10px' style='margin-left: 4px;margin: 0px 0px -1px 4px;'/></span></div></div></div></div></div></div></td>";
objProduct.getColorp();
//for (int j = 0; j < objProduct.ListclsColorProduct.Count; j++)
//{
// if (objcolor.ListclsColor[i].ColorID == objProduct.ListclsColorProduct[j].ColorID)
// {
// result += "<td><div class='resultblock' data-tag=" + objcolor.ListclsColor[i].ColorName + "><div class='desc'><div class='desc_text'><img style='width:250px;height:280px;' src='" + ConfigurationManager.AppSettings["path"].ToString() + "images/ProductColor/" + objProduct.ListclsColorProduct[j].ProductID + ".jpg" + "' alt='" + objProduct.ListclsColorProduct[j].ProductName + @"' /></div></div></div></td>";
// //sugg.Visible = true;
// }
//}
}
}
list.InnerHtml = str;
filters.InnerHtml = result;
// sugg.InnerHtml = str1;
}
protected void Button1_Click(object sender, EventArgs e)
{
dialog.Visible = true;
}
protected void bindimages(object sender, EventArgs e)
{
string str1 = string.Empty;
string result = string.Empty;
clsColor objcolor = new clsColor(true);
clsColorProduct objProduct = new clsColorProduct(true);
int i = 0;
objcolor.getColor();
for (int j = 0; j < objProduct.ListclsColorProduct.Count; j++)
{
if (objcolor.ListclsColor[i].ColorID == objProduct.ListclsColorProduct[j].ColorID)
{
result += "<td><div class='resultblock' data-tag=" + objcolor.ListclsColor[i].ColorName + "><div class='desc'><div class='desc_text'><img style='width:250px;height:280px;' src='" + ConfigurationManager.AppSettings["path"].ToString() + "images/ProductColor/" + objProduct.ListclsColorProduct[j].ProductID + ".jpg" + "' alt='" + objProduct.ListclsColorProduct[j].ProductName + @"' /></div></div></div></td>";
//sugg.Visible = true;
}
}
}
}
how to fill data on click of button
