How to dynamically change text with javascript

Question

I am adding a "like" feature to my screenshot gallery. I have successfully worked it out to change color to red when someone likes... and go back to gray when unlike... and then a php script handles all the DB magic.

But I can't wrap my head around how to change the actual text value shown; i.e. if someone likes, change the text from 10 to 11. If they unlike, change from 2 to 1, etc.

Can anyone suggest an approach to look into?

These are my javascript & html snippets if they help. The text in the HTML I want to change here is represented by "$row['Likes']"

                $(".ajax-unlike").submit(function(){
                    var refid = $(this).find('input[name="refid"]').val();
                    var data = {
                      "action": "unlike"
                      };
                    data = $(this).serialize() + "&" + $.param(data);
                      $.ajax({
                        type: "POST",
                        dataType: "json",
                        url: "galleryajax.php", //Relative or absolute path to response.php file
                        context: document.getElementById(refid), //!! ADD THIS
                        data: data,
                        success: function(data) { //!! REMOVE refid FROM HERE
                          $(this).removeClass("thumb-comment-red", 1000);
                      }
                      });
                    return false;
                    });


<span class="thumb-comment" id="like'.$row['GalleryID'].'">
                <form class="ajax-like" method="post" accept-charset="utf-8">
                  <input type="hidden" name="mcname" value="'.$user->profile_fields['pf_minecraftname'].'" />
                  <input type="hidden" name="galleryid" value="'.$row['GalleryID'].'" />
                  <input type="hidden" name="refid" value="like'.$row['GalleryID'].'" />
                  <input type="hidden" name="likerswithoutthisuser" value="'.str_replace($user->profile_fields['pf_minecraftname'],"",$row['Likers']).'" />
                    <button type="submit" style="border: 0; background: none;">
                    <i class="fa fa-heart"></i>
                    '.$row['Likes'].'
                    </button>
                    </form>
                </span>

new code for comment down below

            //Look for forms with "like" class
            $(".ajax-like").submit(function(){
                var refid = $(this).find('input[name="refid"]').val();
                var btnrefid = "button#" + refid;
                var formrefid = "form#" + refid;
                var data = {
                  "action": "like"
                  };
                data = $(this).serialize() + "&" + $.param(data);
                  $.ajax({
                    type: "POST",
                    dataType: "json",
                    url: "galleryajax.php", //Relative or absolute path to response.php file
                    context: document.getElementById(refid),
                    data: data,
                    success: function(data) { 
                      $(this).addClass("thumb-comment-red", 1000);
                      $(btnrefid).html("<i class='fa fa-heart'></i> " + data["newlikes"]);
                      //Now stop further changes from recording based on submissions from this specific form
                      $(formrefid).submit(function(){
                            alert("You have already liked or unliked this screenshot. Please reload the page if you want to change your mind.");
                            });
                  }
                  });
                return false;
                });

Matej Žvan · Accepted Answer · 2014-12-13 09:12:52Z

4

Have a look at innerHTML like:

document.getElementById("demo").innerHTML = "value";

Or JQ way

$(selector).html("value");

answered Dec 13, 2014 at 9:12

Matej Žvan

7664 silver badges13 bronze badges

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

2 Comments

runelynx Over a year ago

Thanks! I now have a further issue... this works great, but I want to stop further clicks/submits from running my script again. I've done this code, but this just shows the popup and still runs the ajax again... how do I make it so the ajax can only run once per form?

runelynx Over a year ago

Nevermind, got it! using the selector.one() function.

Bhavan Kuchibhotla · Accepted Answer · 2014-12-13 09:16:15Z

1

     success: function(data) { //!! REMOVE refid FROM HERE
                              $(this).removeClass("thumb-comment-red", 1000).innerHTML="UR New TEXT HERE";

//can even use $(element).text("text") or $(element).html("<span>TEXT</span>") like any html elements can be added according to requirement if you plan to use jquery//
                          }

answered Dec 13, 2014 at 9:16

Bhavan Kuchibhotla

891 silver badge10 bronze badges

Collectives™ on Stack Overflow

How to dynamically change text with javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related