Link to home
Start Free TrialLog in
Avatar of Rabbit W
Rabbit W

asked on

Compare Items

1. I want to add the compare checkbox under the item. When user checks the checkbox, the image will be added to the bottom  of the comparing area. The following code does not work. Please advise!
2. How to add the Compare link to the comparing area, which will be linked to the page with the four compared products. Click each product and then linked to the product page.  

Thank you!
<%@ Page Language="VB" %>

<script language="vb" runat="server">

Sub Page_Load(sender As Object, e As EventArgs)
Dim strSQL
		
 	-------------
					
</script>

<style>
.empty-border {
  padding-bottom: 100%;
  border: 1px dashed #9c9c9c;
}

#compare-box-products {
  box-shadow: 0 1px 2px 2px rgba(0, 0, 0, .2);
  background-color: #fff;
  position: fixed;
  right: 0;
  bottom: 0;
  width: 558px;
  padding: 10px;
  pointer-events: all;
  display: none;
}

.empty-border {
  width: 110px;
  height: 110px;
}

.compare-image-container img {
  width: 108px !important;
  height: 108px !important;
  border: 1px dashed #9c9c9c;
}


</style>


 
 
<body >










<div class ="grid-top-spa"><asp:Label runat="server" ID="lblMessage" /> </div>

 <asp:DataList ID="compare"
									           CellPadding="0"
                                               CellSpacing="0"
                                               RepeatDirection="Horizontal"
									           borderstyle= "none"
									           GridLines="None"
									           RepeatLayout="Table"
									           RepeatColumns="3"									          
									           ShowBorder="false"
									           runat="server" HeaderText="" HeaderStyle-BackColor="#fff" HeaderStyle-ForeColor="#FFFFFF" HeaderStyle-Font-Bold="true">

                                   <ItemTemplate>
								   
				

 


<table width="325px">

      <tr>
		<td> <a href="products.aspx?id=<%# DataBinder.Eval(Container.DataItem, "idProduct") %>">
   
        <div class="thumbnail"> <div class="thumbnail-img"><img style=" border: 1px solid gray;" src="<%=images/<%# DataBinder.Eval(Container.DataItem, "idProduct") %>.jpg" class="img-p1" alt="" /> </div></div></a>

</td>
	</tr>
	
    
	
    
    
	<tr>
		<td><%# DataBinder.Eval(Container.DataItem, "productname") %>	</td>
	</tr>
	
    
    
  
    <tr><td><input type="checkbox" class="p1"> Compare Product</td></tr>
             
   
	
</table>
 
									       
					          </ItemTemplate>
									
</asp:DataList>

 
     				
   
    
    <div id="compare-box-products">
    <strong>Compare up to 4 Products</strong>
    <br>
    <br>
    <div id="compare-box">
      <div class="compare-image-container col-xs-3">
        <div class="empty-border"> </div>
      </div>
      <div class="compare-image-container col-xs-3">
        <div class="empty-border"> </div>
      </div>
      <div class="compare-image-container col-xs-3">
        <div class="empty-border"> </div>
      </div>
      <div class="compare-image-container col-xs-3">
        <div class="empty-border"> </div>
      </div>
    </div>
    <div id="compare-box-row" class="col-xs-9">

    </div>
  </div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
 $(function() {
      $('.thumbnail input:checkbox').on('change', function() {
        var elm_class= $(this).attr('class');

        if (this.checked) {
          $('#compare-box-products').slideDown();
          $('.empty-border:first').replaceWith($('.img-' + elm_class)[0].outerHTML);
        } else {
          $('.compare-image-container .img-'+elm_class).replaceWith('<div class="empty-border"> </div>');
        }
        if( $('.thumbnail input:checkbox:checked').length === 0){
          $('#compare-box-products').slideUp();
        }
      });
    })
</script>

    
 

 
</body>

Open in new window

SOLUTION
Avatar of Zakaria Acharki
Zakaria Acharki
Flag of Morocco image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Rabbit W
Rabbit W

ASKER

I tried it, but it did not work.
Below is the code.
<%@ Page Language="VB" %>

<script language="vb" runat="server">

Sub Page_Load(sender As Object, e As EventArgs)

		
 		strSQL = ""  

		

 databinding
					
</script>

<style>
.empty-border {
  padding-bottom: 100%;
  border: 1px dashed #9c9c9c;
}

#compare-box-products {
  box-shadow: 0 1px 2px 2px rgba(0, 0, 0, .2);
  background-color: #fff;
  position: fixed;
  right: 0;
  bottom: 0;
  width: 558px;
  padding: 10px;
  pointer-events: all;
  display: none;
}

.empty-border {
  width: 110px;
  height: 110px;
}

.compare-image-container img {
  width: 108px !important;
  height: 108px !important;
  border: 1px dashed #9c9c9c;
}


</style>


<script type="text/javascript" src="jquery.min.js"></script>
 <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
 
 
</head>
 
<body>







