How to select the input with jquery? - javascript

I want to get the value of a input and i want to do it with jquery.
I just want to get the value of the hidden input with name="picture"when I click on حذف این بخش button which have onclick="deleteDefaultSection($(this)).
I have used .parent() function to come out of that scope. But when I'm in the div with class="ribbon-wrapper card". I cant go into the div with class="col-md-12" and select the value of hidden input with class="picture" in it.
<div class="ribbon-wrapper card">
<div class="card-header">
<div class="ribbon ribbon-default pull-right">
<input type="text" style="height: 24px;
border-radius: 3px;
border: none;
padding: 5px;
font-size: 12px;
width: 130px;
text-align: center;
font-weight: normal;" name="name" class="nameSection" placeholder="بازه زمانی را وارد کنید" value="<%= analysis.timeFrames[i] %>" />
</div>
</div>
<div class="card-body">
<div style="float: right;
top: 15px;
right: 20px;">
<button type="button" class="btn btn-sm btn-outline-primary" data-toggle="modal" data-target="#AddSection" data-type="">اضافه
کردن عکس
</button>
<button type="button" class="btn btn-sm btn-outline-danger" onclick="deleteDefaultSection($(this))">حذف این بخش
</button>
</div>
</div>
<!-- This row is for showing the uploaded image and its description -->
<div class="row">
<div class="col-md-12" style="text-align: center;">
<input type="hidden" class="picture" name="picture" value="<%= analysis.images[i] %>">
<input type="hidden" class="details" name="details" value="<%= analysis.imagesDesc[i] %>">
<input type="hidden" class="sectionname" name="timeFrames" value="<%= analysis.timeFrames[i] %>">
<div class="boxUploadImage Active" data-typeSection="<%= i %>" data-name="<%= i + 64 %>">
<img onclick="viewPicture($(this))" src="<%= analysis.images[i] %>" width="80%" height="200px">
<div data-toggle="modal" data-target="#viewDiscription" onclick="viewDetails($(this))" class="p ">
<%= analysis.imagesDesc[i] %>
</div>
<div class="boxBotton row my-5">
<div class="col-lg-7 mr-4">
<button class="btn btn-block btn-sm btn-twitter" data-toggle="modal" data-target="#EditSection" onclick="editSection($(this), event)">ویرایش</button>
</div>
<div class="col-lg-4">
<button class="btn btn-block btn-sm btn-danger deleteSection" onclick="deleteSection($(this))">حذف</button>
</div>
</div>
</div>
</div>
</div>
</div>

