Jquery display loader in different divs

Question

Hello to all and happy new year,

Well i have some divs, each div has 2 hrefs that sending some attributes in a php file.

the first href is has a class voteu and when its pressed i am using the code bellow:

<script type="text/javascript">
$(document).ready(function() {

$(".voteu").click(function() 
{

var id = $(this).attr("id");
var uip = $(this).attr("uip");
var up = $(this).attr("up");
var vn = $(this).attr("vn");

var dataString = 'id='+ id + '&uip='+ uip + '&vn='+ vn;
var parent = $(this);

$('#myloader').fadeIn("fast");

$.ajax({
   type: "POST",
   url: "up_vote.php",
   data: dataString,
   cache: false,

   success: function(html)
   {
   $('#myloader').fadeOut("fast");
   }

   });

});
});
</script>

My problem is that my loader div that contains the loading image works only for the first div.

If i am pressing the second or thertd etc href with class voteu the loader div appears only in the first div.

Any suggestions please?

[IDs should be unique](http://stackoverflow.com/questions/7262195/several-elements-with-the-same-id-responding-to-one-css-id-selector/7262229#7262229). Don't re-use the same ID on different elements on the same page. — Joseph Silber, Jan 02 '13 at 19:35
instead of using custom attributes use the `data-*` attribute — Roko C. Buljan, Jan 02 '13 at 19:39

MG_Bautista · Accepted Answer · 2013-01-09T21:46:42.957

1

See this Example

Use this:

$('.voteu').on('click', function(e){
     $('#myloader').fadeIn("fast");   
     $('#myloader').appendTo(this)    
     // Process ajax
     $('#myloader').fadeOut("fast");
});

I hope help you.

Greetings.

edited Jan 09 '13 at 21:46

answered Jan 02 '13 at 20:37

MG_Bautista

2,593
2
18
33

Great! Thank you all for your time! MG_Bautista Great job! – George L. Jan 02 '13 at 21:07
MG_Bautista i noticed that you are using "unique" class name for each div. What if you have the same class for all divs? I gave the same class to all divs and also i changed the jquery code to the new class but the loader works only in the first div. An suggestion? – George L. Jan 03 '13 at 10:40

score 0 · Answer 2 · answered Jan 02 '13 at 19:38

Without seeing the markup, I can't be sure, but it appears that you are working with an html element with the id of 'myloader', and you want it to appear near the element you clicked. However, you don't have any code that will move the div where you want it to be.

Perhaps you could try something like:

$('#myloader').appendTo(this)

before you do this:

$('#myloader').fadeIn("fast");

I didn't test this because I don't have any markup, but I think it should work. If not it should point you in the right direction.

Jquery display loader in different divs

2 Answers2