Jquery/Php Help(function is running twice)

[nonamedude]

I am working on my project and I decided to include jquery in it so that it can have a rating system. Everything works fine but the function that runs on being clicked is being ran twice.

This is what I have right now;

code:

$(document).ready(function()             { //$('.common').bind('click', function () { //var myid = $(this).attr('id'); //});                 $('.common').bind('click',function()                 {                  var myid = $(this).attr('id');                     var newValue = parseInt(myid) + 10;                     $( "#" + myid + " img").attr("src","images/thumbup_blue.png");                     $( "#" + (newValue) + " img").attr("src","images/thumbdown_gray.png");                  $.get(                     "http://localhost/gwu/folder/includes/mqsql.php?id="+myid,                     null,                     function(data) {                         var value = data;                                                 alert (value);                                                 // $('#c').replaceWith(value);                 // $( "#" + myid).html(value);                 }                 )                 }             )                 $('.common2').bind('click',function()                 {                             var myid = $(this).attr('id');                             var newmyid = myid -10;                        $.get(                     "http://localhost/folder/includes/mqsql2.php?id="+newmyid,                     null,                     function(data) {                         // alert(data);                         var value2 = data;                        // alert (value);                         alert (value2);                         // $('#c').replaceWith(value);                      //  $( "#" + myid).html(value);                 }                 )                                                 $("#" + myid + " img").attr("src","images/thumbdown_red.png");                   $("#" + (myid-10) + " img").attr("src","images/thumbup_gray.png");                 }             )             }         )

So the piece of code above increments the value of something in the database, and since its running twice, its incrementing it twice o.0
And this is is the code for my images.

code:

<a id = $newNews class = 'common'>                                  <img id=$newNews class = 'common' name=imgName border=0 src='images/thumbup_gray.png'                                    >                                  </td>                                 <td>                              <div id=$newNews class = 'common'>0</div></a>                                         </td>

I have no idea why this is happening.

[2goto1]

I'm guessing that jQuery event propagation is working its way up the event chain from the image or the div, up to the anchor tag.

Try narrowing your jQuery selector to $("a.common") so that click will only fire for your anchor links, if that's your intention. Or remove class="common" for your image and div tags, so that the "common" class is only assigned to your anchor tags

[DemonWasp]

Alternately, you can stop JQuery from propagating the event internally by modifying your handler:

code:

$('.common2').bind (     'click',     function ( event ) {         event.stopPropagation();         // event-handling code here...     } );

But in general, 2goto1's solution makes more sense. Write clear, obvious code and you can largely eliminate this kind of issue.

You should probably also use relative URLs for your GET operations.

[nonamedude]

Thanks, specifying the anchor made it work .

The last problem I have is printing out stuff to my div
Right now, i use

$( "#" + myid).html(value);
But that just changes my img and prints out value.

I need it to print out to the div

<div id=$newNews class = 'common'>0</div>
</td>

I cant seem to find the code for that :/

[2goto1]

<div id=$newsNews is not semantically correct HTML. Is $newsNews a php variable, and if so what does the rendered HTML wind up looking like?

If you had an id in your div such as <div id="foo", then you should be able to write your HTML to it with $("#foo").html(value).

As is you could say $("div.common").html(value). Just wasn't sure what $newsNews is supposed to represent.

Also remember that HTML is invalid when two or more elements have the same id. All of your elements should have different ids, although a single HTML document can use the same class any number of times.

[nonamedude]

newNews is a for loop counter, and i tried what you said

$("div.common").html(value)

But this prints the value to all the divs present in the html. I have given an id to all my divs. Now i am just wondering, how you include it in this function

$("div.common").html(value)

[2goto1]

Since div is a child of the anchor tag that triggers the click event, you can use jQuery's children() function, http://api.jquery.com/children/. I.e. something like:

code:

$('.common').bind('click',function() {    var myid = $(this).attr('id');   var ele = $(this);   ...   $.get("/gwu/folder/includes/mqsql.php?id="+myid,             null,             function(data) {             var value = data;             alert (value);             ele.children("div.common").html(value);             ...

Something like that, it may need some tweaking. Note that you can assign your click function's $(this) to a variable, as indicated above I've assigned it to ele. By doing so, the $(this) variable is accessible to any nested functions / scope. Because the $.get() callback is a nested function, the reference to variable ele is still valid.

ele.children() is a jQuery function call because ele is a variable representing a jQuery object. It's like saying "the div with class set to 'common' that is a child of the anchor link that was clicked".

$(this) in the callback function represents something different from $(this) within the direct scope of the click function.

[nonamedude]

Uhmm, I tried what you said, but the thing is I already have the id of my div inside my jquery function. I just need a way to print out something to a specific div, if the id is known and the class is known.

[2goto1]

Where do you have the id of your div inside your jQuery function? I only saw that you had the id of the element that was clicked:

code:

var myid = $(this).attr('id');

Which would probably be your anchor tag, not your div. If that is the id of your anchor tag, you still have to find the child div. You can use a similar approach to find the child div:

code:

$("#" + myid).children("div.common").html(value);

Unless you already have the id of your div somewhere. If you do then you can just call $(idOfYourDiv).html(value). But i didn't seem to find that in your code.

[nonamedude]

Ahh I see, it works now.

The way I know my divId is that, i just incremented it by 20 from my id for the a tag, so, all i needed was the id of the a tag and then through addition i know the id of my div tag.

Ty for the help!

[2goto1]

np, glad to help