You can do it like this:
function deleteDefaultSection(obj) {
var pic = obj.closest(".card").find('[name="picture"]');
console.log(pic.val());
}
.closest(".card") travels up in the html and selects the first element with the class card it finds.
Then you can use .find() and combine it with [name="picture"] to get the element that has the name attribute with the value picture of it
Demo
function deleteDefaultSection(obj) {
var pic = obj.closest(".card").find('[name="picture"]');
console.log(pic.val());
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ribbon-wrapper card">
<div class="card-header">
<div class="ribbon ribbon-default pull-right">
<input type="text" style="height: 24px;
border-radius: 3px;
border: none;
padding: 5px;
font-size: 12px;
width: 130px;
text-align: center;
font-weight: normal;" name="name" class="nameSection" placeholder="بازه زمانی را وارد کنید" value="<%= analysis.timeFrames[i] %>" />
</div>
</div>
<div class="card-body">
<div style="float: right;
top: 15px;
right: 20px;">
<button type="button" class="btn btn-sm btn-outline-primary" data-toggle="modal" data-target="#AddSection" data-type="">اضافه
کردن عکس
</button>
<button type="button" class="btn btn-sm btn-outline-danger" onclick="deleteDefaultSection($(this))">حذف این بخش
</button>
</div>
</div>
<!-- This row is for showing the uploaded image and its description -->
<div class="row">
<div class="col-md-12" style="text-align: center;">
<input type="hidden" class="picture" name="picture" value="Hiddenvalue">
<input type="hidden" class="details" name="details" value="<%= analysis.imagesDesc[i] %>">
<input type="hidden" class="sectionname" name="timeFrames" value="<%= analysis.timeFrames[i] %>">
<div class="boxUploadImage Active" data-typeSection="<%= i %>" data-name="<%= i + 64 %>">
<img onclick="viewPicture($(this))" src="<%= analysis.images[i] %>" width="80%" height="200px">
<div data-toggle="modal" data-target="#viewDiscription" onclick="viewDetails($(this))" class="p ">
<%= analysis.imagesDesc[i] %>
</div>
<div class="boxBotton row my-5">
<div class="col-lg-7 mr-4">
<button class="btn btn-block btn-sm btn-twitter" data-toggle="modal" data-target="#EditSection" onclick="editSection($(this), event)">ویرایش</button>
</div>
<div class="col-lg-4">
<button class="btn btn-block btn-sm btn-danger deleteSection" onclick="deleteSection($(this))">حذف</button>
</div>
</div>
</div>
</div>
</div>
</div>

Related

bootstrap - javascript: modal icheck box not getting unchecked on closing

I have the following html
<div class="modal inmodal" id="handleUserModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content animated fadeIn">
<form class="form">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Add user</h4>
</div>
<div class="modal-body">
<div class="form-group row profile_field">
<label class="col-lg-3 col-form-label">First Name</label>
<div class="col-lg-9">
<input id="firstname" name="firstname" type="text" placeholder="First Name" class="form-control">
</div>
</div>
<div class="form-group row reset_password_field mb-0 mt-4">
<div class="col-lg-offset-2 col-lg-10">
<div class="i-checks reset_password_check" id="password_check">
<label> <input id="passresetcheck" type="checkbox" /> Reset password </label>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="saveButton">Save</button>
</div>
</form>
</div>
</div>
</div>
Now i have tried to the following to uncheck
using the id of the input
$('passresetcheck').prop('checked',false)
also
$('passresetcheck').attr('checked',false)
using modal id
$("#handleUserModal .modal-body").find('input:radio, input:checkbox').prop('checked', false);
Finally what worked for me, is also to remove the checked class
// this is for the input
$('#passresetcheck').prop('checked', false);
// this is to remove checked class
$("#password_check div").each(function(index,elem){
if (elem.classList.contains("checked")) {
elem.classList.remove("checked");
}
})
My observation what happens to html when we check
This is without any checking
<div class="form-group row reset_password_field mb-0 mt-4">
<div class="col-lg-offset-2 col-lg-10">
<div class="i-checks reset_password_check" id="password_check">
<label> <input id="passresetcheck" type="checkbox" /> Reset password </label>
</div>
</div>
</div>
after checking it gets converted like this, it adds a class checked in the div inside i-checks
<div class="i-checks reset_password_check" id="password_check">
<label class="">
<div class="icheckbox_square-green checked" style="position: relative;">
<input id="passresetcheck" type="checkbox" style="position: absolute; opacity: 0;">
<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;"></ins>
</div>
Reset password
</label>
</div>
Always check first if you capture something or not. In your case $('passresetcheck') is undefined.
You need to search by ID using # symbol like here $('#passresetcheck'):
const checkbox = $('#passresetcheck')
checkbox.prop('checked', false)
setTimeout(() => checkbox.prop('checked', true), 2000)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal inmodal" id="handleUserModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content animated fadeIn">
<form class="form">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Add user</h4>
</div>
<div class="modal-body">
<div class="form-group row profile_field">
<label class="col-lg-3 col-form-label">First Name</label>
<div class="col-lg-9">
<input id="firstname" name="firstname" type="text" placeholder="First Name" class="form-control">
</div>
</div>
<div class="form-group row reset_password_field mb-0 mt-4">
<div class="col-lg-offset-2 col-lg-10">
<div class="i-checks reset_password_check" id="password_check">
<label> <input id="passresetcheck" type="checkbox" /> Reset password </label>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="saveButton">Save</button>
</div>
</form>
</div>
</div>
</div>

How do I trigger a Modal with JavaScript?

I want to show a modal in my document when I click on an element. I am able to make it work with default bootstrap 'data-toggle' and 'data-target' attributes. But when I try to achieve the same effect with JavaScript, the modal is not showing up. Here is the relevant code:
<span class="navbar-text">
<a href="" id="login">
<span class="fa fa-sign-in fa-lg"></span>
Login
</a>
</span>
<script>
$(document).ready(function () {
$("#login").click(function () {
$("#loginModal").modal('show');
});
});
</script>
It just appears to fade in the modal for a split second but it does not show up.
Below is the modal div which I am trying to show:
<div id="loginModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg" role="content">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Login</h4>
<button type="button" class="close" data-dismiss="modal">
×
</button>
</div>
<div class="modal-body">
<form>
<div class="form-row">
<div class="form-group col-sm-4">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control form-control-sm mr-1" id="exampleInputEmail3"
placeholder="Enter email">
</div>
<div class="form-group col-sm-4">
<label class="sr-only" for="exampleInputPassword3">Password</label>
<input type="password" class="form-control form-control-sm mr-1" id="exampleInputPassword3"
placeholder="Password">
</div>
<div class="col-sm-auto">
<div class="form-check">
<input class="form-check-input" type="checkbox">
<label class="form-check-label"> Remember me
</label>
</div>
</div>
</div>
<div class="form-row">
<button type="button" class="btn btn-secondary btn-sm ml-auto"
data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary btn-sm ml-2">Sign in</button>
</div>
</form>
</div>
</div>
</div>
</div>
Your code is correct, but you have not provided any HTML. I can only assume you followed the guides below to set up your site.
Edit: Since you provided your HTML, your problem is your href is empty, so it is going to an empty page. Change the anchor href to # or make it a button like in my full example below.
<a href="#" id="login">
Here is a perfect explanation: href must not reload. You can even throw in an onClick event for good measure.
Your fixed code
$(function() {
$("#login").click(function() {
$("#loginModal").modal('show');
});
});
.navbar-text {
display: block;
border: thin solid #007bff;
margin: 1em;
padding: 0.5em;
border-radius: 0.5em;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<span class="navbar-text">
<a href="#" id="login">
<span class="fa fa-sign-in fa-lg"></span> Login
</a>
</span>
<div id="loginModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg" role="content">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Login</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form>
<div class="form-row">
<div class="form-group col-sm-4">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control form-control-sm mr-1" id="exampleInputEmail3" placeholder="Enter email">
</div>
<div class="form-group col-sm-4">
<label class="sr-only" for="exampleInputPassword3">Password</label>
<input type="password" class="form-control form-control-sm mr-1" id="exampleInputPassword3" placeholder="Password">
</div>
<div class="col-sm-auto">
<div class="form-check">
<input class="form-check-input" type="checkbox">
<label class="form-check-label"> Remember me</label>
</div>
</div>
</div>
<div class="form-row">
<button type="button" class="btn btn-secondary btn-sm ml-auto" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary btn-sm ml-2">Sign in</button>
</div>
</form>
</div>
</div>
</div>
</div>
Full button example
The Modal documentation has multiple examples of windows. I combined four documentation examples below to create a usable "Log In" function for a Bootstrap site.
Important steps
Ensure your button id is "login"
Ensure your modal window id is "loginModal"
Ensure your modal window is laid-out correctly
Ensure your modal window has the correct fade class
Resources
https://getbootstrap.com/docs/4.0/getting-started/download/
https://getbootstrap.com/docs/4.0/examples/pricing/
https://getbootstrap.com/docs/4.0/components/modal/
https://getbootstrap.com/docs/4.0/components/forms/
$(function() {
$("#login").click(function() {
$("#loginModal").modal('show');
});
});
html {
font-size: 14px;
}
#media (min-width: 768px) {
html {
font-size: 16px;
}
}
.container {
max-width: 960px;
}
.pricing-header {
max-width: 700px;
}
.border-top {
border-top: 1px solid #e5e5e5;
}
.border-bottom {
border-bottom: 1px solid #e5e5e5;
}
.box-shadow {
box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom box-shadow">
<h5 class="my-0 mr-md-auto font-weight-normal">Company name</h5>
<nav class="my-2 my-md-0 mr-md-3">
<a class="p-2 text-dark" href="#">Features</a>
<a class="p-2 text-dark" href="#">Enterprise</a>
<a class="p-2 text-dark" href="#">Support</a>
<a class="p-2 text-dark" href="#">Pricing</a>
</nav>
<a class="btn btn-outline-primary" id="login" href="#">
<span class="fa fa-sign-in fa-lg"></span> Log In
</a>
</div>
<div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
<h1 class="display-4">Pricing</h1>
<p class="lead">Quickly build an effective pricing table for your potential customers with this Bootstrap example. It's built with default Bootstrap components and utilities with little customization.</p>
</div>
<div id="loginModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Log In</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group row">
<label for="inputEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail" value="email#example.com">
</div>
</div>
<div class="form-group row">
<label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Log In</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

appended div coming out of the form

Here div is coming out of the form, i want to show the appended div inside the update_new_1 but the div is coming out of the form.Here is my code
var maxAppend = 0;
$(document).on('click', '.update_more', function() {
var u_id = $(this).attr("u_id");
var add_new = $('<div class="form-group" style="margin-bottom: 0px">\n\
<label for="field-1" class="col-sm-4 control-label">Document</label>\n\
<div class="col-sm-5">\n\
<div class="fileinput fileinput-new" data-provides="fileinput">\n\
<span class="btn btn-default btn-file"><span class="fileinput-new" >Select file</span><span class="fileinput-exists" >Change</span><input type="file" name="files[]" ></span> <span class="fileinput-filename"></span>×</div></div>\n\<div class="col-sm-2">\n\<strong>\n\
<i class="fa fa-times"></i> Remove</strong></div>');
maxAppend++;
var resil = $(this).closest("#update_new_" + u_id).append(add_new);
});
<form method="post" class="form_1" action="" enctype="multipart/form-data">
<div id="update_new_1" class="update_new_1 item-row">
<div class="form-group mb0" style="margin-bottom: 0px">
<label for="field-1" class="col-sm-4 control-label">Other Document</label>
<div class="col-sm-5">
<div class="fileinput fileinput-new" data-provides="fileinput">
</div>
<div id="msg_pdf" style="color: #e11221"></div>
</div>
<div class="col-sm-3">
<strong>
<a href="javascript:void(0);" id="update_more" u_id="1" class="addCF item-row-click update_more">
<i class="fa fa-plus">
</i>
Add More</a>
</strong>
</div>
</div>
</div>
<div class="modal-footer">
<img src="<?php echo base_url();?>assets/resources/ajax-loader.gif" id="ajaxIndicator" style="display: none; margin-right: 10px" />
<input type="submit" id="btnSubmit" class="btn btn-primary" style="font-weight: bold" value="Edit Details" />
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<!-- <button type="button" class="btn btn-primary">Save changes</button> -->
</div>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

How can i filter content using JavaScript

I really need your help.
I have a div with 7 input elements (buttons) and a clear selection.
<div class="col-lg-2 col-md-12">
<a id="clear-selection" class="clear-selection">Clear Selections</a>
</div>
<div class="col-lg-10 col-md-12 selectable-buttons-container">
<input type="button" value="Button 1" class="btn btn-sm btn-selectable-blue" />
<input type="button" value="Button 2" class="btn btn-sm btn-selectable-blue" />
<input type="button" value="Button 3" class="btn btn-sm btn-selectable-blue" />
<input type="button" value="Button 4" class="btn btn-sm btn-selectable-blue" />
<input type="button" value="Button 5" class="btn btn-sm btn-selectable-blue" />
<input type="button" value="Button 6" class="btn btn-sm btn-selectable-blue" />
<input type="button" value="Button 7" class="btn btn-sm btn-selectable-blue" />
</div>
Also, i have content with many (over 30 rows) each of them beside other content, has some of the buttons listed in it for example
First row
<div class="row" style="padding-top: 30px;">
<div class="col-lg-10 col-lg-offset-2 col-md-12 col-sm-12 col-xs-12">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 dynamic-divs">
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-12" style="padding-left: 0; padding-right: 0">
<input type="button" value="Button 6" class="btn btn-sm btn-dynamic-blue" />
<input type="button" value="Button 2" class="btn btn-sm btn-dynamic-gray" />
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<p class="dynamic-div-title">Div Title</p>
<p class="dynamic-div-text">Div Text</p>
<p class="dynamic-div-link">See Other Versions <img src="images/arrow-right.png" alt="Arrow"></p>
</div>
<div class="col-lg-6 col-md-6 col-sm-5 col-xs-12">
<button class="btn dynamic-div-btn"><img src="images/arrow-right-white.png" class="pull-right" alt="Arrow"> Download</button>
<p class="hardened-images">This is some example paragraph</p>
</div>
</div>
</div>
</div>
Second row
<div class="row">
<div class="col-lg-10 col-lg-offset-2 col-md-12 col-sm-12">
<div class="col-lg-12 col-md-12 col-sm-12 dynamic-divs">
<div class="col-lg-2 col-md-2 col-sm-3" style="padding-left: 0; padding-right: 0">
<input type="button" value="Button 3" class="btn btn-sm btn-dynamic-blue" />
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<p class="dynamic-div-title">Div Title</p>
<p class="dynamic-div-text">Text</p>
<input type="button" value="See Other Versions" class="dynamic-div-link"><img src="images/arrow-right.png" alt="Arrow"></input>
</div>
<div class="col-lg-6 col-md-6 col-sm-5">
<button class="btn dynamic-div-btn"><img src="images/arrow-right-white.png" class="pull-right" alt="Arrow"> Download</button>
<p class="hardened-images">This is second example paragraph</p>
</div>
</div>
</div>
</div>
Now, what I need to do is basically a filter, i.e when someone press the Button 1 I will only show all rows that have Button 1 in their content.
Then if someone press Button 3 I will show all the rows that has BUTTON 1 or BUTTON 3 listed inside them etc. until someone press CLEAR SELECTION then its back to default (all rows displayed).
Can someone please help me and tell me a way I can get this done?
I think this can be done with jQuery or pure JS. I have tried to do this and I have some code but to be honest I AM NOT even close to what I need so that's why I thought to ask you hoping someone can help me here.
Please try following code. This will give you what you asked for :)
var hideAllDivs = false;
$(document).ready(function() {
hideAllDivs = true;
});
function showHide(btnClicked) {
if ($(btnClicked).val() == "Clear All") {
$("input[type='button']").removeClass('active');
$("div.row").show();
hideAllDivs = true;
return;
}
if (hideAllDivs) {
hideAllDivs = false;
$("div.row").hide();
}
$(btnClicked).addClass('active');
$("input[value='" + $(btnClicked).val() + "']").closest('div.row').slideDown();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="col-lg-2 col-md-12">
<a id="clear-selection" class="clear-selection">Clear Selections</a>
</div>
<div class="col-lg-10 col-md-12 selectable-buttons-container">
<input type="button" value="Button 1" class="btn btn-sm btn-selectable-blue" onclick="showHide(this);" />
<input type="button" value="Button 2" class="btn btn-sm btn-selectable-blue" onclick="showHide(this);" />
<input type="button" value="Button 3" class="btn btn-sm btn-selectable-blue" onclick="showHide(this);" />
<input type="button" value="Button 4" class="btn btn-sm btn-selectable-blue" onclick="showHide(this);" />
<input type="button" value="Button 5" class="btn btn-sm btn-selectable-blue" onclick="showHide(this);" />
<input type="button" value="Button 6" class="btn btn-sm btn-selectable-blue" onclick="showHide(this);" />
<input type="button" value="Button 7" class="btn btn-sm btn-selectable-blue" onclick="showHide(this);" />
<input type="button" value="Clear All" class="btn btn-sm btn-selectable-blue" onclick="showHide(this);" />
</div>
<div class="row" style="padding-top: 30px;">
<div class="col-lg-10 col-lg-offset-2 col-md-12 col-sm-12 col-xs-12">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 dynamic-divs">
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-12" style="padding-left: 0; padding-right: 0">
<input type="button" value="Button 6" class="btn btn-sm btn-dynamic-blue" />
<input type="button" value="Button 2" class="btn btn-sm btn-dynamic-gray" />
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<p class="dynamic-div-title">Div Title</p>
<p class="dynamic-div-text">Div Text</p>
<p class="dynamic-div-link">See Other Versions <img src="images/arrow-right.png" alt="Arrow"></p>
</div>
<div class="col-lg-6 col-md-6 col-sm-5 col-xs-12">
<button class="btn dynamic-div-btn"><img src="images/arrow-right-white.png" class="pull-right" alt="Arrow"> Download</button>
<p class="hardened-images">This is some example paragraph</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-10 col-lg-offset-2 col-md-12 col-sm-12">
<div class="col-lg-12 col-md-12 col-sm-12 dynamic-divs">
<div class="col-lg-2 col-md-2 col-sm-3" style="padding-left: 0; padding-right: 0">
<input type="button" value="Button 3" class="btn btn-sm btn-dynamic-blue" />
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<p class="dynamic-div-title">Div Title</p>
<p class="dynamic-div-text">Text</p>
<input type="button" value="See Other Versions" class="dynamic-div-link"><img src="images/arrow-right.png" alt="Arrow"></input>
</div>
<div class="col-lg-6 col-md-6 col-sm-5">
<button class="btn dynamic-div-btn"><img src="images/arrow-right-white.png" class="pull-right" alt="Arrow"> Download</button>
<p class="hardened-images">This is second example paragraph</p>
</div>
</div>
</div>
</div>
Simply add data-target="..." to your buttons and when clicked, display these contents that has button target class.
$(document).ready(function() {
$('button').click(function() {
var pars = $('#contents p');
if ($(this).data('target') == 'all') {
pars.show();
} else {
if ($('#contents p:visible').length == pars.length) {
pars.hide();
}
$('#contents p.' + $(this).data('target')).show();
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-target="b1">B1</button>
<button data-target="b2">B2</button>
<button data-target="b3">B3</button>
<button data-target="all">Clear</button>
<hr/>
<div id="contents">
<p class="b1">Content with B1</p>
<p class="b2">Content with B2</p>
<p class="b1">Content with B1</p>
<p class="b3">Content with B3</p>
<p class="b1">Content with B1</p>
<p class="b2">Content with B2</p>
<p class="b1">Content with B1</p>
<p class="b3">Content with B3</p>
<p class="b1">Content with B1</p>
</div>
Something like this should be ok for your needs:
https://jsfiddle.net/StarStep/vbc9h4tp/3/
function filtercontent(searchfor, where) {
$(where).each(function() {
var divtags = '';
if(typeof searchfor == 'undefined') {
$(this).slideDown();
return true;
}
$(this).find('.filterinput').each(function() {
divtags += this.value + ' ';
});
if (divtags.indexOf(searchfor) < 0) {
$(this).slideUp();
} else {
$(this).slideDown();
}
});
}
$('.filterme').click(function() {
filtercontent(this.value, '.row');
});
You don't need jQuery necessarily. It can be solved in pure JS.
<script>
var selectBtns = document.getElementsByClassName('btn-selectable-blue');
var rows = document.getElementsByClassName('row');
for (var i = 0; i < selectBtns.length; i++) {
selectBtns[i].addEventListener('click', function () {
var patternToFind = this.value;
for (var j = 1; j < rows.length; j++) {
var currentStr = rows[j].innerHTML;
var containsDesired =currentStr.indexOf(patternToFind);
if (containsDesired != -1) {
rows[j].innerHTML = "";
}
}
});
}
</script>
at first some advice:
you will need to add some specific classes or name attribute to your html row so set your architecture more understandable and easier to manipulate
ex
....
Avoid to set input value with space :
ex
<input type="button" value="button_1" class="btn btn-sm btn-selectable-blue" />
If you need to post these informations add name attribute and id to your input
Practise:
Considering that jquery lib is loaded, and callable with $.
All your rows must have an attribute style like "display:none;",
then on the button input add :
onclick="$('.' + this.value).show()"
this will dynamicaly display all rows there have input value as class.
it's a way of beginning what you want to do.

How to store and retrieve value of button when clicked?

I'm making a checkin app for my soccer team. I think I got the buttons programmed properly but I'm having problems storing the value and retrieving the value from mySQL database. Can someone please tell me what piece of code I'm missing? thanks in advance.
<style>
.height {
height: 100px;
}
.height2 {
height: 50px;
text-align: center;
}
.fc {
display: block;
margin-left: auto;
margin-right: auto;
}
body {
font-family: monospace;
font-size: 4em;
font-weight: bold;
}
.btn-xl {
padding: 15px 24px;
font-size: 24px;
line-height: 1.4;
border-radius: 8px;
text-transform: uppercase;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
(function($, window, document) {
$(function() {
// bind to the click event of the checkin button
$('.btn-player-checkin').on('click', function() {
// if the button has the success class - assume the user is checked in
var isCheckedIn = $(this).hasClass('btn-success');
// get the player id from the data attribute
var playerId = $(this).data('player-id');
// call the send function
// sendDataToServer(!isCheckedIn, playerId, $(this)); // send the status we want the player to save (ie. opposite of current);
// if you would like to test the success function without the ajax call, comment out above and uncomment below
if (!isCheckedIn) { // trying to check out
$(this).text('IN');
} else { // checking in
$(this).text('OUT');
}
// cycle classes
$(this).toggleClass('btn-success btn-danger');
});
function sendDataToServer(newStatus, playerId, button) {
$.ajax({
url: 'http://labombafootball.com/checkin', // replace this with the url of the server end point
method: 'POST',
data: {
playerId: playerId,
status: newStatus
} // send this data, on the server you could also record the timestamp of when this occurred
}).done(function() { // if we successfully complete the post
if (newStatus) { // checking in
button.text('OUT');
} else { // trying to check out
button.text('IN');
}
// cycle classes
button.toggleClass('btn-success btn-danger');
}).fail(function() {
// do something if the post fails
});
}
});
}(window.jQuery, window, document));
</script>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 height"><img class="fc" src="images/la-bomba-fc-sm.jpg"></div>
</div>
<div class="row">
<div class="col-xs-8 height2">#2 STEVE B</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="2">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#1 INDER JHOOTY</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="1">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#21 CHRIS NAKATSU</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="21">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#88 NICK MARSHALL</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="88">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#99 TONY YUN</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="99">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#6 DANIELE BORRELLI</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="6">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#11 NITESH SHETTY</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="11">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#45 UDAYA MADANAYAKE</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="45">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#9 ADRIAN PARTYKA</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="9">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#5 PATRICK REGAN</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="5">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#13 RAMEZ ALAM</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="13">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#8 FAIZAN ALAM</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="8">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#33 DAVID CLEBAN</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="33">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#14 VICTOR JIMENEZ</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="14">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#7 HARRY SANDHU</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="7">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#77 JOHN PINEDA</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="77">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#44 DEVON CARNEY</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="44">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#17 JUSTIN CONSTANTINEAU</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="17">OUT</button>
</div>
</div>
</div>

Categories