Solved

Insert HTML in jQuery Response

Posted on 2010-08-22
8
444 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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
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
 
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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

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…
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…

831 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