How to change value of character in Javascript?

Question

I have this code here,

{foreach from=$cart.cartItems item="item" name="cart"}    

<div id="cart2Produkt">


 <p>{if $item.Product.ID}
                    <a href="{productUrl product=$item.Product}" data-tooltip="sticky1">{$item.Product.name_lang|truncate:20}</a>
                {else}
                    <span>{$item.Product.name_lang|truncate:20}</span>
                </a>
            {/if}
                <div id="mystickytooltip" class="stickytooltip">

<div style="padding:5px;">

<div id="sticky1" class="atip" style="width:200px;">

<img src="{$item.Product.DefaultImage.paths.3}" alt="{$item.Product.name_lang|escape}"><br>
{$item.Product.name_lang}

</div>

</div>
<div class="stickystatus"></div>

</div>

</p>
 <p>
 {include file="order/itemVariations.tpl"}
            {include file="order/block/itemOptions.tpl"}

            {if $multi}
                {include file="order/selectItemAddress.tpl" item=$item}
            {/if}
            </p>
</div>

{/foreach}

I want to change the "1"in "sticky1" to a "2" everytime this loops (it's part of a foreach).

But no luck.. Plus I am kinda new to Javascript and don't know how to document write it where I want it.

Please help!

Answer 1

It's going to be much more effective to change it while you are generating the code in your foreach loop than to fix it later with javascript. Note that if someone has javascript disabled, your code won't run and the changes won't be made. If you make the change server-side, then it gets generated correctly in the first place.

Example:

{foreach from=$cart.cartItems item="item" name="cart"}    

<div id="cart2Produkt">


 <p>{if $item.Product.ID}
                    <a href="{productUrl product=$item.Product}" data-tooltip="sticky{$item.Product.ID}">{$item.Product.name_lang|truncate:20}</a>
                {else}
                    <span>{$item.Product.name_lang|truncate:20}</span>
                </a>
            {/if}
                <div id="mystickytooltip" class="stickytooltip">

<div style="padding:5px;">

<div id="sticky{$item.Product.ID}" class="atip" style="width:200px;">

...

Using javascript (and jQuery to achieve the same thing later).

   $(function() {
         $('[data-tooltip=sticky1]').each( function(i) {
              var tipNo = i + 1;
              $(this).attr('data-tooltip','sticky' + i);
         });
   });

FWIW, using document.write() will only append things to the document. You need to navigate the DOM, either using jQuery (or another framework) or plain javascript to find the element you want to change and update it's property. Using a framework, IMO, is usually much easier than writing the same code with plain javascript.

Answer 2

Looks like you want to use the smarty iteration counter to set the id. Have a look at Example 7-11 here: http://www.smarty.net/manual/en/language.function.foreach.php

{* this will output sticky1, sticky2, sticky3, ... etc *}

{foreach from=$cart.cartItems item="item" name="cart"}
    sticky{$smarty.foreach.cart.iteration},
{/foreach}