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>
Related
Everything works fine but it also copies the value inside input button e.g if i write 1st in the input, 1st will also be copied on click of the button, does anyone has any resolution ?
$(function(){
$(".btn-copy").on('click', function(){
var ele = $(this).closest('.example-2').clone(true);
$(this).closest('.example-2').after(ele);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h5 class="card-title">Add Class</h5>
</div>
<div class="card-body">
<form action="#">
<div class="example-2 form-group row">
<!--<label class="col-form-label col-md-2">Input Addons</label>-->
<div class="col-xs-2">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Class Name</span>
</div>
<input class="form-control" type="text">
<div class="input-group-append">
<button class="btn-copy btn btn-primary" type="button">Add More</button>
</div>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-xs-2">
<button class="btn btn-primary" type="button">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
$(function() {
$(".btn-copy").on('click', function() {
var ele = $(this).closest('.example-2').clone(true);
ele.find('input').val('')
if (ele.find('button').length<2) {
let btn = document.createElement("button");
btn.innerHTML = "Delete";
btn.onclick = (e) => {
e.preventDefault()
ele.remove()
}
ele[0].appendChild(btn);
}
$(this).closest('.example-2').after(ele);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h5 class="card-title">Add Class</h5>
</div>
<div class="card-body">
<form action="#">
<div class="example-2 form-group row">
<!--<label class="col-form-label col-md-2">Input Addons</label>-->
<div class="col-xs-2">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Class Name</span>
</div>
<input class="form-control" type="text">
<div class="input-group-append">
<button class="btn-copy btn btn-primary" type="button">Add More</button>
</div>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-xs-2">
<button class="btn btn-primary" type="button">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
In this image
,
you can see a side menu. There is an offline, online and construction panel. Also there are a few locations, each location is a block(the two buttons are attached to its div). These are hardcoded, I'm trying to automate them instead. based on some values in my code "OFF", "ON" or "construction" the blocks should be ordered to their corresponding panel. What's the best way to do this? I want to see the blocks reposition without having to refresh.
This is a basic Jsfiddle of the menu above:
https://jsfiddle.net/3zq4Lpxb/
Entire HTML for the site menu: https://pastebin.com/e8VKmLZH
FYI: I'm creating a webapplication, using MVC5, ASP.net.
Basic snippet of HTML:
<div id="rightMenu" class="right-area">
<div class="menu-background"></div>
<div class="col-lg-12 right-area-top-buttons">
<div class="btn btn-dark-themed btn-close-sidemenu" onclick="navigateToPage('CloseRightMenu')"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span></div>
</div>
<div class="col-lg-12 search-bar">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-dark-themed" type="button"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
</span>
</div>
</div>
<div class="col-lg-12 status-bars">
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">Offline</h3>
</div>
<div class="panel-body">
<div class="row col-lg-12 item-group">
<div class="col-lg-6 item-title">Isfanbul</div>
<div class="item-button-group pull-right">
<button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
<button class="item-button" id="JumpToIsfanbul"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>
</div>
<div class="row col-lg-12 item-group">
<div class="col-lg-6 item-title">Monolith</div>
<div class="item-button-group pull-right">
<button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
<button class="item-button" id="JumpToMonolith"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">Under Construction</h3>
</div>
<div class="panel-body">
<div class="row col-lg-12 item-group">
<div class="col-lg-6 item-title">New Haven</div>
<div class="item-button-group pull-right">
<button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
<button class="item-button" id="JumpToNewHaven"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Online</h3>
</div>
<div class="panel-body">
<div class="row col-lg-12 item-group">
<div class="col-lg-6 item-title">JejuIsland</div>
<div class="item-button-group pull-right">
<button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
<button class="item-button" id="JumpToJejuIsland"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
</div>
This works as specified if the item-group gets one of the 3 classes matching the ID of the panel
const reorderDivs = () => {
[...document.querySelectorAll(".panel")].forEach(panel => {
const id = panel.id;
[...document.querySelectorAll("." + id)].forEach(item => {
const parentContainer = panel.querySelector(".panel-body");
// console.log(item.querySelector(".item-title").textContent,"moved to",id);
parentContainer.appendChild(item);
})
})
};
// example toggle code
const classes = ['offline', 'construction', 'online'];
window.addEventListener("load", () => {
reorderDivs(); // initialise
document.getElementById("rightMenu").addEventListener("click", function(e) { // example of a toggle
const tgt = e.target;
if (tgt.classList.contains("toggle")) {
const item = tgt.closest(".item-group");
const classList = item.classList;
for (let cl of classList) {
const idx = classes.indexOf(cl);
if (idx !== -1) { // found
classList.remove(cl);
newClass = classes[(idx + 1) % classes.length];
}
}
classList.add(newClass)
reorderDivs();
}
})
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div id="rightMenu" class="right-area">
<div class="menu-background"></div>
<div class="col-lg-12 right-area-top-buttons">
<div class="btn btn-dark-themed btn-close-sidemenu" onclick="navigateToPage('CloseRightMenu')"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span></div>
</div>
<div class="col-lg-12 search-bar">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-dark-themed" type="button"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
</span>
</div>
</div>
<div class="col-lg-12 status-bars">
<div class="panel panel-danger" id="offline">
<div class="panel-heading">
<h3 class="panel-title">Offline</h3>
</div>
<div class="panel-body">
<div class="row col-lg-12 item-group offline">
<div class="col-lg-6 item-title">Isfanbul <button class="toggle" type="button">Switch state</button></div>
<div class="item-button-group pull-right">
<button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
<button class="item-button" id="JumpToIsfanbul"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>
</div>
<div class="row col-lg-12 item-group construction">
<div class="col-lg-6 item-title">Monolith CONSTRUCTION</div>
<div class="item-button-group pull-right">
<button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
<button class="item-button" id="JumpToMonolith"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
<div class="panel panel-warning" id="construction">
<div class="panel-heading">
<h3 class="panel-title">Under Construction</h3>
</div>
<div class="panel-body">
<div class="row col-lg-12 item-group online">
<div class="col-lg-6 item-title">New Haven ONLINE</div>
<div class="item-button-group pull-right">
<button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
<button class="item-button" id="JumpToNewHaven"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
<div class="panel panel-success" id="online">
<div class="panel-heading">
<h3 class="panel-title">Online</h3>
</div>
<div class="panel-body">
<div class="row col-lg-12 item-group offline">
<div class="col-lg-6 item-title">JejuIsland OFFLINE</div>
<div class="item-button-group pull-right">
<button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
<button class="item-button" id="JumpToJejuIsland"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
</div>
I have a accordion placed inside a div and I have added a search box to the div which is intended to function as a search filter. Inside the div some accordion elements are visible and some are hidden. I need the filter to work only on visible elements.
In the current code I have used it's searching for all elements inside the div and when the search box is cleared the page is getting hanged and not responsive unless I refresh the page.
Any solution pointing to the right direction would be highly appreciated.
$(document).ready(function() {
$("#searchTC").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#testcases div").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-6">
<div class="panel">
<div class="panel-heading">
<h4 class="panel-title">Test<i class="fa fa-thumbs-o-down"></i> <small style="color:#117DEF">CASES</small></h4>
<div class="panel-actions">
<!--Search TestCases-->
<div id="filterTC" class="form-group">
<div class="input-search">
<i class="input-search-icon ti-search" aria-hidden="true" style="color: #1179EF"></i>
<input type="search" class="form-control" placeholder="Search..." id="searchTC">
</div>
</div>
<!--Select All/Deselect All Toggle-->
<div class="toggle-wrap w-checkbox float-right">
<input class="toggle-ticker w-checkbox-input" data-ix="toggle-switch" data-name="Toggle Switch" id="Toggle-Switch" name="Toggle-Switch" type="checkbox" onclick="toggle(this)" style="transition: transform 0.3s cubic-bezier(0.2, 0.3, 0, 1) 0s, box-shadow 0.3s cubic-bezier(0.2, 0.3, 0, 1) 0s, border-color 0s linear 0.17s, -webkit-transform 0.3s cubic-bezier(0.2, 0.3, 0, 1) 0s;">
<label class="toggle-label w-form-label" for="Toggle-Switch"></label>
<div class="toggle">
<div class="toggle-active">
<div class="active-overlay"></div>
<div class="top-line"></div>
<div class="bottom-line"></div>
</div>
</div>
</div>
</div>
</div>
<div class="panel-body container-fluid">
<div id="testcases" class="accordion js-accordion" style="max-height: 240px;overflow: auto;">
<div class="accordion__item js-accordion-item" id="0001" style="display: block" name="com.onlineshopping.TS_Ebay">
<div class="accordion-header js-accordion-header"><input type="checkbox" class="to-labelauty-icon labelauty" name="inputLableautyNoLabeledCheckbox" data-plugin="labelauty" data-label="false" id="labelauty-0001" value="tc_SearchProducts" aria-hidden="true" style="display: none;"><label for="labelauty-0001"><span class="labelauty-unchecked-image"></span><span class="labelauty-checked-image"></span></label> tc_SearchProducts</div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents">
<div class="dt" id="dt-0001"><button class="btn btn-success waves-effect waves-classic" data-target="#dtFillIn-00010" data-toggle="modal" type="button"><i class="icon md-apps" aria-hidden="true"></i>dt_Ebay</button>
<div class="modal fade modal-fill-in" id="dtFillIn-00010" aria-hidden="false" aria-labelledby="dtFillIn-00010" role="dialog" tabindex="-1">
<div class="modal-dialog modal-simple">
<div class="modal-content">
<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div>
<div class="modal-body table-responsive">
<div class="panel">
<header class="panel-heading">
<div class="panel-actions"> <button class="btn waves-effect waves-classic" id="saveDT" name="saveDT"> Save </button> </div>
<h3 class="panel-title" id="dtName">dt_Ebay</h3>
</header>
<div class="panel-body">
<div class="col-sm-12" id="tableBodydt_Ebay"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="accordion__item js-accordion-item active"></div>
<div class="accordion__item js-accordion-item" id="00011" style="display: block" name="com.onlineshopping.TS_Ebay">
<div class="accordion-header js-accordion-header"><input type="checkbox" class="to-labelauty-icon labelauty" name="inputLableautyNoLabeledCheckbox" data-plugin="labelauty" data-label="false" id="labelauty-00011" value="tc_LoginToApplication" aria-hidden="true" style="display: none;">
<label for="labelauty-00011"><span class="labelauty-unchecked-image"></span><span class="labelauty-checked-image"></span></label> tc_LoginToApplication</div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents">
<div class="dt" id="dt-00011"><button class="btn btn-success waves-effect waves-classic" data-target="#dtFillIn-000110" data-toggle="modal" type="button"><i class="icon md-apps" aria-hidden="true"></i>dt_EbayLogin</button>
<div class="modal fade modal-fill-in" id="dtFillIn-000110" aria-hidden="false" aria-labelledby="dtFillIn-000110" role="dialog" tabindex="-1">
<div class="modal-dialog modal-simple">
<div class="modal-content">
<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div>
<div class="modal-body table-responsive">
<div class="panel">
<header class="panel-heading">
<div class="panel-actions"> <button class="btn waves-effect waves-classic" id="saveDT" name="saveDT"> Save </button> </div>
<h3 class="panel-title" id="dtName">dt_EbayLogin</h3>
</header>
<div class="panel-body">
<div class="col-sm-12" id="tableBodydt_EbayLogin"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="accordion__item js-accordion-item"></div>
<div class="accordion__item js-accordion-item" id="1001" style="display: none" name="com.onlineshopping.TS_Amazon">
<div class="accordion-header js-accordion-header"><input type="checkbox" class="to-labelauty-icon labelauty" name="inputLableautyNoLabeledCheckbox" data-plugin="labelauty" data-label="false" id="labelauty-1001" value="tc_ExploreAmazon" aria-hidden="true" style="display: none;"><label for="labelauty-1001"><span class="labelauty-unchecked-image"></span><span class="labelauty-checked-image"></span></label> tc_ExploreAmazon</div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents">
<div class="dt" id="dt-1001"><button class="btn btn-success waves-effect waves-classic" data-target="#dtFillIn-10010" data-toggle="modal" type="button"><i class="icon md-apps" aria-hidden="true"></i>dt_Amazon</button>
<div class="modal fade modal-fill-in" id="dtFillIn-10010" aria-hidden="false" aria-labelledby="dtFillIn-10010" role="dialog" tabindex="-1">
<div class="modal-dialog modal-simple">
<div class="modal-content">
<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div>
<div class="modal-body table-responsive">
<div class="panel">
<header class="panel-heading">
<div class="panel-actions"> <button class="btn waves-effect waves-classic" id="saveDT" name="saveDT"> Save </button> </div>
<h3 class="panel-title" id="dtName">dt_Amazon</h3>
</header>
<div class="panel-body">
<div class="col-sm-12" id="tableBodydt_Amazon"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="accordion__item js-accordion-item"></div>
</div>
<br>
<button type="button" class="btn btn-info float-right waves-effect waves-classic" onclick="loadplan()">Add to Plan</button>
</div>
</div>
</div>
Use jquery hidden attribute to check if element is hidden
if ($('#testElement').is(':visible')) {
// Code
}
I have a form
<form:form commandName="cnd" class="form">
<div class="form-group form-group-label">
<div class="row">
<div class="col-md-10 col-md-push-1">
<label class="floating-label">Title</label>
<form:input path="title" cssClass="form-control"/>
</div>
</div>
</div>
<div class="form-group form-group-label">
<div class="row">
<div class="col-md-10 col-md-push-1">
<label class="floating-label">Company</label>
<form:input path="company" cssClass="form-control"/>
</div>
</div>
</div>
<div class="form-group form-group-label">
<div class="row">
<div class="col-md-10 col-md-push-1">
<label class="floating-label" >Location</label>
<form:input path="location" cssClass="form-control"/>
</div>
</div>
</div>
<a class="btn btn-block waves-button waves-effect" data-toggle="modal" href="#modal">Toggle Modal</a>
<div class="form-group">
<div class="row">
<div class="col-md-10 col-md-push-1">
<button class="btn btn-block btn-blue waves-button waves-effect waves-light">Sign In</button>
</div>
</div>
</div>
</form:form>
when I click on the link in form which is
<a class="btn btn-block waves-button waves-effect" data-toggle="cat" href="#modal">Show cat</a>
I want to show the following
<div aria-hidden="true" class="modal fade" id="cat" role="dialog" tabindex="-1">
<div class="modal-dialog modal-xs">
<div class="modal-content">
<div class="modal-heading">
<a class="modal-close" data-dismiss="modal">×</a>
<h2 class="modal-title">Seclect Categories</h2>
</div>
<div class="modal-inner">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
<div class="modal-footer">
<p class="text-right"><button class="btn btn-flat btn-alt" data-dismiss="modal" type="button">Close</button><button class="btn btn-flat btn-alt" data-dismiss="modal" type="button">OK</button></p>
</div>
</div>
</div>
</div>
I want to get values selected from select and submit them when I submit the form using Javascript, I'm unable to place the select field in form for some reason.
You will need to use a javascript function. You can either have the cat div loaded from the beginning and hidden using javascript to show/hide it or you can call it via Ajax.
I included the div in your form and set the style to hidden with javascript either revealing it or hiding it on click. You can remove the if and just set to to display block when clicked if you don't want to hide it again. It's worth noting that this will not clear the values. If you want to clear values when closing it then you should call it with AJax and clear the div when closing.
<form:form commandName="cnd" class="form">
<div class="form-group form-group-label">
<div class="row">
<div class="col-md-10 col-md-push-1">
<label class="floating-label">Title</label>
<form:input path="title" cssClass="form-control"/>
</div>
</div>
</div>
<div class="form-group form-group-label">
<div class="row">
<div class="col-md-10 col-md-push-1">
<label class="floating-label">Company</label>
<form:input path="company" cssClass="form-control"/>
</div>
</div>
</div>
<div class="form-group form-group-label">
<div class="row">
<div class="col-md-10 col-md-push-1">
<label class="floating-label" >Location</label>
<form:input path="location" cssClass="form-control"/>
</div>
</div>
</div>
<a class="btn btn-block waves-button waves-effect" data-toggle="modal" href="#modal" onClick="swap(); return false">Toggle</a>
<div aria-hidden="true" class="modal fade" id="cat" role="dialog" tabindex="-1" style="display: none;" >
<div class="modal-dialog modal-xs">
<div class="modal-content">
<div class="modal-heading">
<a class="modal-close" data-dismiss="modal">×</a>
<h2 class="modal-title">Seclect Categories</h2>
</div>
<div class="modal-inner">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
<div class="modal-footer">
<p class="text-right"><button class="btn btn-flat btn-alt" data-dismiss="modal" type="button">Close</button><button class="btn btn-flat btn-alt" data-dismiss="modal" type="button">OK</button></p>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-10 col-md-push-1">
<button class="btn btn-block btn-blue waves-button waves-effect waves-light">Sign In</button>
</div>
</div>
</div>
<script type="text/javascript">
var counter = 1
function swap() {
if (counter%2 == 0) {
document.getElementById('cat').style.display = 'none';
}
if (counter%2 != 0) {
document.getElementById('cat').style.display = 'block';
}
counter += 1;
}
</script>
</form:form>
I want to open a particular record in modal pop up for that i want to use query string to pass id to that modal popup which is on the same page after opening and displaying the data user can edit it and save it.
My code is as follows :
<a class="btn btn-info" data-toggle="modal" data-target="#myModalDetail" href="#myModalDetail"> <i class="fa fa-edit"></i> </a>
<div class="modal fade" id="myModalDetail">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Edit Products Details</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-12">
<form role="form" name="Insertdb" method="post" action="Insert_code/edit-products.php">
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Name</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="prodName" value="<?=$prodPrice ?>">
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Price</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="prodPrice" placeholder="Enter product price">
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Type</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="productType" placeholder="Enter product type">
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input name="button1" type="submit" class="btn btn-primary">
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</div>
As far i can understand your question, you are having problem in passing the id to Modal, if yes, then you can do the following:
In your a-href code use data-id:
<a class="btn btn-info open_modal" data-toggle="modal" data-id="<?php echo productid;?>" data-target="#myModalDetail" href="#myModalDetail"> <i class="fa fa-edit"></i> </a>
Javascript:
$(document).on("click", ".open_modal", function () {
var product_id = $(this).data('id');
});