i build a code for comments and replies of them.. i use a #foreachto show all elements in ViewBag which have a list of comments..
every thing works fine in post and get ..
but my problem it's when i try to make "submit"button of replies disable to prevent anyone from pressing it without typing..
so i use javascript but the code didn't work fine ..
first it work only with the last element of #foreach .. after i use the name as "class" instead of "id" it work for all elements
but the problem is .. if i typing in first reply input text for example .. the button didn't enable .. but if i typing at last reply input text .. all buttons enable ..
I want the code work for each reply .. only when some one typing in that input text ..
JavaScript
<script>
var $inputreply = $('.replies');
var $buttonreply = $('.replysubmit');
setInterval(function () {
if ($inputreply.val().length > 0) {
$buttonreply.prop('disabled', false);
}
else {
$buttonreply.prop('disabled', true);
}
}, 100);
</script>
View which have loop #foreachof comments and replies for each comment
<section class="comment-list">
#foreach (var item in ViewBag.CommentsList)
{
<article class="row">
<div class="col-md-10 col-sm-10">
<div class="panel panel-default arrow left">
<div class="panel-body">
<header class="text-left" style="direction:rtl;">
<time class="comment-date" datetime="16-12-2014 01:05"><i class="fa fa-clock-o"></i> #item.CommentDateTime</time>
</header>
<div class="comment-post">
<p>#item.Comment</p>
</div>
<p class="text-right"><a class="btn btn-default btn-sm replybtn"><i class="fa fa-reply"></i> reply</a></p>
</div>
</div>
<!--ReplyBox-->
#if (Request.IsAuthenticated)
{
using (Html.BeginForm("Reply", "Home", new { #id = #item.PostID, #commentId = #item.ID }, FormMethod.Post))
{
#Html.AntiForgeryToken()
<div class="input-group" style="direction:ltr;">
<input type="text" class="replies form-control" placeholder="" name="replies" />
<span class="input-group-btn">
<button class="replysubmit btn btn-primary" type="submit">Reply</button>
</span>
</div>
}
}
else
{
<div class="form-horizontal">
<div class="alert alert-danger replybox" style="display:none;">
<span>please login to reply</span>
</div>
</div>
}
#foreach (var subitem in ViewBag.Relies)
{
if (#subitem.CommentID == #item.ID)
{
<article class="row">
<div class="col-md-9 col-sm-9">
<div class="panel panel-default arrow left">
<div class="panel-heading left">Reply</div>
<div class="panel-body">
<header class="text-left">
<time class="comment-date" datetime="16-12-2014 01:05"><i class="fa fa-clock-o"></i> #subitem.ReplyDate</time>
</header>
<div class="comment-post">
<p>#subitem.CommentReply</p>
</div>
</div>
</div>
</div>
<div class="col-md-2 col-sm-2 col-md-offset-1 col-sm-offset-0 hidden-xs">
<figure class="thumbnail">
<img class="img-responsive" src="http://www.keita-gaming.com/assets/profile/default-avatar-c5d8ec086224cb6fc4e395f4ba3018c2.jpg" />
<figcaption class="text-center">#subitem.UserName</figcaption>
</figure>
</div>
</article>
}
}
</div>
<div class="col-md-2 col-sm-2 hidden-xs">
<figure class="thumbnail">
<img class="img-responsive" src="http://www.keita-gaming.com/assets/profile/default-avatar-c5d8ec086224cb6fc4e395f4ba3018c2.jpg" />
<figcaption class="text-center">#item.userName</figcaption>
</figure>
</div>
</article>
<br />
}
</section>
The selector $('.replysubmit') returns all the items with that css class, hence updating the disabled property of all those elements, not just the one closest to the input element.
You should use a relative selector to get the submit button inside the form where the reply input element is.
jQuery closest() and find() methods will be handy
This should work
$(function () {
$('.replysubmit').prop('disabled', true); // Disable all buttons when page loads
// On the keyup event, disable or enable the buttons based on input
$(".replies").keyup(function() {
if ($(this).val().length > 0) {
$(this).closest("form").find(".replysubmit").prop('disabled', false);
} else {
$(this).closest("form").find(".replysubmit").prop('disabled', true);
}
});
});
Related
I am trying to show/hide multiple div's using multiple checkboxes.
i.e. if a checkbox is checked it must target div using id or name and the div contents should be hidden.
Tried the following work but unable to achieve the required goal
<form id="varsection">
<div class="panel box box-primary">
<div id="controlledvariables" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
<div class="box-body">
<div class="col-md-9">
<div class="row secrow">Wave</div>
<div class="row secrow">Gender</div>
</div>
<div class="col-md-1">
//if input name="Wave[]" is selected then
<div class="row secrow" style="text-align: center;">
<input type="checkbox" name="Wave[]" value="top">
</div>
<div class="row secrow" style="text-align: center;">
<input type="checkbox" name="Gender[]" value="top">
</div>
</div>
</div>
</div>
</div>
</form>
<form id="filters">
<div>
//show this div
<div class="panel box box-primary">
<div class="box-header with-border">
<h4 class="box-title">
<a data-toggle="collapse" data-parent="#accordion" href="#Wave" aria-expanded="false" class="collapsed">
Wave
</a>
</h4>
</div>
<div id="Wave" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
<div class="box-body">
<div class="col-md-8">
</div>
<div class="col-md-4">
//or this one
<ul>
<li><input type="checkbox" name="Wave_fiters[]" value="1">Wave-1</li>
<li><input type="checkbox" name="Wave_fiters[]" value="2">Wave-2</li>
</ul>
</div>
</div>
</div>
</div>
[Other multiple div's]
</div>
</form>
jQuery
jQuery(function() {
var checks = $("[name='_Wave[]']");
checks.click(function() {
if (checks.filter(':checked').length == checks.length) {
$("[name='_Wave[]']").show();
} else {
$("[name='_Wave[]']").hide();
}
}).triggerHandler('click')
})
you have 2 problems with this code:
first the jquery selector is wrong it should be like this:
var checks = $("[name='Wave[]']");
without _
second you need to give the div you want to toggle a unique id or a class name
so your code should be like this
jQuery(function () {
var checks = $("[name='Wave[]']");
checks.click(function () {
if (checks.filter(':checked').length == checks.length) {
$(".waveDiv").show();
} else {
$(".waveDiv").hide();
}
}).triggerHandler('click')
})
and this is your input:
<input type="checkbox" name="Wave[]" value="top">
and your div which will be toggled:
<div class="waveDiv panel box box-primary">
Laravel View code:
<div class="col-sm-12">
#foreach($deviceCategory as $deviceCategories)
<div class="col-sm-4">
<div class="panel panel-default">
<div class="panel-heading">
<div class="col-sm-1">
<div id="deviceId" class="check">{{$deviceCategories-
>deviceCategoryId}}</div>
</div>
<br/>
</div>
<div class="panel-body">
<div class="col-sm-2">
<h5><strong>{{$deviceCategories->deviceCategoryName}}</strong></h5>
<h6><button style="border:none; background-color: transparent;"
disabled></button></h6>
</div>
<div class="col-sm-1" align="center">
<img src="{{asset(Storage::url('public/' . $deviceCategories-
>image))}}" width="200" height="150">
</div>
</div>
<div class="panel-footer" align="right"><a href="" data-
toggle="modal" data-target="#myModal"
class="getDeviceCategoryId">SELL THIS CATEGORY</a></div>
</div>
</div>
#endforeach
</div>
This is my view code. Here I am displaying the values dynamically that are fetched from db. Then When I click with the panel-footer (ie.,SELL THIS CATEGORY) , I need to alert the respective value in the panel-heading(ie.,{{$deviceCategories->deviceCategoryId}})
SCRIPT CODE
<script type="text/javascript">
$(document).ready(function() {
$('.getDeviceCategoryId').click(function() {
var value=$('#deviceId').text();
alert(value);
});
});
This is my script code I have tried. But I get only the first id value for all panel footers.
If I understand your question correct and you want to get particular <div id="deviceId"> text while click on SELL THIS CATEGORY:
Laravel View code:
<div id="deviceId" class="check">{{$deviceCategories->deviceCategoryId}}</div>
TO
<div id="deviceId" class="check device-{{$deviceCategories->deviceCategoryId}}">{{$deviceCategories->deviceCategoryId}}</div>
AND
<div class="panel-footer" align="right">SELL THIS CATEGORY</div>
TO
<div class="panel-footer" align="right">
SELL THIS CATEGORY
</div>
SCRIPT CODE
$(document).ready(function() {
$('.getDeviceCategoryId').click(function() {
var dataId = $(this).attr("data-id");
//if you use newer jQuery >= 1.4.3
//var dataId = $(this).data('id');
var value = $('.device-' + dataId).text();
alert(value);
});
});
UPDATE
SCRIPT CODE
$(document).ready(function() {
$('.getDeviceCategoryId').on('click', function() {
var dataId = $(this).attr("data-id");
//if you use newer jQuery >= 1.4.3
//var dataId = $(this).data('id');
var value = $('.device-' + dataId).text();
alert(value);
});
});
UPDATE
Your route should be like: Route::get('products/{dataId}','Categories#products')->name('products');
Your Laravel View code should be like:
<div class="col-sm-12">
#foreach($deviceCategory as $deviceCategories)
<div class="col-sm-4">
<div class="panel panel-default">
<div class="panel-heading">
<div class="col-sm-1">
<div id="deviceId" class="check">{{$deviceCategories->deviceCategoryId}}</div>
</div>
<br/>
</div>
<div class="panel-body">
<div class="col-sm-2">
<h5><strong>{{$deviceCategories->deviceCategoryName}}</strong></h5>
<h6><button style="border:none; background-color: transparent;" disabled></button></h6>
</div>
<div class="col-sm-1" align="center">
<img src="{{asset(Storage::url('public/' . $deviceCategories->image))}}" width="200" height="150">
</div>
</div>
<div class="panel-footer" align="right">SELL THIS CATEGORY</div>
</div>
</div>
#endforeach
</div>
Here no need JQ script...
Try this way -
<div class="panel-footer" align="right">
<a href="javascript:void(0)" data-deviceid="{{$deviceCategories-
>deviceCategoryId}}" data-toggle="modal" data-target="#myModal" class="getDeviceCategoryId">SELL THIS CATEGORY
</a>
</div>
and change your jQuery code to -
$(document).ready(function() {
$('.getDeviceCategoryId').click(function() {
var value=$(this).attr('data-deviceid');
alert(value);
});
});
I have this mark up:
<div class="list-group-item participant-main">
<i class="fa fa-chevron-down" id="chevron-for-div" aria-hidden="true"></i>
<div class="row">
<div class="col-sm-8">
<h5 class="list-group-item-heading">A title</h5>
</div>
<div class="col-sm-4 list-group-item-quick-links ">
<a href="#" />
<a href="#" />
</div>
</div>
</div>
<div class='list-group-item hidden-group-item hide'>
<div class="row">
<div class="col-sm-8">
<p class="list-group-item-text">
Some text
</p>
</div>
<div class="col-sm-4">
<p class="list-group-item-text">
More text
</p>
</div>
</div>
</div>
Previously, I was using Jquery to unhide/hide .hidden-group-item when .participant-main was clicked via this code:
$('body').on('click', '.member-main, .participant-main', function() {
if ($(this).next('.hidden-group-item').hasClass('hide')) {
$('.hidden-group-item').addClass('hide');
$(this).next('.hidden-group-item').toggleClass('hide');
}
else {
$(this).next('.hidden-group-item').toggleClass('hide');
}
$('.hidden-form-item').addClass('hide');
});
I'm adding some links to .participant-main so I can't bind a click event to the whole div anymore so the new links work in parallel. I've tried then to bind the click event to particular elements inside the div thus I moved the target class to particular elements like this.
<div class="list-group-item">
<i class="fa fa-chevron-down participant-main" id="chevron-for-div" aria-hidden="true"></i>
<div class="row">
<div class="col-sm-8 participant-main">
<h5 class="list-group-item-heading">A title</h5>
</div>
<div class="col-sm-4 list-group-item-quick-links ">
<a href="#" />
<a href="#" />
</div>
</div>
</div>
I was hoping it would work but it does not.
I don't understand why is this happening and how to solve. As far as I understand .next() grabs the next element that matches the specified selector.
Since you've nested elements you should use stopPropagation() to stop the event from bubbling :
$('body').on('click', '.member-main, .participant-main', function(e) {
e.stopPropagation();
...
});
Hope this helps.
just need some help on how to change the font color of the title for the current div being selected.
See my code below:
HTML
<div class="bar">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<p id="hideshow1" class="btn">Photography</p>
<p id="hideshow2" class="btn">Graphics</p>
<hr class="small">
</div>
</div>
</div>
</div>
<div id="photography" class="photography">
<div class="container">
<div class="col-lg-10 col-lg-offset-1 text-center">
<hr class="small">
<div class="row">
<div class="col-md-3">
<div class="photography-item">
<div class="thumbnail">
<a class="fancybox-thumbs" data-fancybox-group="photo" title="Honda City 98'" href="imgs/pics/resized/car1.jpg"><img src="imgs/pics/resized/car1.jpg" alt="" /></a>
</div>
</div>
</div>
<hr class="small">
</div>
</div>
</div>
<div class="bar">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<p id="hideshow1" class="btn">Photography</p>
<p id="hideshow2" class="btn">Graphics</p>
<hr class="small">
</div>
</div>
</div>
</div>
<div id="graphics" class="graphics">
<div class="container">
<div class="col-lg-10 col-lg-offset-1 text-center">
<hr class="small">
<div class="row">
<div class="col-md-3">
<div class="graphics-item">
<div class="thumbnail">
<a class="fancybox-thumbs" data-fancybox-group="photo" title="Honda City 98'" href="imgs/pics/resized/car1.jpg"><img src="imgs/pics/resized/car1.jpg" alt="" /></a>
</div>
</div>
</div>
<hr class="small">
</div>
</div>
</div>
JS
$("#hideshow1").click(function(){
$("#photography").slideToggle("slow");
$("#graphics").slideUp("slow");
});
$("#hideshow2").click(function(){
$("#graphics").slideToggle("slow");
$("#photography").slideUp("slow");
});
What I'm trying to do is when I click Photography, it will change the font color and when I click Graphics, the photography color would go back to black and graphics would now be the colored font.
function chgfont(type){
// document.write("<input type=\"button\" id=\"hideshow2\" name=\"hideshow2\" value=\"red\" class=\"btn\" onclick=\"chgfont('B');\"><input type=\"button\" id=\"hideshow1\" name=\"hideshow1\" value=\"blue\" class=\"btn\" onclick=\"chgfont('A');\"> ");
if(type=="A"){
document.getElementById("colorA").style.color ="blue";
// document.write("<font color=\"blue\">Font colors is blue</font>");
}else{
document.getElementById("colorA").style.color ="red";
// document.write("<font color=\"red\">Font colors is red</font>");
}
}
<div class="bar">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<input type="button" id="hideshow1" name="hideshow1" value="blue" class="btn" onclick="chgfont('A');">
<input type="button" id="hideshow2" name="hideshow2" value="red" class="btn" onclick="chgfont('B');">
<hr class="small">
<div id="colorA">
Colored By Santa
</div>
</div>
</div>
</div>
</div>
I hope i can help you.
I would suggest a little different formation of your function. Select the .btn elements and, depending on the clicked element, get the id and perform your actions.
As for the font color, write up a css rule giving the desired color and simply add, or remove this class form the respective elements:
jQuery
$('.btn').on('click', function() {
var that = $(this);
var id = that.attr('id');
//Remove .colored class form all .btn elements
$('.btn').removeClass('colored');
//Add .colored class to the clicked element
that.addClass('colored');
var ph = $("#photography");
var gr = $("#graphics");
//Permorm the appropriate action depending on the clicked id
if (id == '#hideshow1') {
ph.slideToggle("slow");
gr.slideUp("slow");
} else if (id == '#hideshow2') {
gr.slideToggle("slow");
ph.slideUp("slow");
}
});
CSS
.colored { color:red }
I'm going mad here.
I have a search icon. If the user clicks on it, a dropdown is opened. If he/she clicks outside of the element, it closes the dropdown. My problem is that I want to close it if the user clicks again on the icon, but this part doesn't work. I guess the problem is the event.stopPropagation.
I have the following js code:
$('.mobile-search').on('click', function(event){
$('.oe_searchview').show().css('margin-bottom', '15px');
if ($('.oe-right-toolbar').length) {
viewOptions.hide();
}
event.preventDefault();
event.stopPropagation() // stops bubbling
// hide search if user clicks outside of the search button
$('html').on('click.search', function (ev) {
if (!$(ev.target).parents('.oe_searchview').length && !$(ev.target).parents('.oe-search-options').length) { // if the click's parent has no .oe_searchview class then hide
$('html').off('click.search');
searchField.hide();
} else if ($(ev.target).parents('.mobile-search').length) {
searchField.hide();
}
});
});
HTML code is:
<div class="col-md-4 col-sm-6 col-xs-12 active-app-title">
<h2 class="hidden-xs">OPPORTUNITIES</h2>
<div class="btn btn-primary"><div class="ripple" style="width: 100%; height=100%;">Create</div> </div>
<span>or</span>
<div class="btn btn-primary"><div class="ripple" style="width: 100%; height=100%;">Add new column</div></div>
<div class="mobile-search">
<img src="/website/static/src/img/search-icon.png" alt="Search Again" class="search-icon"/>
</div>
<div class="mobile-views">
<a class="flaticon-pause45" href="#"></a>
</div>
</div>
<div class="col-md-6 col-sm-12 col-xs-12 search">
<div class="oe_searchview form-control input-sm active">
<div class="oe_searchview_search" title="Search Again">
<img src="/website/static/src/img/search-icon.png" alt="Search Again" class="search-icon"/>
</div>
<div class="oe_searchview_facets">
<div class="oe_searchview_input" contenteditable="true" tabindex="0"></div>
</div>
<div class="oe_searchview_unfold_drawer" title="Advanced Search...">
<img src="/website/static/src/img/arrow-down.png" alt="Search Again" class="arrow-down-icon"/>
</div>
</div>
<div class="oe-search-options btn-group">
<div class="btn-group btn-group-sm">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">Filters</button>
</div>
<div class="btn-group btn-group-sm oe-groupby-menu">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">Group By</button>
</div>
<div class="btn-group btn-group-sm">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">Favorites</button>
</div>
</div>
<div class="oe-right-toolbar">
<div class="oe-view-manager-switch btn-group btn-group-sm">
<span class="flaticon-pause45"></span>
<span class="flaticon-list91"></span>
<span class="flaticon-statistical"></span>
<span class="flaticon-calendar160"></span>
</div>
</div>
</div>
I'm novice in js so every help would be appreciated.
This is how I would approach it
// one behaviour for the search button
// this checks to see if the search button is visible, and if so,
$('.mobile-search').on('click', function(event){
event.preventDefault();
event.stopPropagation() // stops bubbling
if($('.oe_searchview').is(":visible")){
// hide the search view
$('.oe_searchview').hide();
}
else
{
// show the search view
$('.oe_searchview').show().css('margin-bottom', '15px');
if ($('.oe-right-toolbar').length) {
viewOptions.hide();
}
}
});
// this second behaviour happens only
// hide search if user clicks outside of the search button
$('html').on('click', function (ev) {
if (!$(ev.target).parents('.oe_searchview').length && !$(ev.target).parents('.oe-search-options').length) { // if the click's parent has no .oe_searchview class then hide
$('.oe_searchview').hide();
}
});