Question

In my code I’m creating a product list dynamically using PHP(see image) and the currosponding labels and image paths are stored into hidden fields(created dynamically using PHP) now on document.ready() method i set the first list item’s imagepath to img's src and its remarks to label remarks using first hidden fields for remark and imagepath.

and on listitem click i want to change it my function set these values to img and label rightly(checked using alerts) but when function ends it set the image src and remarks innertext to default that is set on document.ready() method

now my question is can i prevent the document.ready() to be executed next time on javascript function call

My View :
As the images are reloaded so the page rendering is done again so the document.ready is called again and set these values again to default.

Note :

My page is not reloading any time only images and labels are being changed

The listshown in image is just one group other group is also created dynamically .

server side code in PHP

<?php 
for($j=0;$j<count($productstr);$j++) { 
$valuerem = $productstr[$j]["pcode"];
$idrem  = "rem".$j.$grp;
$valueimg =$productstr[$j]["imgpath"];
$idimg = "img".$j.$grp;
echo "<input type='hidden' value='$valuerem' id='$idrem' />" ;
echo "<input type='hidden' value='$valueimg' id='$idimg' />" ;
}?>
<script>   
   $(document).ready(function() {
    idrv < ? PHP echo $grp; ? > = 'rem0<?PHP echo $grp; ?>';
    idmv < ? PHP echo $grp; ? > = 'img0<?PHP echo $grp; ?>';
    $('#txt<?PHP echo $grp; ?>').text(document.getElementById(idrv < ? PHP echo $grp; ? ).value);
    alert($('#txt<?PHP echo $grp; ?>').text());
    $('#img<?PHP echo $grp; ?>').attr('src', document.getElementById(idmv < ? PHP echo $grp; ? > ).value);
    alert($('#img<?PHP echo $grp; ?>').attr('src'));
  });

  function Change(id) {
    idrv < ? PHP echo $grp; ? > = 'rem' + id;
    idmv < ? PHP echo $grp; ? > = 'img' + id;
    $('#txt<?PHP echo $grp; ?>').text(document.getElementById(idrv < ? PHP echo $grp; ? > ).value);
    alert($('#txt<?PHP echo $grp; ?>').text());
    $('#img<?PHP echo $grp; ?>').attr('src', document.getElementById(idmv < ? PHP echo $grp; ? > ).value);
    alert($('#img<?PHP echo $grp; ?>').attr('src'));
    return true;
  }​
</script>

alerts are used just to test the values

the code that are being generated at client browser

 <tr>
    <td width="220px" valign="top" align="left">
    <input id="YN" type="hidden" value="true">
    <input id="rem00" type="hidden" value="SPL FUNNEL 1">
    <input id="img00" type="hidden" value="adminpanel/product_images/4f8e530154d74155.jpg">
    <input id="rem10" type="hidden" value="SPL FUNNEL 2">
    <input id="img10" type="hidden" value="adminpanel/product_images/4f8e53daf13e6156.jpg">
    <input id="rem20" type="hidden" value="SPL FUNNEL 3">
    <input id="img20" type="hidden" value="adminpanel/product_images/4f8e543100eaf157.jpg">
    <input id="rem30" type="hidden" value="SPL FUNNEL 4">
    <input id="img30" type="hidden" value="adminpanel/product_images/4f8e545a829e1158.jpg">
    <script>
    $(document).ready(function() {
        idrv0 = 'rem00';
        idmv0 = 'img00';
        $('#txt0').text(document.getElementById(idrv0).value);
        alert($('#txt0').text());
        $('#img0').attr('src', document.getElementById(idmv0).value);
        alert($('#img0').attr('src'));
    });

    function Change(id) {
        $('#YN').val('false');
        idrv0 = 'rem' + id;
        idmv0 = 'img' + id;
        $('#txt0').text(document.getElementById(idrv0).value);
        alert($('#txt0').text());
        $('#img0').attr('src', document.getElementById(idmv0).value);
        alert($('#img0').attr('src'));
        return true;
    }​
    </script>
    <ul>
    <li>
    <a id="00" style="text-decoration: none; text-size: 1.1em; color: " 
onclick=" Change(this.id); alert($('#txt0').text()); alert($('#img0').attr('src'));">
SPL FUNNEL 1</a>
    </li>
    <li>
    <li>
    <li>
    </ul>
    </td>
    <td valign="bottom" align="left" colspan="2">
    <td width="110px" valign="bottom" align="left" style="width: 180px">
    </tr>

Answer 1

Gonna take a guess that each time you’re clicking an anchor, its executing a new page load. If so, you likely need to add preventDefault to the anchors onClick method.

Assuming that your code looks something like this, add the preventDefault() where appropriate:

$('a.availableProducts').click(function(ev){
   ev.preventDefault();
   //do image stuff or whatever
});