I want to change content of a DIV which is in the TD (Table Tag); every div has unique ID viz. picked_cJN_031599, picked_cJN_031596; every div is prefixed with picked_cJN_ and a unique ID came from database; I want to change the value of any div just by passing ID and that ID will append picked_cJN_ like

function picked(cjn)
{
$.ajax({
            type:'post',
            url:'ajax-picked.php',
            data:'cJN='+cjn,
            success:function(response){
                if(response)
                {
                    $('#picked_cJN_').html(response);
                }
            }
        })

}

but it is not doing anything; I am also getting the response.

Below is the block of a TR tag

<tr bgcolor="#E3E3E3" class="font_red_12">
        <td bgcolor="#E3E3E3" class="right_solid_2" style="border-left:1px solid #2A4E98">
        <a href="srf.php?cJN=031596">031596</a>
        <input name="cb031596" type="checkbox" onClick="javascript:ds(this);"  value="031596" >
        <br>
        <div id="picked_cJN_031596" style="margin-top:5px; cursor:pointer;" onClick="picked(031596)">Click</div>
        </td>
        <td class="right_solid_2">Magnifix NZ LTD</td>
        <td class="right_solid_2">gretle </td>
        <td class="right_solid_2">chinese</td>
        <td class="right_solid_2">i9500w</td>
        <td class="right_solid_2">Repaired                </td>
        <td class="right_solid_2">Has been sent to dealer</td>
        <td class="right_solid_2">28 Mar 2014</td>
        <td style="border-right:1px solid #2A4E98"><a href="srf.php?cJN=031596">F</a> <a href="rtp.php?cJN=031596">T</a>
                        <a href="sri.php?cJN=031596" target="_blank">R</a> <a href="disc.php?cJN=031596" target="_blank">D</a>
                        <a href="de_srf_2c.php?cJN=031596">S</a> 
            <a href="log.php?cJN=031596">L</a> </td>
      </tr>

Recommended Answers

All 2 Replies

Member Avatar for stbuchok

I would create the click events through jQuery and not put them on the actual element. You are able to do a selector that grabs all the elements that start with "picked_cJN_" and then from that you have the number you need as all you need to do is take the id and replace "picked_cJN_" to get the number that needs to be passed in. This also makes it so that if these divs get added dynamically through JavaScript/jQuery, you don't need to bind the events as you are binding to document and checking what element was clicked. No new code will need to be created for new ones that you add later.

JavaScript

$(function(){
    $(document).on('click', '[id^="picked_cJN_"]', function(){
        var $that = $(this);

        $.ajax({
            type:'post',
            url:'ajax-picked.php',
            data:'cJN=' + $that.attr('id').replace('picked_cJN_'),
            success:function(response){
                if(response){
                    $that.html(response);
                }
            }
        });
    });
}

$('#picked_cJN_'+cjn).html(response);

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.