<div><asp:Label runat="server" ID="lblMessage" /> </div>

 <asp:DataList ID="compare"
									           CellPadding="0"
                                               CellSpacing="0"
                                               RepeatDirection="Horizontal"
									           borderstyle= "none"
									           GridLines="None"
									           RepeatLayout="Table"
									           RepeatColumns="3"									          
									           ShowBorder="false"
									           runat="server" HeaderText="" HeaderStyle-BackColor="#fff" HeaderStyle-ForeColor="#FFFFFF" HeaderStyle-Font-Bold="true">

                                   <ItemTemplate>
								   
				

 


<table >

      <tr>
		<td> <a href="product.aspx?id=<%# DataBinder.Eval(Container.DataItem, "idProduct") %>">
   
        <div class="thumbnail"> <div class="thumbnail-img"><img src="small/<%# DataBinder.Eval(Container.DataItem, "idProduct") %>.jpg" class="img-p1" alt="" /> </div></div></a>

</td>
	</tr>    
	
    
    
	<tr>
		<td style="font-size: 16px; font-weight:bold; text-align:left;"><%# DataBinder.Eval(Container.DataItem, "productname") %>	</td>
	</tr>
	
    
    
  
    <tr><td><input type="checkbox" class="p1"> Compare Product</td></tr>
             
   
	
</table>
 
									       
					          </ItemTemplate>
									
</asp:DataList>

 
     				
   
    
    <div id="compare-box-products">
    <strong>Compare up to 4 Products</strong>
    <br>
    <br>
    <div id="compare-box">
      <div class="compare-image-container col-xs-3">
        <div class="empty-border"> </div>
      </div>
      <div class="compare-image-container col-xs-3">
        <div class="empty-border"> </div>
      </div>
      <div class="compare-image-container col-xs-3">
        <div class="empty-border"> </div>
      </div>
      <div class="compare-image-container col-xs-3">
        <div class="empty-border"> </div>
      </div>
    </div>
    <div id="compare-box-row" class="col-xs-9">

    </div>
  </div>


<script>
 $(function() {
     $('.thumbnail ').on('change', 'input:checkbox', function() {
        var elm_class= $(this).attr('class');

        if (this.checked) {
          $('#compare-box-products').slideDown();
          $('.empty-border:first').replaceWith($('.img-' + elm_class)[0].outerHTML);
        } else {
          $('.compare-image-container .img-'+elm_class).replaceWith('<div class="empty-border"> </div>');
        }
        if( $('.thumbnail input:checkbox:checked').length === 0){
          $('#compare-box-products').slideUp();
        }
      });
    })
</script>


    
 
    
 
</body>

Open in new window

The key to the answer here is in your compiled HTML code, the posted code will not help since we don't know how the data-list will be compiled, so the question remains the same, could you please post the compiled HTML code from the browser developer panel (hits F12 in your browser to open the developer then copy HTML the code and share it with us)?
Here is
<head><style>
.empty-border {
  padding-bottom: 100%;
  border: 1px dashed #9c9c9c;
}

#compare-box-products {
  box-shadow: 0 1px 2px 2px rgba(0, 0, 0, .2);
  background-color: #fff;
  position: fixed;
  right: 0;
  bottom: 0;
  width: 558px;
  padding: 10px;
  pointer-events: all;
  display: none;
}

.empty-border {
  width: 110px;
  height: 110px;
}

.compare-image-container img {
  width: 108px !important;
  height: 108px !important;
  border: 1px dashed #9c9c9c;
}


</style>

<script type="text/javascript" src="jquery.min.js"></script>
 <link rel="stylesheet" type="text/css" href="bootstrap.min.css"> 

 
</head><body>

<div class="grid-top-spa"><span id="lblMessage"></span> </div>

 <table id="compare" showborder="false" headertext="" style="border-style:None;border-collapse:collapse;" cellspacing="0" cellpadding="0">
	<tbody><tr>
		<td>								   
	
<table>

      <tbody><tr>
		<td> <a href="products.aspx?id=86">
   
        <div class="thumbnail"> <div class="thumbnail-img"><img style=" border: 1px solid gray;" src="images/small/86.jpg" class="img-p1" alt=""> </div></div></a>

</td>
	</tr>   
  
    <tr><td><input type="checkbox" class="p1"> Compare Product</td></tr>         
   
	
</tbody></table>
 
									       
					          </td><td> 


<table>

      <tbody><tr>
		<td> <a href="products.aspx?id=433">
   
        <div class="thumbnail"> <div class="thumbnail-img"><img style=" border: 1px solid gray;" src="images/small/433.jpg" class="img-p1" alt=""> </div></div></a>
</td>
	</tr>   
  
    <tr><td><input type="checkbox" class="p1"> Compare Product</td></tr>       
   
	
</tbody></table>								       
					          </td><td>

<table>

      <tbody><tr>
		<td> <a href="products.aspx?id=614">
   
        <div class="thumbnail"> <div class="thumbnail-img"><img style=" border: 1px solid gray;" src="images/small/614.jpg" class="img-p1" alt=""> </div></div></a>
