jQuery change image src based on data attribute

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 :(

webdeveloper · Accepted Answer · 2012-10-02 09:39:33Z

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

answered Oct 2, 2012 at 9:39

webdeveloper

17.3k3 gold badges51 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Sideshow Over a year ago

This does not throw the errors but it does not update the first img icon in the row.

webdeveloper Over a year ago

@Sideshow maybe problem in ajax result? or in gl_job_id because this is not a unique id. My selector works: jsfiddle.net/cGbtW

Sideshow Over a year ago

I can see the logic of this but still cannot get the inage to update in my code...I'll keep slaving on :)

webdeveloper Over a year ago

@Sideshow use alert() or console.log() to debug your params

Sideshow Over a year ago

gl_job_id works fine. I think it is more to do with selecting the right icon (in this case the first icon). lister1 is the class of the containing div whereas each icon has the data-job_id attribute in the img tag. I think it is a case of finding the icons with the correct data-job_id and selecting the first one, then applting the cahnge of the image src...

|

Collectives™ on Stack Overflow

jQuery change image src based on data attribute

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related