Base JavaScript versus jQuery example – Driving a DOM selector

One of the things a good web programmer should be able to do is write code using multiple libraries. In this case I have created two snippets that show how to select an HTML on a page using both bare-bones JavaScript and its corollary in jQuery.

The basic flow is:

MouseEnter Listener -> Modify border -> Click Listener -> Call Function

MouseOut Listener -> Restore border

This gives you an interface where you can then select a DOM element right from the web page. It would look like this:

web-selection

Here are the two different implementations, you can see why I love jQuery, its brevity is breathtaking. The biggest difference is the selector API in jQuery that does the loop processing for you.

Base JavaScript

[codesyntax lang=”javascript”]

var all_1_Links = document.getElementsByTagName('div');
for (var i = 0; i < all_1_Links.length; i++) {
    var elm = all_1_Links[i];
    elm.addEventListener('mouseenter', function() {
        this.addEventListener('click', clickListener, true);
        this.style.oldborder = this.style.border;
        this.style.border = 'thin solid red';
    });
    elm.addEventListener('mouseout', function() {
        this.style.border = this.style.oldborder;
    });
}

[/codesyntax]

 

jQuery Version

[codesyntax lang=”javascript”]

$("div").mouseenter(function(e) {
    e.target.oldborder = e.target.style.border;
    $(e.target).css("border", "thin solid red"); 
    $(e.target).click(clickListener); 
}); 
$("div").mouseout(function(e) { 
    $(e.target).css("border", e.target.style.oldborder); 
    $(e.target).off("click"); 
});

[/codesyntax]

 

Advertisements

Enabling a second extended site to use Distributed Order Management

While WebSphere Commerce (WC) can do basic order management very well, you may have some requirements that will push you to a third party order management system. One example would be a cross-channel call center, like the one in Sterling Order Management, another solution in the Smarter Commerce portfolio. If you have the developer edition of WC 7, feature pack 4 you can configure the base Madisons store for the external order management function by following these instructions: link here.

Now, if you create other sites from the same asset store (a peer to the Madisons store) the only thing you really have to do is Step 12 from the same link above:

UPDATE STORE SET INVENTORYSYSTEM=-5 WHERE STORE_ID IN (SELECT STOREENT_ID FROM STOREENT WHERE IDENTIFIER='Store_Identifier' );

This sets the inventory system to a third party one, that is what the -5 value represents. Once that is complete you need to make sure the¬†INVCNFREL table either has entries for your store id or make sure the STORE_ID is NULL for the items you want handled by the external system. Being NULL means any stores set to “-5” will use the external management system. Here are a couple of records from that table:

select * from INVCNFREL;

INVCNFREL_ID INVCNF_ID CATENTRY_ID STORE_ID STLOC_ID OPTCOUNTER
1 1 10002 NULL NULL 1
2 1 10004 NULL NULL 1

Quick Tip Video: Getting The XPath In Google Chrome

In this video I show how easy it is to get the xPath from Google Chrome. You can use the xPath when processing the DOM tree in your code. I use the javax.xml.xpath in Java to process DOM tree; the API is very powerful and easy to use.