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 (...
Related
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>
<div class="card-media">
<!-- media container -->
<div class="card-media-object-container">
<div class="card-media-object"><img data-original="{{asset($ad->images()->first()->image_path.'/'.$ad->images()->first()->image_name)}}" height="125px" width="100%"></div>
</div>
<!-- body container -->
<div class="card-media-body">
<div class="card-media-body-top">
<span class="subtle">{{$ad->time_elapsed_string($ad->created_at)}}</span>
</div>
<span class="title card-media-body-heading">{{$ad->title}}</span>
<div class="card-media-body-supporting-bottom">
<span class="card-media-body-supporting-bottom-text subtle">
<ol class="breadcrumb">
<li class="categorie">{{$ad->categorie->name}}</li>
<li class="subcategorie">{{$ad->subcategorie->name}}</li>
<li class="type active">{{$ad->type->name}}</li>
</ol>
</span>
<span id="price" style="color: red;" class="card-media-body-supporting-bottom-text subtle u-float-right">{{$ad->price}}</span>
</div>
<div class="card-media-body-supporting-bottom card-media-body-supporting-bottom-reveal">
<span class="card-media-body-supporting-bottom-text subtle">{{$ad->phone}}</span>
ДЭЛГЭРЭНГҮЙ
</div>
</div>
</div>
This is my repeated list and i wanna hide by select value
<select id="test" multiple class="form-control">
<option>1</option>
<option>100</option>
<option>1000</option>
<option>10000</option>
<option>100000</option>
<option>1000000</option>
</select>
$('#test').on('change',function(){
var selected = this.value;
prices = $('#price');
$.each(prices,function(){
if(selected<$(this).text()){
$(this).parent().parent().parent().hide();
}
if(selected>$(this).text()){
$(this).parent().parent().parent().show();
}
});
});
This is my jquery when i select value from select then if #price value < than select hide other list elements in my case card-media is list item.
I Try to getting the text form same div on button click event.
Here is my HTML Markup:
<div class="flights">
<div class="flight-box">
<div class="row">
<div class="col-sm-3">
<div class="flight-info">
<div class="left-i">
<img src="img/sp_trans.gif" class="airlogowidth airsprite airlogo A4">
<div class="flight-no">SG-264</div>
</div>
<div class="right-i">
<div class="name">Air India</div>
</div>
</div>
</div>
<div class="col-sm-5">
<div class="flight-duration">
<div class="row">
<div class="col-sm-4">
<div class="events">
<span class="text">Depart</span>
<span class="time">12:30 PM</span>
<span class="route">IXA <i class="fa fa-arrow-right"></i> CCU</span>
</div>
</div>
<div class="col-sm-4">
<div class="events">
<span class="text">Arrive</span>
<span class="time">03:10 PM</span>
<span class="route">IXA <i class="fa fa-arrow-right"></i> CCU</span>
</div>
</div>
<div class="col-sm-4">
<div class="events">
<span class="text">Duration</span>
<span class="time">1h 40m </span>
<span class="route">No Stop</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="fare-price">
<div class="row">
<div class="col-sm-6">
<span class="f-price">3999</span>
</div>
<div class="col-sm-6">
<div class="book-action">
<div class="btn-group-vertical" role="group">
<button type="button" class="btn btn-danger btn-book" name="booknow">Book Now</button>
<button type="button" class="btn text-primary btn-more-1" name="details">View More...</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flight-footer">
<div class="row">
<div class="col-sm-3">
<div class="refund-status">
<span>Refundable</span>
</div>
</div>
<div class="col-sm-3">
<div class="fare-role">
Fare rules
</div>
</div>
<div class="col-sm-3">
<div class="baggage-info">
Baggage Information
</div>
</div>
<div class="col-sm-3">
<div class="itinerary-info">
Flight itinerary
</div>
</div>
</div>
</div>
<div class="flight-itinerarySummary" style="display: none;">
<div class="row">
<div class="col-sm-12">
<h2>Agartala → Bangalore <small>22 Nov 2015</small></h2>
<ul class="itinerarySummary">
<li class="vendor">
<div class="airLogo fLeft">
<img src="img/airlines/AI.png" height="23" width="27">
</div>
<div class="airlineName">
<span class="name">Air India</span>
<small class="flightNumber">AI-744</small>
<small class="travelClass">Economy</small>
<small class="truncate" title=""></small>
</div>
</li>
<li class="start">
<time>
<span class="placeTime">
<span rel="tTooltip" original-title="Singerbhil, Agartala">IXA</span>
<strong> 11:20 </strong>
</span>
<span class="travelDate">22 Nov 2015</span>
</time>
<small class="terminal">
Singerbhil, Agartala
</small>
</li>
<li class="details">
<i class="clk itineraryClock"></i><abbr class="duration weak">50m</abbr>
</li>
<li class="end">
<time>
<span class="placeTime">
<strong> 12:10 </strong>
<span rel="tTooltip" original-title="Netaji Subhas Chandra Bose Airport, Kolkata">CCU</span>
</span>
<span class="travelDate"> 22 Nov 2015 </span>
</time>
<small class="terminal">
Netaji Subhas Chandra Bose Airport, Kolkata, Terminal 2
</small>
</li>
</ul>
<div class="connector weak">
<small class="layOver">Layover : 5h 20m</small>
</div>
<ul class="itinerarySummary">
<li class="vendor">
<div class="airLogo fLeft">
<img src="img/airlines/AI.png" height="23" width="27">
</div>
<div class="airlineName">
<span class="name">Air India</span>
<small class="flightNumber">AI-744</small>
<small class="travelClass">Economy</small>
<small class="truncate" title=""></small>
</div>
</li>
<li class="start">
<time>
<span class="placeTime">
<span rel="tTooltip" original-title="Singerbhil, Agartala">IXA</span>
<strong> 11:20 </strong>
</span>
<span class="travelDate">22 Nov 2015</span>
</time>
<small class="terminal">
Singerbhil, Agartala
</small>
</li>
<li class="details">
<i class="clk itineraryClock"></i><abbr class="duration weak">50m</abbr>
</li>
<li class="end">
<time>
<span class="placeTime">
<strong> 12:10 </strong>
<span rel="tTooltip" original-title="Netaji Subhas Chandra Bose Airport, Kolkata">CCU</span>
</span>
<span class="travelDate"> 22 Nov 2015 </span>
</time>
<small class="terminal">
Netaji Subhas Chandra Bose Airport, Kolkata, Terminal 2
</small>
</li>
</ul>
</div>
</div>
</div>
</div>
I want "flight-no" div html i.e SG-264 on 'btn-book' on Click.
I try as follows, but return 'undefine' -
$('.btn-book').on('click', function(){
var flightNo = $(this).closest('div.flight-info').parent('div.left-i').html();
alert(flightNo);
});
Note that in the page have many rows with 'flights' class.
Anyone help me?
The issue with your current code is that the .flight-info element is not a direct parent of .btn-book, it's a sibling of one of the parents. This is why the .flight-info selector on closest() returns nothing.
The easiest way to achieve what you require is to use closest() to get the nearest common parent of both elements, in this case .flight-box, then use find() and text() to get the flight number. Try this:
$('.btn-book').on('click', function(){
var flightNo = $(this).closest('div.flight-box').find('.flight-no').text();
alert(flightNo); // = SG-264 given your example
});
Example fiddle
you need to use .find() with .closest() and div.left-i is children of div.flight-info not parent()
use it like this
$('.btn-book').on('click', function(){
var flightNo = $(this).closest('.flight-box').find('div.left-i .flight-no').html();
alert(flightNo);
});
DEMO
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 7 years ago.
<input type="text" id="message" param="1" placeholder="chat here.." />
This is element inside the div which is working fine outside the javascript
here is the case after appended element
$('.chat-wrapper').append('<li class="one-big-icon mega-li mgl-10"> <span class="mega-icon"><img alt="example image" class="chat-initatior" src="'+img_url+'"></span> <span class="badge vd_bg-red">10</span> <div class="vd_mega-menu-content open-top width-xs-4 width-md-5 width-lg-4 center-xs-4 chat-box'+id+'" data-action="click-target"> <div class="child-menu"> <div class="title"> ujwal <i>(online)</i> <div class="vd_panel-menu"> <div data-rel="tooltip" data-original-title="Close" class="menu entypo-icon"> <i class="icon-cross"></i> </div> </div> </div> <div class="content-list content-image content-menu"> <div data-rel="scroll"> <ul class="list-wrapper pd-lr-10"> <li> <div class="menu-icon"><img alt="example image" src=""></div> <div class="menu-text"> Do you play or follow any sports? <div class="menu-info"> <span class="menu-date">12 Minutes Ago </span> </div> </div> </li> </ul> </div> <div class="closing chat-area"> <div class="chat-box"> <input type="text" id="message" placeholder="chat here.." /> </div> <div class="vd_panel-menu"> <div data-rel="tooltip" data-original-title="Insert Picture" class="menu"> <i class="icon-camera"></i> </div> <div data-rel="tooltip" data-original-title="Emoticons" class="menu"> <i class="fa fa-smile-o"></i> </div> </div> </div> </div> </div> <!-- child-menu --> </div> <!-- vd_mega-menu-content --> </li>');
Now when I do
$('#message').keypress(function(event){
alert('WORKING');
});
alert('working') only works when I type any key in the first element after the append is made on some click and if I type something inside that appended input box I get nothing but why?
Look at using .on() or .live() depending on your jQuery version to bind to elements that are appended.
$("div").on( "keypress", "#message", function(){
alert( "working!" );
});
where div is the selector of a parent of #message.
here work fine;
https://jsfiddle.net/mig1098/0rgd3ppu/
var id='one',img_url='http';//test values
$('.chat-wrapper').append('<li class="one-big-icon mega-li mgl-10"> <span class="mega-icon"><img alt="example image" class="chat-initatior" src="'+img_url+'"></span> <span class="badge vd_bg-red">10</span> <div class="vd_mega-menu-content open-top width-xs-4 width-md-5 width-lg-4 center-xs-4 chat-box'+id+'" data-action="click-target"> <div class="child-menu"> <div class="title"> ujwal <i>(online)</i> <div class="vd_panel-menu"> <div data-rel="tooltip" data-original-title="Close" class="menu entypo-icon"> <i class="icon-cross"></i> </div> </div> </div> <div class="content-list content-image content-menu"> <div data-rel="scroll"> <ul class="list-wrapper pd-lr-10"> <li> <div class="menu-icon"><img alt="example image" src=""></div> <div class="menu-text"> Do you play or follow any sports? <div class="menu-info"> <span class="menu-date">12 Minutes Ago </span> </div> </div> </li> </ul> </div> <div class="closing chat-area"> <div class="chat-box"> <input type="text" id="message" placeholder="chat here.." /> </div> <div class="vd_panel-menu"> <div data-rel="tooltip" data-original-title="Insert Picture" class="menu"> <i class="icon-camera"></i> </div> <div data-rel="tooltip" data-original-title="Emoticons" class="menu"> <i class="fa fa-smile-o"></i> </div> </div> </div> </div> </div> <!-- child-menu --> </div> <!-- vd_mega-menu-content --> </li>');
$('#message').keypress(function(event){
alert(event.keyCode);
});
I want to repeat items as shown in the image. I have done repeating by using ng-repeat. All contents are repeated but not in a structure that is shown in the image. how to split the contents like this.. ???
<div class="activityCon" ng-repeat="activity in activity1">
<!--image-->
<div class="n-col erpSub"> <a class="link brand erp-display-block fk-uppercase erp-text-center" href="#">
<div class="bg-gradient"> <span class="fa fa-chevron-down"></span> </div>
<p class="title erp-font-15">{{ activity }}<br>
<span></span></p>
</a>
</div>
<!--image-->
<div class="clearfix"></div>
<!--1st content wrap-->
<div class="col-md-6 warpLine1 msg-time-chat" ng-class="$odd ? 'col-md-6' : '' " >
<!--message content - 1 -->
<div class="message-body msg-in" ng-repeat="activityDesc in dailyActivity[$index].activityArray">
<div class="text col-md-11 firstWrap" > <img class="img-thumbnail" src="{{activityDesc.taskImage}}" alt=""> <span class="label label-info">{{activityDesc.taskName}}</span>
<p>{{ activityDesc.taskMessage }}</p>
<p class="chat_message_date">{{activityDesc.taskUser}} <span> {{activityDesc.taskDate}} , {{activityDesc.taskTime}}</span></p>
</div>
</div>
<div class="clearfix"></div>
<!--message content - 1 -->
</div>
<!-- <div class="col-md-6 WarpLine2 msg-time-chatRight">
<div class="message-body msg-in" ng-if="$odd" ng-repeat="activityDesc in dailyActivity[$index].activityArray">
<div class="text col-md-11 firstWrap"> <img class="img-thumbnail" src="{{activityDesc.taskImage}}" alt=""> <span class="label label-info">{{activityDesc.taskName}}</span>
<p>{{ activityDesc.taskMessage }}</p>
<p class="chat_message_date">{{activityDesc.taskUser}} <span> {{activityDesc.taskDate}} , {{activityDesc.taskTime}}</span></p>
</div>
</div>
<div class="clearfix"></div>
</div> -->
<!-- <div class="col-md-6"></div> -->
<div class="clearfix"></div>
</div>
I think Your condition is wrong. You checked like this...
ng-class="$odd ? 'col-md-6' : '' "
Instead u can Change as
ng-class="{'pull-left':($index %2 ==0),'pull-right':($index %2 ==1)}"