How we can implement the Onclick functionality in titanium grid view item

Question

I have developed the gridview application using the widget (from this code)

https://github.com/pablorr18/TiDynamicGrid

i have modified the code as per my client requirements. Now if i like to click the view cart button on the list item it will alert the message like "Am clicked". But i tried in various ways.but i can't find the solutions. Can anyone please explain me how we are write the code for this.

I have follows below code in my application:

var items = [];
var showGridItemInfo = function(e){
    alert("Onclick the row");
}; 

var delay = (OS_ANDROID) ? 1000:500;

$.tdg.init({
    columns:3,
    space:5,
    delayTime:delay,
    gridBackgroundColor:'#e1e1e1',
    itemBackgroundColor:'#fff',
    itemBorderColor:'transparent',
    itemBorderWidth:0,
    itemBorderRadius:5,
    onItemClick: showGridItemInfo
});

function createSampleData(){
    var sendit = Ti.Network.createHTTPClient({ 
        onerror: function(e){ 
            Ti.API.debug(e.error); 
            alert('There was an error during the connection'); 
        }, 
        timeout:10000, 
    });           
    sendit.open('GET', url+'android_livedev/client/test.php?action=listitems&categoryid='+subcategorylist_category_id+'&productmin=0&productmax=50');  

    sendit.send(); 
    sendit.onload = function(){ 
        var response = JSON.parse(this.responseText); 
        if(response[0].success == 0){
            alert("No Products Found");
        }
        else {
            items = [];   
            for (var x=0;x<response[0].data.length;x++){
                var view = Alloy.createController('item_layout',{
                    image:imageurl+response[0].data[x].thumb_image,
                    product:response[0].data[x].product,
                    productprice:"$"+" "+response[0].data[x].price,
                    onItemClick: addcart,
                }).getView();
                var values = {
                    product: response[0].data[x].product,
                    image: response[0].data[x].thumb_image,
                    productid : response[0].data[x].productid,
                };
                items.push({
                    view: view,
                    data: values
                });
            };
            $.tdg.addGridItems(items);
            reateSampleData();

            $.tdg.clearGrid();
            $.tdg.init({
                columns:nColumn,
                space:nSpace,
                delayTime:delay,
                gridBackgroundColor:'#e1e1e1',
                itemHeightDelta: 0,
                itemBackgroundColor:'#fff',
                itemBorderColor:'transparent',
                itemBorderWidth:0,
                itemBorderRadius:5,
                onItemClick: showGridItemInfo
            });
            createSampleData();

        });

        $.win.open();

The item_layout.xml code is looking like :

<Alloy> 
    <View id="mainView"> 
        <ImageView id="thumb"/> 
        <Label id="product"></Label> 
        <Label id="productprice"></Label> 
        <Button id="addcart" onClick="additemtocart"/> 
    </View>
</Alloy>

EDIT:

now am getting the view and the button id from that specified view. But if am trying to click the button means can't able to do. can you check my code and give a solution.

i have added the below code :

var view = Alloy.createController('item_layout',{
        image:imageurl+response[0].data[x].thumb_image,
        product:response[0].data[x].product,
        productprice:"$"+" "+response[0].data[x].price
    }).getView();
    var controller = Alloy.createController('item_layout'); 
     var button = controller.getView('addcart');
    button.addEventListener('click', function (e){
    alert("click");
     Ti.API.info('click');
    });

Ionone

Please provide a minimal, complete, and verifiable example. The code above is incomplete and not verifiable. – Insolence

Answer 1

First switch the ids to classes because they're non-unique. Only use ID's if you must. Second, try something like this:

Try something like this:

$('.addCart').click(function() {
    var item = $(this).silblings('.product').text;
    addItemToCart(item);
});

Even better, add a data-productId attribute to the shopping cart button and you could do something like this:

$('.addCart').click(function() {
    var itemId = $(this).attr('data-productId');
    addItemToCart(itemId);
});

This is better since you're only requiring the shopping cart button to be on the screen.

All this said, you also probably need to include a fallback that adds the item to the cart when javascript isn't available on the page.

Cos

i tried your answer ...but i can't get the solution.now i have tried something and get the button id.i have updated my question .so please check my question and give me a solution. – Ionone

@KrishnaVeni, you're mixing the jQuery way of doing things and the javascript way of doing things. If you're using jQuery, I'd recommend trying to use only the jQuery methods for readability purposes (keep it all in the same api). As such, use$('.addCart').on('click', function() {alert('click'); });. You need the on method when you're referencing dynamically created elements. – Cos