We help IT Professionals succeed at work.

Compare Items

123 Views
1 Endorsement
Last Modified: 2018-12-20
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

Comment
Watch Question

Zakaria AcharkiAnalyst Developer
CERTIFIED EXPERT
Distinguished Expert 2018
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
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

Zakaria AcharkiAnalyst Developer
CERTIFIED EXPERT
Distinguished Expert 2018

Commented:
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)?

Author

Commented:
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.
Ark
CERTIFIED EXPERT
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
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

Zakaria AcharkiAnalyst Developer
CERTIFIED EXPERT
Distinguished Expert 2018

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

That true and he hasn't used the "checked" anywhere with div.
Analyst Developer
CERTIFIED EXPERT
Distinguished Expert 2018
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
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

Zakaria AcharkiAnalyst Developer
CERTIFIED EXPERT
Distinguished Expert 2018
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
Yes, I did. But the image won't be added.

Author

Commented:
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!
Zakaria AcharkiAnalyst Developer
CERTIFIED EXPERT
Distinguished Expert 2018
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
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!

Author

Commented:
Thank you Zakaria! I am half way  to the destination. Please advise!

Author

Commented:
Per this line: input type="checkbox" class="p<%# Container.DataItem.ItemIndex %>">
How to declare index variable  and assign the value to it?

Thank you !
Zakaria AcharkiAnalyst Developer
CERTIFIED EXPERT
Distinguished Expert 2018

Commented:
Hi Rabbit, Does this request is solved or not yet?

Author

Commented:
Hi Zakaria, thank you so much for generously sharing your time and expertise!
I am almost there. You are super!

Author

Commented:
Thank you very much Zakaria! You are super like the rest of the experts! It is working now.

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.