Question

I have a list of dynamically generated divs all with unique data-id’s and several image icons contained within. When an Icon is clicked a box pops up allowing a selection dependent on the action chosen. This updates the database via ajax.

I need the first icon to change when the ajax reauest returns 3.

var ls="<div class='list_body'>
            <div class='lister1'>
                <img src='"+path+stat1+"' data-icon_no='1' data-status='"+split_stats[0]+"' data-job_id='"+split_stats[18]+"' />
                <img src='"+path+stat2+"' data-icon_no='2' data-status='"+split_stats[1]+"' data-job_id='"+split_stats[18]+"' />
                <img src='"+path+stat3+"' data-icon_no='3' data-status='"+split_stats[2]+"' data-job_id='"+split_stats[18]+"' />
                <img src='"+path+stat4+"' data-icon_no='4' data-status='"+split_stats[3]+"' data-job_id='"+split_stats[18]+"' />
                <img src='"+path+stat5+"' data-icon_no='5' data-status='"+split_stats[4]+"' data-job_id='"+split_stats[18]+"' />
                <img src='"+path+stat6+"' data-icon_no='6' data-status='"+split_stats[5]+"' data-job_id='"+split_stats[18]+"' />
            </div>
            <div class='lister'>"+split_stats[6]+" "+split_stats[7]+" "+split_stats[8]+"<br />["+split_stats[13]+"]"+"</div>
            <div class='lister'>"+split_stats[14]+"</div>
            <div class='lister'><a href='javascript:void(0);' class='lister_a'>View Appointment &amp; Actions</a></div>
        </div>";

(I have tried to space the code to make it more readable but basically this is just one line of many that is appended to the document)

My jQuery so far is…

$(document).on('click', '.submit_acc', function(){
        var selected=$('.conf_app').val();
        var agent=$('body').data('agent_id');

        if(selected==0)
        {
            alert("Please make a selection from the available options.");
            return;
        }

        var reason=$('.ag_com').val();
        var data="agent_id="+agent+"&selected="+selected+"&reason="+reason+"&job_id="+gl_job_id;
        alert(data);
        $.ajax({
            type:"POST",
            url:"admin_includes/conf_job.php",
            data:data,
            context:gl_job_id,
            success:function(html){

                if(html=="3")
                {
 //this is where I can't get it to work......
                    $('.lister1[data-job_id="'+gl_job_id+'"'').find('img').eq(0).src("images/icons/start_green.png");

                }
            }
        })//end ajax

});

I am baiscally having trouble identifying the row where to change the image.

gl_job_id is a global variable that holds the job_id which is used as the identifier in data-job_id (does that make sense ??)..

Currently this is throwing an error on the selector line but obviously the syntax is totally wrong 🙁

Answer 1

Wrong selector here:

$('.lister1[data-job_id="'+gl_job_id+'"'').find('img').eq(0).src("images/icons/start_green.png");

you trying to select div by data-job_id, also remove one ' and add ]

Something like this must be:

$('.lister1 [data-job_id="'+gl_job_id+'"]').attr('src', "images/icons/start_green.png");

this code select div, then find by data-job_id and set src attribute