Develop Reference

Outputs the same value even though tag names has different values in the DOM

I'm iterating on every element(post) on an array and each HTML tag name has a value of post._id. In the DOM, the outputs has different values as excepted but when I try to capture those values on the react Profile component, the console.log(el) outputs the same value for every different click of the elements in the DOM.
I have a links on every post on the profile, and when onClick event occurs on every link, I'm trying for each of them to have the id I gave to the tag name (post._id)
function handleReplyTweet(e) {
e.preventDefault();
appDispatch({
type: 'openReply',
});
let el = document.getElementById('reply').name;
console.log(el);
setTweetId(el);
console.log(tweetId);
}
HTML
tweetsData
.map((post, index) => {
return (
<div key={index} className="main-view__user-feed">
<img src={post.avatar} alt="image tweet"></img>
<div className="main-view__user-feed__author">
<div className="name">
<h2>
{post.name} {post.surname}
</h2>
<a href="#" className="username__author">
#{post.username}
</a>
<span> 9 June</span>
</div>
<Link
to={`/status/${post._id}`}
className="author_post-viewpost"
>
{post.text}
</Link>
<div className="icons">
<section>
<li className="top-nav__item top-nav__item--active">
// Tyring to capture the names here from the DOM.
<Link
id="reply"
to={''}
onClick={handleReplyTweet}
className="top-nav__link"
name={post._id}
>
<svg className="top-nav__icon">
<use xlinkHref="img/sprite.svg#icon-bubble2"></use>
</svg>
<span>{post.comments.length}</span>
</Link>
</li>
</section>

For getting the element in react (like input value etc) it is better to use useRef hook. But in your case you don't need to use it.
You can simply pass a function in onClick and call handleReplyTweet function from there with post id.
Hope below code sample I created for you helps:
https://playcode.io/926104/

react js rendering images using props in url

I want to render images from my server ftp using props in React JS.
I have like:
render(){
console.log(this.props.product.image) //Which gives me the product image name properly
return(
<div className={this.props.openModal ? "modal-wrapper active" : "modal-wrapper"}>
<div className="modal" ref="modal">
<button type="button" className="close" onClick={this.handleClose.bind(this)}>×</button>
<div className="quick-view">
<div className="quick-view-image"><img src={`${this.props.product.image}`} alt={this.props.product.name +' image'}/></div>
<div className="quick-view-details">
<span className="product-name">{this.props.product.name}</span>
<span className="product-price">{this.props.product.price}</span>
</div>
</div>
</div>
</div>
)
}
In the log i am getting the image name, but why not the same in the img src attribute.
I tried to give the same line in src like i have given in console.
But just gave a try like:
Log data:

Ok i updated the full path, now image is rendering.
<img src={'http://localhost:5000/images/products/'+this.props.image}

Change img src value on page load

I have a piece of jQuery that changes the value of a hidden field when the user form is saved, as below:
$('button').click(function () {
$("#avatar-val").val($(".avatar-view>img").prop('src'));
});
I also need it to work in reverse (kind of). So that when the user goes back to there user page, it will take the value of whats in the hidden field and put it into the img src of the default avatar image (in the div avatar-view, picture.jpg)
I tried add the below but I can't get it to work
$(document).ready(function() {
$(".avatar-view>img").src($("#avatar-val").prop('src'));
});
<div class="avatar-view" title="Change the avatar">
<button class="btn btn-primary btn-block avatar-save">
Change Avatar
</button>
<img src="/scripts/cropper/img/picture.jpg" alt="Avatar" >
</div>
<input name="avatar" value="../cropper/img/20150729105134.png" id="avatar-val" type="hidden">

.src() doesn't exists in jQuery, You should use .prop(propertyName, value) function
Set one or more properties for the set of matched elements.
And to read input value use .val() method.
Use
$(".avatar-view > img").prop('src', $("#avatar-val").val());
$(document).ready(function() {
$(".avatar-view > img").prop('src', $("#avatar-val").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="avatar-view" title="Change the avatar">
<button class="btn btn-primary btn-block avatar-save">
Change Avatar
</button>
<img src="https://www.gravatar.com/avatar/7839089cd91dc5cc5eb1e0cdbf3312ed" alt="Avatar">
</div>
<input name="avatar" value="https://www.gravatar.com/avatar/1a7926d223f025242d8ec5b120cc3e68" id="avatar-val" type="hidden">

You can use .attr(attributename, value) instead of src()
$(".avatar-view > img").attr('src' ,$("#avatar-val").val());
--Working DEMO--

<img src='images/sample.jpg' />
if you want to change from page load then make html image tag to runat server
<img id='myImage' runat='server' src='images/sample.jpg' />
and write bellow code on page load
myImage.src = 'image path here';

Running click functions on every instance of listing instead of current

I have a listing of articles here, and I can't figure out how to execute the ng-click function calls on every new article inside the ng-repeat. Right now it works for existing articles, but when new articles are added dynamically (via AJAX), I need those to have the same functionality too.
For example: the ng-click function calls on the "+" sign to reveal social buttons seem to not work once new articles are inserted via AJAX (ie: delete articles, and let list be populated again with new elements)
Does AngularJS provide any tools to do that?
<div>
<div>
<input type="text" ng-model="search">
<span>{{filtered.length}} article(s)</span>
</div>
<div article-listing ng-repeat="article in filtered = (wikiArticles | filter:search)">
<!--Individual article begin-->
<span>
{{article.title}}
</span>
<div>
<a ng-click="articles.removeArticle($index)" title="Delete">
<span>✖</span>
</a>
<a ng-click="articles.toggleShare(article)">
<span class="plus-sign" title="Share">✖</span>
<div social-share ng-show="article.socialShare">
<div ng-click="socialShare = !socialShare" class="addthis_toolbox addthis_default_style addthis_32x32_style"
addthis:title="{{article.title}}" addthis:description="{{article.extract}}" addthis:url="{{article.url}}">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_google_plusone_share"></a>
<a class="addthis_button_reddit"></a>
<a class="addthis_button_hackernews"></a>
</div>
</div>
</a>
</div>
<div>{{article.extract}}</div>
<!--Individual article end-->
</div>
</div>
Code for ng-click calls that don't seem to work for new article insertions
$scope.articles = (function() {
return {
shuffleArticles : function() {
$scope.wikiArticles.reverse();
},
removeArticle : function(index) {
$scope.wikiArticles.splice(index, 1);
$scope.fireAPICalls();
},
toggleShare : function(currArticle) {
var previousState = currArticle.socialShare;
angular.forEach($scope.wikiArticles, function(article) {
article.socialShare = false;
});
currArticle.socialShare = previousState ? false : true;
}
}
})();

Your ng-click calls are actually working- you can watch the ng-show toggle in the debugger.
The problem is that there is nothing to display on the new items you add.
The articles you initially add all have their icons populated with the .addthis classes, for instance here's your Facebook icon element:
<a class="addthis_button_facebook at300b" title="Facebook" href="#">
<span class=" at300bs at15nc at15t_facebook">
<span class="at_a11y">Share on facebook</span>
</span>
</a>
at300bs includes the following css which displays the image:
background: url(widget058_32x32.gif) no-repeat left!important;
However as you add new items, you aren't including the needed .addthis classes to them. Their elements look like this:
<a class="addthis_button_facebook"></a>
So ng-show has nothing to display (it shows a 0x0 div).
Add the .addthis classes to your new elements as you add them and you'll be all set.

Combining sequential jQuery selectors into a single function

BIG EDIT: Updated the code sections, but the question remains the same.
I've got perhaps a unique jQuery issue that I could use some help on.
I've got a function (that works perfectly) that looks like this...
var openslide1 = function() {
$("#slide1").animate({
left: "+=250px",
}, 400, function() {
// Animation complete.
});
$(this).unbind('click', openslide1); \\ to prevent from pushing slide over too many times
};
$("#openslide1").click(openslide1);
My issue is there could be a potentially unlimited number of slides, and therefore "openslides". Each "openslide" selector corresponds with its own unique slide. (e.g. #openslide2 would open #slide2 and unbind #openslide2...so on and so forth).
So how do I combine these into a single variable and function?
And as a side note...I'm also going to want to "re-bind" the #openslide on the click of another event. Currently, I'm able to do them one at a time through this....
$("#closeslide1").click(function() {
$("#slide1").animate({
left: "-=250px",
}, 500, function() {
// Animation complete.
});
$('#openslide1').click(openslide1); \\ rebinds openslide1
});
But once this becomes a combined function, I'm assuming "openslide1" will no longer be the variable for the function. So how would I rebind that click event when #closeslide is clicked. (And obviously I'm going to use the first part of this question to apply to the closeslide variables as well.)
<div class="section">
<a class="edit-btn" id="openslide1" href="#null">edit</a>
<a class="edit-btn" id="openslide2" href="#null">edit</a>
<a class="edit-btn" id="openslide3" href="#null">edit</a>
<a class="edit-btn" id="openslide4" href="#null">edit</a>
</div>
<div class="slide" id="slide1">
<h1>Edit Row</h1>
<p>Prototyping data below, may not reflect link clicked.</p>
Submit <a id="closeslide1" class="btn btn-danger" style="color:#fff" href="#null">Cancel</a>
</div>
<div class="slide" id="slide2">
<h1>Edit Row</h1>
<p>Prototyping data below, may not reflect link clicked.</p>
Submit <a id="closeslide2" class="btn btn-danger" style="color:#fff" href="#null">Cancel</a>
</div>
<div class="slide" id="slide3">
<h1>Edit Row</h1>
<p>Prototyping data below, may not reflect link clicked.</p>
Submit <a id="closeslide3" class="btn btn-danger" style="color:#fff" href="#null">Cancel</a>
</div>
<div class="slide" id="slide4">
<h1>Edit Row</h1>
<p>Prototyping data below, may not reflect link clicked.</p>
Submit <a id="closeslide4" class="btn btn-danger" style="color:#fff" href="#null">Cancel</a>
</div>
PLEASE HELP!
Thanks!

I'll give it a shot, does this help you with portability?
$(".openslide1").click(function() {
openSlide(".slide1", "body", 400, ".openslide1");
});
function openSlide(target, bodyObj, speed, original) {
$(target).animate({
left: "+=250px",
}, speed, function() {
// Animation complete.
});
$(bodyObj).animate({
marginLeft: "+=250px",
}, speed, function() {
// Animation complete.
});
$(original).unbind('click');
}

Change you function to pass a reference to the element (or elements) that you want to manipulate:
var openslide = function(elem) {
var id = elem.attr("id");
$("#" + id.substring(5)).animate({
left: "+=250px",
}, 400, function() {
// Animation complete.
});
$('body').animate({
marginLeft: "+=250px",
}, 400, function() {
// Animation complete.
});
elem.unbind('click', openslide);
};
$(".edit-btn").click(function() {openslide($(this))});
Then you can use a single function for all your elements and you can bind them all at the same time if they have a common class (in this case, I called them .openslide).
Edit: looking at your original question again, I noticed that the element being animated at the start isn't the same element. But if there is an easily defined relationship between it and the element you clicked on (for example, it's a child of the original element, or the next sibling, or something) you can easily come up with the appropriate selector to select it. In the example above, I assumed a sibling relationship with the target element having a class of .targetclass, but change it as suits.
Edit 2: changed it to use the id's on the assumption that id openslide1 will correspond to the element with id slide1.

Construct the links as follows :
<div class="section">
<a class="edit-btn openslide" data-slide="#slide1" href="#null">edit</a>
<a class="edit-btn openslide" data-slide="#slide2" href="#null">edit</a>
<a class="edit-btn openslide" data-slide="#slide3" href="#null">edit</a>
<a class="edit-btn openslide" data-slide="#slide4" href="#null">edit</a>
</div>
And the slides as follows :
<div class="slide" id="slide1">
<h1>Edit Row</h1>
<p>Prototyping data below, may not reflect link clicked.</p>
Submit <a class="closeslide1 btn btn-danger" style="color:#fff" href="#null">Cancel</a>
</div>
It's hard to see exactly what effect is required but the general shape of the handler will be something like this :
$(".openslide, .closeslide").click(function() {
if($("body").filter(":animated").length) { return; } //animation in progress, abort.
var $slide = $($(this).data('slide'));
var state = $slide.data('state') || 'closed';
var sign = (state == 'closed') ? '+' : '-';
$slide.animate({
left: sign + "=250px"
}, 400, function(){
$slide.data('state', (sign == '+') ? 'open' : 'closed');
});
$('body').animate({
marginLeft: sign + "=250px"
}, 400);
return false;
});
untested
As you will see, one function (when it works) will handle both slideopen and slideclose actions.
You will have to adapt the script to achieve precisely what you want.