Solved

Insert HTML in jQuery Response

Posted on 2010-08-22
8
439 Views
Last Modified: 2012-05-10
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
Comment
Question by:razor19
  • 4
  • 3
8 Comments
 
LVL 9

Expert Comment

by:Snarfles
ID: 33498473
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
 
LVL 3

Author Comment

by:razor19
ID: 33498526
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
 
LVL 6

Expert Comment

by:stilliard
ID: 33498608
you could try this.
jQuery('#iLikeThis-'+postId+' .counter').wrapInner('<a class="check"></a>');
0
 
LVL 9

Expert Comment

by:Snarfles
ID: 33498619
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 3

Author Comment

by:razor19
ID: 33498711
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
 
LVL 9

Accepted Solution

by:
Snarfles earned 500 total points
ID: 33498722
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
 
LVL 3

Author Comment

by:razor19
ID: 33499206
You sir, are a scholar and a gentleman..

Thank you so much.
0
 
LVL 9

Expert Comment

by:Snarfles
ID: 33499261
Thank you and you're welcome :)
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

DOM Attributes and Properties treatment with jQuery 1.6 by Ivo Stoykov jQuery (http://jquery.com/) 1.6 introduces .prop() (http://api.jquery.com/prop/) and .removeProp() (http://api.jquery.com/removeProp/) methods which allow modifying or removi…
Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

948 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now