Thursday, June 4, 2015

Jquery : Change Product Image on click event

Following Example shows how to use jquery to change the product image in Product Image Container.

The same example can be tested in jsfiddle (http://jsfiddle.net/sanjayingole/9que4n1p/5/)

We have a left panel and a right panel, where :

  • Left Panel contains small image icons.
  • Right Panel shows the larger image when an icon from left panel is clicked.

Javascript :


$(".imageIconLink").click(function() {
    
    var imgSrc= $(this).find("img").attr("src");
    
    $(".largeImage").attr("src", imgSrc); 
});


CSS :
.smallImage {
    height: 80px; width: 80px; border: 0px solid;
}

.largeImage {
    height: 280px; width: 380px; border: 0px solid;
}

.leftImgDiv {
    width : 20%;
    float : left;
    height : 300px;
    overflow : auto;
}

.rightImgDiv {
    width : 80%;
    float : right;
}


HTML :


<div class="leftImgDiv">
<a href="#" class="imageIconLink">
    <img class="smallImage" src="http://s7d1.scene7.com/is/image/BedBathandBeyond/33748242127673p?hei=2000&amp;wid=2000&amp;qlt=50,1" :="" border="" width="2000" height="2000"/>
</a>
    
<a href="#" class="imageIconLink">
    <img class="smallImage" src="http://www.brookstone.com/webassets/product_images/700x700/833371p.jpg" width="252" height="252"/>
    </a>    

<a href="#" class="imageIconLink">
    <img class="smallImage" src="http://slimages.macys.com/is/image/MCY/products/8/optimized/2546128_fpx.tif?01AD=31absA3WJUG8eGA5NUMCutd7x16A-v8cmsm4k_DZNgdpUvQGEe2iugA&amp;01RI=958CD8AFBE261DF&amp;01NA=&amp;wid=1320&amp;hei=1616&amp;fit=fit,1&amp;$filterlrg$"/>
</a>

<a href="#" class="imageIconLink">
    <img class="smallImage"
    src="http://www.u3j.org/wp-content/uploads/2014/07/uncategorized-amazing-where-to-buy-leather-sofa-in-malaysia-where-to-buy-leather-furniture-repair-kits-where-to-buy-leather-furniture-repair-kit-where-to-buy-leather-furniture-in-bali-where-to-bu.jpg" />
</a>
    
    
<a href="#" class="imageIconLink">
    <img class="smallImage"
    src="http://www.u3j.org/wp-content/uploads/2014/07/uncategorized-amazing-where-to-buy-leather-sofa-in-malaysia-where-to-buy-leather-furniture-repair-kits-where-to-buy-leather-furniture-repair-kit-where-to-buy-leather-furniture-in-bali-where-to-bu.jpg" />
</a>
</div>    
    
<div class="rightImgDiv">
    <img class="largeImage" src="http://s7d1.scene7.com/is/image/BedBathandBeyond/33748242127673p?hei=2000&amp;wid=2000&amp;qlt=50,1"/>
</div>





Saturday, May 30, 2015

Object doesn't support property or method 'dialog'

Object doesn't support property or method 'dialog'

Suggestions:
Check the jquery file path if its relative url.
Check for multiple references of jquery js file in final html. If its invoked from multiple times from different jsps included in one page then it might cause this exception. Better to put its reference in one common jsp file and include it once in parent jsp.

In my case I had duplicate references to following js.
<script src="include/scripts/jquery-1.8.1.min.js"></script>

Also as observed this will be fine if you have duplicate inclusion in same jsp or html , but if there are multiple child jsps with jquery inclusion, this might cause the problem.

Tuesday, March 10, 2015

Search for a String/ Jar name in SVN repository

Following command can be used :

* search for a specific String
svn list -R [[repository path]] | findstr /s "string to find" > D:\search-results.xml


* search for a specific file
svn list -R <<repository path>> | findstr [[filename]] > D:\search-results.xml

Thursday, October 9, 2014

Scroll to a specific row of the table using Jquery

Following example show  how to scroll to a specific row of the table in a div with overflow set to true. The example shown here has two tables Employees and Departments.On Clicking an employee the second table should scroll to the corresponding Depart row and highlight that row.

This example can be quickly tested on jsfiddle: http://jsfiddle.net/sanjayingole/z9gw3rb7/2/embedded/result/

 <html>
<head>
<style>
body { background-color: #EFFFEF; color: #000000; }

.tableDiv {
    border : solid 1px #000000;color: #0000FF; margin : 10px; background : #FFEFFF; height : 100px;  float : left; overflow : auto; 
}
.empDiv {
    width : 70%;
}
.empLink {
    color : #0000FF;
}
.column{
    padding-left : 10px;
}
.even {
    background : #EFDFEF;
}


</style>

<script>
function scrollIntoView(element, container) {
  var containerTop = $(container).scrollTop();
  var containerBottom = containerTop + $(container).height();
  var elemTop = element.offsetTop;
  var elemBottom = elemTop + $(element).height();
  $('tr[rel="deprow"]').removeAttr("style")
  $(element).attr("style", "background : #AFFFA0");
  if (elemTop < containerTop) {
    $(container).scrollTop(elemTop);
  } else if (elemBottom > containerBottom) {
    $(container).scrollTop(elemBottom - $(container).height());
  }
}

$(document).ready(function() {
    $('a[rel="testclick"]').click(function(){
        $('a[rel="testclick"]')
        var containerDiv = document.getElementById('departDiv');
        //var itsme = $( $.attr(this, 'href'));//document.getElementById('itsme');
        var itsme =document.getElementById($.attr(this, 'href'));
        scrollIntoView(itsme, containerDiv);

        return false;
    });
});

</script>

</head>

<body>
   
    <h1 id="top">Scroll to a specific row of the table in a div with overflow set to true .</h1>
    <p>The example shown here has two tables Employees and Departments.
     On Clicking an employee the second table should scroll to the corresponding Depart row and highlight that row.</p>
   
    <div id="employeeDiv" class="tableDiv empDiv">
     <table>
        <tbody>
           <tr class="row">
                <td class="column"><a href="dep01" rel="testclick" class="empLink">E01</a></td>
                <td  class="column">John Ramsey</td>
                <td  class="column">Software Engineer</td>
                <td  class="column">IT dept</td>
            </tr>
            <tr class="row even">
                <td class="column"><a href="dep02" rel="testclick" class="empLink">E02</a></td>
                <td  class="column">Lisa Collins</td>
                <td  class="column">HR Manager</td>
                <td  class="column">HR dept</td>
            </tr>
            <tr class="row">
                <td class="column"><a href="dep01" rel="testclick" class="empLink">E03</a></td>
                <td  class="column">David Beckham</td>
                <td  class="column">Junior Software Engineer</td>
                <td  class="column">IT dept</td>
            </tr>
            <tr class="row even">
                <td class="column"><a href="dep02" rel="testclick" class="empLink">E04</a></td>
                <td  class="column">Lisa Kudrow</td>
                <td  class="column">Sr HR Manager</td>
                <td  class="column">HR dept</td>
            </tr>   
              <tr class="row">
                <td class="column"><a href="dep01" rel="testclick" class="empLink">E05</a></td>
                <td  class="column">Tom Cruise</td>
                <td  class="column">Architect</td>
                <td  class="column">IT dept</td>
            </tr>    
              <tr class="row even">
                <td class="column"><a href="dep03" rel="testclick" class="empLink">E06</a></td>
                <td  class="column">Paula Abdul</td>
                <td  class="column">Admin Officer</td>
                <td  class="column">ADMIN Dept</td>
            </tr>    
            <tr class="row">
                <td class="column"><a href="dep04" rel="testclick" class="empLink">E07</a></td>
                <td  class="column">Tom Hanks</td>
                <td  class="column">Analyst</td>
                <td  class="column">R&amp;D</td>
            </tr>    
    </tbody>
    </table>
    </div>
<div id="departDiv" class="tableDiv">
    <table>
        <tbody>
            <tr id="dep01" class="row" rel="deprow">
                <td class="column">DEP01</td>
                <td  class="column">IT & Development</td>
                <td  class="column">Chicago</td>
                <td  class="column">Address : 123 ABC St, Chicago IL</td>
            </tr>
         <tr id="dep00" class="row even" rel="deprow">
                <td class="column">TEST</td>
                <td  class="column">TEST Depart</td>
                <td  class="column">Chicago</td>
                <td  class="column">Address : 123 ABC St, Chicago IL</td>
            </tr>
            <tr id="dep00" class="row" rel="deprow">
                <td class="column">TEST</td>
                <td  class="column">TEST Depart</td>
                <td  class="column">Chicago</td>
                <td  class="column">Address : 123 ABC St, Chicago IL</td>
            </tr>
            <tr id="dep02" class="row even" rel="deprow">
                <td class="column">DEP02</td>
                <td  class="column">HR Depart</td>
                <td  class="column">Chicago</td>
                <td  class="column">Address : 123 ABC St, Chicago IL</td>
            </tr> <tr id="dep00" class="row" rel="deprow">
                <td class="column">TEST</td>
                <td  class="column">TEST Depart</td>
                <td  class="column">Chicago</td>
                <td  class="column">Address : 123 ABC St, Chicago IL</td>
            </tr> <tr id="dep00" class="row even" rel="deprow">
                <td class="column">TEST</td>
                <td  class="column">TEST Depart</td>
                <td  class="column">Chicago</td>
                <td  class="column">Address : 123 ABC St, Chicago IL</td>
            </tr> <tr id="dep00" class="row" rel="deprow">
                <td class="column">TEST</td>
                <td  class="column">TEST Depart</td>
                <td  class="column">Chicago</td>
                <td  class="column">Address : 123 ABC St, Chicago IL</td>
            </tr>
            <tr id="dep03" class="row even" rel="row">
                <td class="column">DEP03</td>
                <td  class="column">Admin Department</td>
                <td  class="column">Chicago</td>
                <td  class="column">Address : 123 ABC St, Chicago IL</td>
            </tr> <tr id="dep00" class="row" rel="deprow">
                <td class="column">TEST</td>
                <td  class="column">TEST Depart</td>
                <td  class="column">Chicago</td>
                <td  class="column">Address : 123 ABC St, Chicago IL</td>
            </tr> <tr id="dep00" class="row even" rel="deprow">
                <td class="column">TEST</td>
                <td  class="column">TEST Depart</td>
                <td  class="column">Chicago</td>
                <td  class="column">Address : 123 ABC St, Chicago IL</td>
            </tr> <tr id="dep00" class="row" rel="deprow">
                <td class="column">TEST</td>
                <td  class="column">TEST Depart</td>
                <td  class="column">Chicago</td>
                <td  class="column">Address : 123 ABC St, Chicago IL</td>
            </tr> <tr id="dep00" class="row even" rel="deprow">
                <td class="column">TEST</td>
                <td  class="column">TEST Depart</td>
                <td  class="column">Chicago</td>
                <td  class="column">Address : 123 ABC St, Chicago IL</td>
            </tr>
            <tr id="dep04" class="row" rel="deprow">
                <td class="column">DEP04</td>
                <td  class="column">Research &amp; Development</td>
                <td  class="column">San Francisco</td>
                <td  class="column">Address : 123 Crookedest St, San Francisco, CA</td>
            </tr>

    </tbody></table>
</div>
</body>


</html>

Friday, March 21, 2014

Weblogic 11g deployment error , loader constraint violation: when resolving field "DATETIME"

Error :

 INFO com.sun.jersey.server.impl.application.WebApplicationImpl Initiating Jersey application, version 'Jersey: 1.8 06/24/2011 12:17 PM'
<Mar 20, 2014 3:08:39 PM CDT> <Error> <HTTP> <BEA-101216> <Servlet: "jersey-serlvet" failed to preload on startup in Web application: "sampleapp".
java.lang.LinkageError: loader constraint violation: when resolving field "DATETIME" the class loader (instance of weblogic/utils/classloaders/ChangeAwareClassLoader) of the referring class, javax/xml/datatype/DatatypeConstants, and the class loader (instance of <bootloader>) for the field's resolved type, javax/xml/namespace/QName, have different Class objects for that type


Solution:

The error occurred due to a conflicts between the class provided by the weblogic and the jaxb-impl.jar packaged within ear file.

I added the jax-impl dependency in pom as 'provided' scope so that its excluded from packaging. The container provided classes are used then.

<dependency>
                <groupId>com.sun.xml.bind</groupId>
                  <artifactId>jaxb-impl</artifactId>
                  <version>2.3.1</version>
                  <scope>provided</scope>               
</dependency>   

com.sun.jersey.spi.service.ServiceConfigurationError: com.sun.jersey.spi.HeaderDelegateProvider

Error on adding Jersey jars for Restful Webservices:

Message icon - Error [HTTP:101216]Servlet: "jersey-serlvet" failed to preload on startup in Web application: "sampleapp". com.sun.jersey.spi.service.ServiceConfigurationError:
com.sun.jersey.spi.HeaderDelegateProvider: The class com.sun.jersey.core.impl.provider.header.LocaleProvider implementing provider interface
com.sun.jersey.spi.HeaderDelegateProvider could not be instantiated: null at com.sun.jersey.spi.service.ServiceFinder.fail(ServiceFinder.java:602) at
com.sun.jersey.spi.service.ServiceFinder.access$800(ServiceFinder.java:159) at com.sun.jersey.spi.service.ServiceFinder$LazyObjectIterator.hasNext(ServiceFinder.java:892) at
com.sun.jersey.core.spi.factory.AbstractRuntimeDelegate.<init>(AbstractRuntimeDelegate.java:76) at com.sun.jersey.server.impl.provider.RuntimeDelegateImpl.<init>
(RuntimeDelegateImpl.java:54) at sun.reflect.NativeConstructorAccessorImpl.newInstance0(Native Method) at
sun.reflect.NativeConstructorAccessorImpl.newInstance(NativeConstructorAccessorImpl.java:39) at
sun.reflect.DelegatingConstructorAccessorImpl.newInstance(DelegatingConstructorAccessorImpl.java:27) at java.lang.reflect.Constructor.newInstance(Constructor.java:513) at
java.lang.Class.newInstance0(Class.java:355) at java.lang.Class.newInstance(Class.java:308) at javax.ws.rs.ext.FactoryFinder.newInstance(FactoryFinder.java:65) at
javax.ws.rs.ext.FactoryFinder.find(FactoryFinder.java:117) at javax.ws.rs.ext.RuntimeDelegate.findDelegate(RuntimeDelegate.java:105) at
javax.ws.rs.ext.RuntimeDelegate.getInstance(RuntimeDelegate.java:91) at javax.ws.rs.core.EntityTag.<clinit>(EntityTag.java:35) at java.lang.Class.forName0(Native Method) at


Fix:

This exception is thrown when Jersey services can not find out specified package and class to instantiate. I verified the correct package where I had my restful service and corrected this path.

<servlet>
       <servlet-name>jersey-serlvet</servlet-name>
       <servlet-class>com.sun.jersey.spi.container.servlet.ServletContainer</servlet-class>
       <init-param>
            <param-name>com.sun.jersey.config.property.packages</param-name>
         <param-value>com.cccis.sampleapp.restful</param-value>
       </init-param>
       <init-param>
               <param-name>com.sun.jersey.api.json.POJOMappingFeature</param-name>
            <param-value>true</param-value>
          </init-param>
       <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>jersey-serlvet</servlet-name>
        <url-pattern>/
sampleapp/*</url-pattern>
    </servlet-mapping>
   

Sunday, March 9, 2014

MongoDB : Insert a DBRef for a given id in a DBCollection

Following example describes the use of DBRefs in a collection. DBRef can be used to define a reference to record in a different collection. This is similar to Foreign Key in Oracle but the advantage of MongoDB is its flexibility to allow DBRef from different collections in same column.

In the example below, a new employee record has to be added to HR department.

import com.mongodb.BasicDBObject;
import com.mongodb.DB;
import com.mongodb.DBCollection;
import com.mongodb.DBCursor;
import com.mongodb.DBObject;
import com.mongodb.DBRef;
import com.mongodb.MongoClient;
import com.mongodb.MongoException;

....


    // Get the Database
    DB employeeDB = mongoClient.getDB("employeeDB");

    /* Get the Database Reference for the HR department. The HR is primary key/_id in department table. */
    DBRef departmentHR = new DBRef(employeeDB, "department", "HR");

    // Get the Employee Collection
    DBCollection employeeRecords = employeeDB.getCollection("employee");

                                   
   // Create a Database object to insert new Employee 
   BasicDBObject newEmployee = new BasicDBObject();
   newEmployee.put("employee_id", "1234");


   // Add the DBRef for HR department to this employee
   newEmployee.put("department_id", departmentHR);

   //Insert a new record for Employee.
   employeeRecords.insert(newEmployee);


Please leave a comment for queries/suggestions.