• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 479
  • Last Modified:

Insert HTML in jQuery Response

Ok, total jQuery noob here - hoping someone will understand what I am trying to do. Please forgive me if I get my terminology wrong.

I'm trying to modify a wordpress plugin. Right now you click on a button to "like" something, and the count goes up. Basically I want to switch that button to a checkmark once the action is complete. It works once I refresh the page - but I don't know how to insert the HTML in the jquery response.

I really hope that makes sense.

This is the jQuery:

function likeThis(postId) {
	if (postId != '') {
		jQuery('#iLikeThis-'+postId+' .counter').text('...');
		
		jQuery.post(blogUrl + "/wp-content/plugins/i-like-this/like.php",
			{ id: postId },
			function(data){
				jQuery('#iLikeThis-'+postId+' .counter').text(data);
			});
	}
}

Open in new window


I need it to add the following code after the returned text:

<a class="check">&nbsp;</a>

Open in new window


I've tried a couple of things - to varying degree's of success, but they were hackish - and just guesses.

Please, Please help me.

Cheers,
Mike
0
razor19
Asked:
razor19
  • 4
  • 3
1 Solution
 
SnarflesCommented:
You could probably do this after the JQuery line

document.getElementById(''#iLikeThis-'+postId+' .counter'').innerHTML = "<a class=\"check\">&nbsp;</a>";

is '#iLikeThis-'+postId+' .counter' the id reference of your element?
0
 
razor19Author Commented:
Sorry to say, That didn't work.

The output is
<div  id ="iLikeThis-postID"><span class="counter">blah</span></div>

I guess what I really need to do is add that HTML code inside the span. Does that make sense?
0
 
stilliardCommented:
you could try this.
jQuery('#iLikeThis-'+postId+' .counter').wrapInner('<a class="check"></a>');
0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
SnarflesCommented:
Hmm can you give the span an id then?

<div  id ="iLikeThis-postID"><span id="spansarehot" class="counter">blah</span></div>

then

document.getElementById(''spansarehot'').innerHTML = "<a class=\"check\">&nbsp;</a>";
0
 
razor19Author Commented:
That sort of worked - in regards to both answers above.

Snarfles, I gave the span the ID you suggested - but it removes the "count" that is normally displayed in the span. So I see the checkmark, but the displayed number (which I assume is coming from text(data) is now gone.

stilliarid the code you provided worked as well, but it wraps the count number in the <a> tag.

<span class="counter" id="spansarehot">5<a class="check">&nbsp;</a></span>

I wonder if it would work if I was to add a separate span just for the <a> tag and use the .wrapInner?

Half of the problem is that I don't really understand how the information is being inserted... Sorry for being such a noob on this one..

0
 
SnarflesCommented:
Ah ok, thought you wanted to replace the lot.

Then try this


<div  id ="iLikeThis-postID"><span id="spansarehot" class="counter">blah</span><span id="spansarehot2" class="counter"></span></div>

then

document.getElementById(''spansarehot2'').innerHTML = "<a class=\"check\">&nbsp;</a>";

Open in new window

0
 
razor19Author Commented:
You sir, are a scholar and a gentleman..

Thank you so much.
0
 
SnarflesCommented:
Thank you and you're welcome :)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now