</td>
	</tr>
	        
    
  
    <tr><td><input type="checkbox" class="p1"> Compare Product</td></tr>
             
   	
</tbody></table>
 
     
					          </td>
	</tr><tr>
		<td>


<table>

      <tbody><tr>
		<td> <a href="products.aspx?id=103">
   
        <div class="thumbnail"> <div class="thumbnail-img"><img style=" border: 1px solid gray;" src="images/small/103.jpg" class="img-p1" alt=""> </div></div></a>
</td>
	</tr>      
    
  
    <tr><td><input type="checkbox" class="p1"> Compare Product</td></tr>             
   
	
</tbody></table>							       
					         
 
     				
   
    
    <div id="compare-box-products">
    <strong>Compare up to 4 Products</strong>
    <br>
    <br>
    <div id="compare-box">
      <div class="compare-image-container col-xs-3">
        <div class="empty-border"> </div>
      </div>
      <div class="compare-image-container col-xs-3">
        <div class="empty-border"> </div>
      </div>
      <div class="compare-image-container col-xs-3">
        <div class="empty-border"> </div>
      </div>
      <div class="compare-image-container col-xs-3">
        <div class="empty-border"> </div>
      </div>
    </div>
    <div id="compare-box-row" class="col-xs-9">

    </div>
  </div>


<script>
 $(function() {
     $('.thumbnail ').on('change', 'input:checkbox', function() {
        var elm_class= $(this).attr('class');

        if (this.checked) {
          $('#compare-box-products').slideDown();
          $('.empty-border:first').replaceWith($('.img-' + elm_class)[0].outerHTML);
        } else {
          $('.compare-image-container .img-'+elm_class).replaceWith('<div class="empty-border"> </div>');
        }
        if( $('.thumbnail input:checkbox:checked').length === 0){
          $('#compare-box-products').slideUp();
        }
      });
    })
</script>


    
 
    
<style type="text/css">
#livechat-compact-container,
#livechat-full {
  right: 40px !important;
#livechat-eye-catcher {
  left: 20px !important;
  width: 250px !important;
  
  
  #livechat-compact-container {
  bottom: 50%!important;
  right: -99px!important;
  transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
}
}


}

</style>



    
</body> 

Open in new window

the coding.
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
So how to fix it in order to make it work? Thank you!
<script>
 $(function() {
     $('.thumbnail ').on('change', 'input:checkbox', function() {
        var elm_class= $(this).attr('class');

        if (this.checked) {
          $('#compare-box-products').slideDown();
          $('.empty-border:first').replaceWith($('.img-' + elm_class)[0].outerHTML);
        } else {
          $('.compare-image-container .img-'+elm_class).replaceWith('<div class="empty-border"> </div>');
        }
        if( $('.thumbnail input:checkbox:checked').length === 0){
          $('#compare-box-products').slideUp();
        }
      });
    })
</script>

Open in new window

'.thumbnail ' is a div, and it hasn't 'checked' attribute

That true and he hasn't used the "checked" anywhere with div.
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thank you! A little progress. Now the comparing area pops up, but still  no image has been added.
I have modified the body area.
 <a href="products.aspx?id=<%# DataBinder.Eval(Container.DataItem, "idProduct") %>">
<img  src="<%=images/small/<%# DataBinder.Eval(Container.DataItem, "idProduct") %>.jpg" alt="" /></a> 
<div class="img-p"><div class="p"><input type="checkbox">compare</div></div>

Open in new window


But how to modify the javascript in order to make it work? Thank yo u!
 $(function() {
  $('body').on('change', 'input:checkbox', function() {
    var elm_class = $(this).attr('class');

    if (this.checked) {
      $('#compare-box-products').slideDown();
      $('.empty-border:first').replaceWith($('.img-' + elm_class)[0].outerHTML);
    } else {
      $('.compare-image-container .img-' + elm_class).replaceWith('<div class="empty-border"> </div>');
    }

    if ($('input:checkbox:checked').length === 0) {
      $('#compare-box-products').slideUp();
    }
  });
})
 
 </script>
     				

Open in new window

SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Yes, I did. But the image won't be added.
In the script, the image needs to be added to the datalist, but I do not how to fix it. Could you advise? Thank you!
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Yes, I followed  your institutions, but had an error: Public member 'ItemIndex' on type 'DataRowView' not found.

Since I do not have itemindex. So I modified yours to mine. Please advise! Thank you!
Thank you Zakaria! I am half way  to the destination. Please advise!
Per this line: input type="checkbox" class="p<%# Container.DataItem.ItemIndex %>">
How to declare index variable  and assign the value to it?

Thank you !
Hi Rabbit, Does this request is solved or not yet?
Hi Zakaria, thank you so much for generously sharing your time and expertise!
I am almost there. You are super!
Thank you very much Zakaria! You are super like the rest of the experts! It is working now.