Coman Paul Coman Paul - 2 months ago 9
Javascript Question

JavaScript edit InnerHTML from a tag by class and id

For these links

<div class="post_actions">
<a class="color-transition article_delete" href=""><i class="fa fa-pencil"></i></a>
<a class="color-transition article_edit" href="#" id="1"><i class="fa fa-pencil-square-o"></i></a>
</div>


I try to edit their content on click based on each id and class.

Ultil now I have used

$('.article_delete').html('<img src="images/loader.gif" class="loading" />');


But every
.article_delete
class from page is changing the InnerHTML content.
I tried this:

$('.article_delete#'+article_id).html('<img src="images/loader.gif" class="loading" />');


and this (from a stackoverflow similar post):

document.getElementById(article_id).getElementsByClassName("article_delete")[0].html('<img src="images/loader.gif" class="loading" />');


Any solution? I want to select only
.article_delete
where
id="something"
.

Answer

I finally found the solution myself. Because i needed the ids from each div to parse them with ajax to php i added just another class for each link. Here is an example:

PHP

 <a class="color-transition  article_spam_flag asf'.$id.'" href="#" id="'.$id.'"><i class="fa fa-flag"></i></a>

JS

$(function() {
$(".article_spam_flag").click(function() {
var article_id = $(this).attr("id");
var dataString = 'article_id='+article_id;  
//$('a#'+article_id).removeClass('liked');
//document.getElementById(article_id).getElementsByClassName("article_spam_flag")[0].html('<img src="images/loader.gif" class="loading" />');
//$('.article_spam_flag#'+article_id).html('<img src="images/loader.gif" class="loading" />'); 
  //$(this).html('<img src="images/loader.gif" class="loading" />'); 
  $('.asf'+article_id).html('<img src="images/loader.gif" class="loading" />'); 
$.ajax({
	type: "POST",
	url: "action/article_spam_flag.php",
	data: dataString,
	cache: false,
	success: function(data){
    if (data == 0) {
	alert('Actiunea nu a putut fi realizata!');
	} else {
	//$('.article_spam_flag').fadeIn("slow").html(data);
	$('.asf'+article_id).fadeIn("slow").html(data);
	//$(this).fadeIn("slow").html(data);
	//window.location.href="contact.php?categorie=ArticolFlag: "+article_id;
	//floating contact
	}
	}  
});
return false;
});
});