asked on

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

Snarfles

You could probably do this after the JQuery line

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

is '#iLikeThis-'+postId+' .counter' the id reference of your element?

razor19

ASKER

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?

stilliard

you could try this.
jQuery('#iLikeThis-'+postId+' .counter').wrapInner('<a class="check"></a>');

Snarfles

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\"> </a>";

razor19

ASKER

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"> </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..

ASKER CERTIFIED SOLUTION

Snarfles

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

razor19

ASKER

You sir, are a scholar and a gentleman..

Thank you so much.

Snarfles

Thank you and you're welcome :)