Solved

Insert HTML in jQuery Response

Posted on 2010-08-22
8
437 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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
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

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Suggested Solutions

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.
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn how to dynamically set the form action using jQuery.
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)

743 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

8 Experts available now in Live!

Get 1:1 Help Now