Solved

Insert HTML in jQuery Response

Posted on 2010-08-22
8
453 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

 
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

The most up-to-date version of this article is on my Blog https://iconoun.com/blog/
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
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…

717 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