I'm making a checkbox where every user presses the checkbox, then the contents of the checkbox will appear in the list section :
as shown here
the problem is the checkbox that works is only the first checkbox in the list and every time the user presses the checkbox, the content that shown in the list is only the last data in the database.
here is my code :
#foreach($users as $user)
<ol class="list-group" >
<div class="card">
<li class="list-group-item group-containers">
<div class="row">
<input onclick="checkBox(this)" class="form-check-input" type="checkbox" id="approver">
<div class="col-1 c-avatar mr-3">
<img class="c-avatar-img" src="{{ url('/assets/img/avatars/3.png') }}">
</div>
<div class="col-8">
<div class="">{{ $user->name }}</div>
<label for="" class="text-secondary">{{ $user->email }}</label>
</div>
</div>
</input>
</li>
</div>
</ol>
#endforeach
Here is the code that shows the selected checkbox content :
<ol id="list" class="list-group" style="display:none">
<div class="card">
<li class="list-group-item">
<div class="row">
<div class="col-1 c-avatar mr-3">
<img class="c-avatar-img" src="{{ url('/assets/img/avatars/3.png') }}">
</div>
<div class="col-8">
<div class="">{{ $user->name }}</div>
</div>
</li>
</div>
</ol>
and here is the javascript code :
<script>
function checkBox(){
// console.log(e)
var cb = document.getElementById("approver");
var text = document.getElementById("list");
if(cb.checked==true){
text.style.display="block";
} else {
text.style.display="none";
}
}
</script>
any solutions?
You can use the passed reference to the checkbox instead of using getElementById as it gets the first occurrence for an element with the provided id, for more details please check Document.getElementById.
You JS code could be like this:
<script>
function checkBox(cb){
// console.log(e)
var text = document.getElementById("list");
if(cb.checked==true){
text.style.display="block";
} else {
text.style.display="none";
}
}
</script>
Related
I have been fiddling around with a project and can't seem to find a solution...it could be the lack of sleep, or I could just be missing something completely obvious.
The key here is I am currently changing the style of an ID...not a class. That ID is applied to the first link in the #foreach chain, but since it is an ID and not a Class, it is not applying the style to all items listed in #foreach (just the first).
Not sure if posting code here will be helpful since it is based on the tables I have in my DB, but maybe someone out there can lend a helping hand regardless.
The problem is in #foreach and the last two functions under the <script> tag.
#extends('layouts.app')
#section('content')
<style>
.link-window {
zoom:70%; }
.phone-width {
border-radius:10px; }
.form-control {
height:30px;
padding:0!important;
border:none!important;
border-radius:0!important;
display:inline-block; }
.form-group label {
float:center; }
#media (max-width:768px) {
.phone-width {
width:calc(100% - 24px);
margin-top:20px;
}
}
</style>
<div class="container">
<div class="row">
<div class="col-12 card p-3">
<h2 class="card-title">User Settings</h2>
<form action="/dashboard/settings" method="post">
<div class="row">
<div class="col-12 col-md-5">
<div class="form-group">
<label for="page_bg_color">Page Background Color</label>
<input type="color" id="page_bg_color" name="page_bg_color" class="form-control{{ $errors->first('page_bg_color') ? ' is-invalid' : '' }}" placeholder="#000000" value="{{ $user->page_bg_color }}">
#if($errors->first('page_bg_color'))
<div class="invalid-feedback">{{ $errors->first('page_bg_color') }}</div>
#endif
</div>
<div class="form-group">
<label for="page_text_color">Page Text Color</label>
<input type="color" id="page_text_color" name="page_text_color" class="form-control{{ $errors->first('page_text_color') ? ' is-invalid' : '' }}" placeholder="#000000" value="{{ $user->page_text_color }}">
#if($errors->first('page_text_color'))
<div class="invalid-feedback">{{ $errors->first('page_text_color') }}</div>
#endif
</div>
<div class="form-group">
<label for="link_bg_color">Link Background Color</label>
<input type="color" id="link_bg_color" name="link_bg_color" class="form-control{{ $errors->first('link_bg_color') ? ' is-invalid' : '' }}" placeholder="#000000" value="{{ $user->link_bg_color }}">
#if($errors->first('link_bg_color'))
<div class="invalid-feedback">{{ $errors->first('link_bg_color') }}</div>
#endif
</div>
<div class="form-group">
<label for="link_text_color">Link Text Color</label>
<input type="color" id="link_text_color" name="link_text_color" class="form-control{{ $errors->first('link_text_color') ? ' is-invalid' : '' }}" placeholder="#000000" value="{{ $user->link_text_color }}">
#if($errors->first('link_text_color'))
<div class="invalid-feedback">{{ $errors->first('link_text_color') }}</div>
#endif
</div>
<div class="col-12">
#csrf
<button type="submit" class="btn btn-primary mt-3{{ session('success') ? ' is-valid' : '' }}">Save Settings</button>
#if(session('success'))
<div class="valid-feedback">{{ session('success') }}</div>
#endif
</div>
</div>
<div id="page-bg-color" class="col-12 col-md-6 mx-auto phone-width" style="background-color:{{ $user["page_bg_color"] }};">
<div class="link-window py-5">
<div class="row">
<div class="main-content text-center py-3">
<h2 class="fw-bold">{{ $user["main_name"] }}</h2>
<p>Description Text</p>
</div>
</div>
<div class="row">
#foreach($user["links"] as $link)
<div class="link">
{{-- What I am styling --}}
<p
id="link-colors"
class="user-link d-block p-3 mb-3 mx-4 h5 text-center"
target="_blank"
rel="nofollow"
style="border-radius:10px;background-color:{{ $user["link_bg_color"] }};color:{{ $user["link_text_color"] }};"
>{{ $link["name"] }}</p>
</div>
#endforeach
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<script>
document.getElementById("page_bg_color").addEventListener("input", function() {
document.getElementById("page-bg-color").style.backgroundColor = this.value;
});
document.getElementById("page_text_color").addEventListener("input", function() {
document.getElementById("page-text-color").style.color = this.value;
});
// Styling Controller (background-color)
document.getElementById("link_bg_color").addEventListener("input", function() {
document.getElementById("link-colors").style.setProperty("background-color", this.value, "important");
});
// Styling Controller (color)
document.getElementById("link_text_color").addEventListener("input", function() {
document.getElementById("link-colors").style.setProperty("color", this.value, "important");
});
</script>
#endsection
I've tried using .getElementByClassName and it didn't work.
Can you try using a for loop after document.getElementByClassName?
Like this:
<script>
const elements = document.getElementsByClassName('text');
for(const i in elements) {
elements[i].style.color='red';
}
</script>
In your foreach loop it looks like it is using the SAME id for every paragraph in that loop. You can't reuse IDs. in javascript, you can use querySelector and it will refer to the FIRST matching element.
In my answer, I added a new class called links to the parent of your foreach. Then user querySelector to refer to the FIRST link under links.
let firstLink = document.querySelector(".links .link p");
document.querySelector("#link_text_color").addEventListener("input", (e) => {
firstLink.style.setProperty("color", e.target.value, "important");
})
.link p {
padding: 10px;
}
<input id="link_text_color">
<div class="row links">
<div class="link">
<p class="user-link d-block p-3 mb-3 mx-4 h5 text-center" target="_blank" rel="nofollow" style="border-radius:10px;background-color:red;color:white">name</p>
</div>
<div class="link">
<p class="user-link d-block p-3 mb-3 mx-4 h5 text-center" target="_blank" rel="nofollow" style="border-radius:10px;background-color:gray;color:black">name 2</p>
</div>
</div>
This is my code, when i click edit button, the "msg" div opens and retrieves the corresponding message. But it displays message only in first div "msg" and when i click second or third edit button its shows only first row div. "msg" does not display the second or third div "msg".
{% for datas in data %}
<div class="row">
<div class="col-md-12">
<div class="card shadow-lg">
<div class="card-body">
<div class="row">
<div class="col-md-6">
<h5 class="card-title"><i class="fa fa-user-circle" aria-hidden="true"></i>
{{datas.user_id|capfirst}}</h5>
</div>
<div class=" col-md-6 text-right" >
{% if request.user.id == datas.user_id_id %}
<button id="edit" value="{{datas.post}}" onclick="edit(this)">Edit</button>
{% endif %}
</div>
</div>
<div id="msg">
<hr>
{{datas.post}}
<hr>
</div>
<div class="row">
<div class="col-md-4"><i class="fa fa-thumbs-up"></i></div>
<div class="col-md-4"></div>
<div class="col-md-4 text-right">{{datas.post_date}}</div>
</div>
</div>
</div>
</div>
</div>
<br>
<script type="text/javascript">
function edit(id)
{
var body = id.value;
document.getElementById("msg").innerHTML = '<form action="" method="POST">{% csrf_token %}<div class="form-group"><textarea class="form-control" name="edit_post" rows="3">'+body+'</textarea><br> <button class="btn btn-primary" type="submit">POST</button></div><div></form>';
}
</script>
{% endfor %}
HTML id are should be unique, better use classes. If you have multiple element with the same id document.getElementById("msg") will only return the first match.
But you can solve this problem by going to the parent element ".card-body" of the clicked element (which is button, I see you passed "this") then use querySelector to find the "msg" id inside card-body.
function edit(elem)
{
var parentcard = elem.closest(".card-body")
parentcard.querySelector("#msg").innerHTML = "content here"
}
where elem is the passed 'this' parameter
For every item in items I want to have a timer. I made a timer using javascript and I can show the timer for every single item. But when I want to show all the items in home page the timer is shown just for the last item. Is there any way to show the timer for all the items?
<div class="row m0 p0 justify-content-center">
{% for item in items %}
<div class="col-12 col-xs-6 col-md-4 card-item p0">
<div class="img-container">
<img class="rounded img-fluid img-thumbnail" src="{{MEDIA_URL}}{{ item.image }}" />
<div class="sold-img-item"></div>
{% if item.sold == 1 %}
<div class="sold">Sold
<div class="sold-price"><span>{{item.highest_bid_offer}} €</span></div>
</div>
{% endif%}
</div>
<h5 class="no-flow capital "><b>{{item.title}}</b></h5>
<div class="no-flow"><strong>Seller :</strong> {{item.seller}}</div>
<div class="no-flow">
<strong>Initial Price :</strong> <span>{{item.price}} €</span>
</div>
<input type="hidden" id="auction_status" name="auction_status" value="{{ item.auction_status }}"/>
<input type="hidden" id="end-time-fix" name="end-time-fix" value="{{item.auction_end_time}}"/>
<div class="timer-small" id="timer-small">
<div class="timer-small" id="days-small"></div>
<div class="timer-small" id="hours-small"></div>
<div class="timer-small" id="minutes-small"></div>
<div class="timer-small" id="seconds-small"></div>
</div>
<a class="divLinkkk" href="{% url 'item_detail' item.id %}"></a>
</div>
{% endfor %}
</div>
Elorbratiing what #Mithlesh has pointed out
You need to change your time code like this
<div class="timer-small">
<div class="timer-small days-small"></div>
<div class="timer-small hours-small"></div>
<div class="timer-small minutes-small"></div>
<div class="timer-small seconds-small"></div>
</div>
Then fix your javascript to work with class instead of id.
I want to add if and foreach statement inside a class whenever the user select an item from the dropdown box.
The tags that should be added inside is:
#if($article->tags)
#foreach($article->tags as $articletag)
#if($articletag->tag == $(this).text())
$(this).text() is the text that the user clicks on the dropdownbox. The purpose of these if and foreach is to filter the table based on the filtername($this.text()) whenever the user choose an item from the dropdownbox. How do I do it?
HTML content before the JavaScript runs:
<div class="content">
#if($articles)
#foreach($articles as $article)
<div class="row article art-content">
<div class="col-xs-12 col-md-6 hidden-xs hidden-sm">
<a href="{{ url('article/'.$article->category->slug.'/'.$article->slug) }}">
<img src="{{ url('image').'/'.$article->featured_image }}?w=460&h=267&fit=crop" alt="" class="img-responsive"/>
</a>
</div>
<div class="col-xs-12 col-md-6 hidden-md hidden-lg">
<a href="{{ url('article/'.$article->category->slug.'/'.$article->slug) }}">
<?php $image = $article->mobile_image != null ? $article->mobile_image : $article->featured_image; ?>
<img src="{{ url('image').'/'.$image }}?h=imageHeight" alt="" class="img-responsive"/>
</a>
</div>
<div class="col-xs-12 col-md-6">
<h3 class="article-title">
<a href="{{ url('article/'.$article->category->slug.'/'.$article->slug) }}">
{{ $article->title }}
</a>
</h3>
<span>Published on: {{ date('M d, Y', strtotime($article->published_on)) }}</span>
<div class="spacer20"></div>
Read Article <i class="fa fa-chevron-right fa-fw"></i>
</div>
</div>
<hr/>
#endforeach
<div class="text-center">
{!! $articles->render() !!}
</div>
#else
<div class="row spacer50 text-center">
<div class="col-xs-12 spacer50">
<h4>The key you entered does not match any articles. <br/>Please click here to see a list of all available articles.</h4>
</div>
</div>
#endif
HTML content when the JavaScript executes:
<div class="content">
#if($articles)
#foreach($articles as $article)
#if($article->tags) //added line
#foreach($article->tags as $articletag) //added line
#if($articletag->tag == 'whatever text the dropdown clicks') //added line
<div class="row article art-content">
<div class="col-xs-12 col-md-6 hidden-xs hidden-sm">
<a href="{{ url('article/'.$article->category->slug.'/'.$article->slug) }}">
<img src="{{ url('image').'/'.$article->featured_image }}?w=460&h=267&fit=crop" alt="" class="img-responsive"/>
</a>
</div>
<div class="col-xs-12 col-md-6 hidden-md hidden-lg">
<a href="{{ url('article/'.$article->category->slug.'/'.$article->slug) }}">
<?php $image = $article->mobile_image != null ? $article->mobile_image : $article->featured_image; ?>
<img src="{{ url('image').'/'.$image }}?h=imageHeight" alt="" class="img-responsive"/>
</a>
</div>
<div class="col-xs-12 col-md-6">
<h3 class="article-title">
<a href="{{ url('article/'.$article->category->slug.'/'.$article->slug) }}">
{{ $article->title }}
</a>
</h3>
<span>Published on: {{ date('M d, Y', strtotime($article->published_on)) }}</span>
<div class="spacer20"></div>
Read Article <i class="fa fa-chevron-right fa-fw"></i>
</div>
</div>
<hr/>
#endif
#endforeach
#endif
#endforeach
<div class="text-center">
{!! $articles->render() !!}
</div>
#else
<div class="row spacer50 text-center">
<div class="col-xs-12 spacer50">
<h4>The key you entered does not match any articles. <br/>Please click here to see a list of all available articles.</h4>
</div>
</div>
#endif
JavaScript:
$('#tags li').on('click', function(){
$('.content').hide();
if($(this).text() == 'All')
$('.content').fadeIn('slow');
else {
//add the #foreach and #ifs
}
});
Looks like you are using Laravel Blade template engine, it is compiled in server. So it could not be changed by JavaScript. And Them could not be used together.
The code like this is wrong
#if($articletag->tag == $(this).text())
So Your need can not be achieved. Maybe you should change your thinking to find another way.
In my use case I would like append elements to the respective object in each iteration which is generated dynamically. It is appending to the end of all objects. Here is my code,
HTML:
<div class="comment-list-new" style= "max-height: 660px !important;overflow-y: scroll;">
<h5>Discussion Board</h5>
<ol class="question_ol" >
{{ if .ViewData.Questions }}
{{ range .ViewData.Questions }}
<li>
<input type="hidden" id="question_id" class="question_id_val" value="{{.QuestionId}}"/>
<div class="q-comment">
<div class="qanda questiondiv" id="questionarea" name="questionarea">
<div>
<div id="topic" class="upvote pull-left">
<a class="upvote"></a>
<span class="count">3</span>
<a class="downvote"></a>
</div>
<div >
<div class="qanda-info">
<h6><p id="quest_title">{{.QuestionTitle}}</p></h6>
</div>
<p id="quest_text">{{.QuestionText}}</p>
</div>
</div >
<div class="qanda-info">
<div class="user-info">
<img src="/resources/img/team-small-2.png" />
</div>
<h6>{{.UserId}}</h6>
<span class="date alt-font sub">{{.DateCreated}}</span>
<a id="answertext" name ="answertext" type="submit" class="link-text answerbutton">Answer</a>
</div>
</div>
</div>
</li><!--end of individual question-->
{{ if .Answers }}
<div class="form-input">
<label for="answers">{{len .Answers}} Answer(s)</label>
</div>
{{ range .Answers }}
<ul class="children">
<li>
<div class="q-comment">
<div class="qanda">
<div>
<div id="topic" class="upvote pull-left">
<a class="upvote"></a>
<span class="count">{{.Upvotes}}</span>
<a class="downvote"></a>
</div>
<div >
<p>{{.AnswerText}}</p>
</div>
</div>
<div class="qanda-info">
<div class="user-info">
<img alt="User" src="/resources/img/team-small-4.png" />
</div>
<h6>{{.UserId}}</h6>
<span class="date alt-font sub">{{.DateCreated}}</span>
</div>
</div>
</div>
</li><!--end of individual comment-->
</ul>
{{ end }}
{{ end }}
{{ end }}
{{ end }}
</ol>
</div><!--end of comments list-->
** And my JS code: **
$('.questiondiv').on('click', '.submitanswerbutton', function() {
console.log("In submit button");
date = "17 June 2015"
var howtiId = $('#howti_id').text();
var question_id = $(this).closest('li').find('.question_id_val').val();
var answer_text = $('.answertext_val').val();
console.log(howtiId);
console.log(question_id);
console.log(answer_text);
$.getJSON("/submitanswer?howti_id="+howtiId+"&question_id="+question_id+"&answer="+answer_text, function(data) {
console.log("answer Response "+data);
newAnswer = "<ul class='children'><li><div class='q-comment'><div class='qanda'><div><div id='topic' class='upvote pull-left'><a class='upvote'></a><span class='count'>3</span><a class='downvote'></a></div><div><p>"+answer_text+"</p></div></div><div class='qanda-info'><div class='user-info'><img alt='User' src='/resources/img/team-small-4.png' /></div><h6>{{.UserId}}</h6><span class='date alt-font sub'>"+date+"</span></div></div></div></li></ul>"
$('ol').append(newAnswer);
//$(this).closest('.comment-list-new').find('.question_ol').append(newAnswer);
});
$(this).closest('.answersectiondiv').remove();
});
I am trying append answer to the respective question. But it is appending to the last question.
Could someone help me with this?
Firstly add a container div under the questions_ol div to include every question with its answers, give it the class question_and_answers, make sure it's under the loop.
Then use jquery selectors with $(this) to reach the relative answers list. Instead of:
$("ol").append (...
Use:
$(this).closest ('.question_and_answers ').append (...