I am using bootstrap modal.
In view,
<div id="basic" class="well modal fade" style="max-width:44em;">
<div class="model-header">Send Push</div>
<div class="model-body">
<div class="top">
<p>You are sending text push notifications to all devices.</p>
</div>
<div class="left" style="width: 100%;height: 100px;float: left;">
<table style="margin-top: 10px;width: 100%">
<tr>
<th>Device Type</th>
<th>Device Count</th>
<th>Remaining</th>
</tr>
<tr id="row1">
<td>IOS</td>
<td></td>
<td>0</td>
</tr>
<tr id="row2">
<td>Android</td>
<td></td>
<td>0</td>
</tr>
</table>
</div>
<div class="right" style="width: 100%;height: 250px;float: left;">
<div style="width: 100%;height: 55px;margin-top: 25%" id="spinner">
</div>
<div id="spinner1" style="width: 100%;text-align: center">Please be patient.This may take awhile</div>
</div>
</div>
</div>
Script for showing modal,
$('#notificationform').ajaxForm({
beforeSubmit: validate,
beforeSend: function () {
$('#spinner1').html('Initializing');
$('.modal-header').html('Initializing');
$('.top,.left').hide();
$('#basic').popup('show');
showLoader();
},
complete: function (xhr) {
var response = xhr.responseText;
var status = xhr.status;
if (status == '200') {
var res = response.split("<!DOCTYPE html>");
var obj = $.parseJSON(res[0]);
Out side this ajaxform function the modal is showing, But i want to show modal in beforesend function.
But this code is not working.I want to show pop up, but it is not displaying anything. Please help me. How to solve this.
Use Proper Library and latest library for modal...
See the snippest..
$("#myBtn").click(function(){
$("#basic").modal('show');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-info btn-lg" id="myBtn">Open Modal</button>
<div id="basic" class="well modal fade" style="max-width:44em;">
<div class="model-header">Send Push</div>
<div class="model-body">
<div class="top">
<p>You are sending text push notifications to all devices. </p>
</div>
<div class="left" style="width: 100%;height: 100px;float: left;">
<table style="margin-top: 10px;width: 100%">
<tr>
<th>Device Type</th>
<th>Device Count</th>
<th>Remaining</th>
</tr>
<tr id="row1">
<td>IOS</td>
<td></td>
<td>0</td>
</tr>
<tr id="row2">
<td>Android</td>
<td></td>
<td>0</td>
</tr>
</table>
</div>
<div class="right" style="width: 100%;height: 250px;float: left;">
<div style="width: 100%;height: 55px;margin-top: 25%" id="spinner">
</div>
<div id="spinner1" style="width: 100%;text-align: center">Please be patient.This may take awhile</div>
</div>
</div>
</div>
Related
I want to press enter on the 'Buscar' input and focus on the first input ( 'Qtd on the table').
I tried
$(this).nextAll('input').first().focus();
$(this).next('input:text').focus();
And a lot of solutions and other codes I found here and online but nothing worked. I didn't get any errors on the console which makes it harder to find out what I'm missing.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body style="padding-top: 70px;">
<div class="container-fluid">
<div class="row">
<div class="col-6">
<center>
<div class="form-group has-feedback">
<input type="text" class="form-control" name="busca" id="busca" onclick="this.select()" placeholder="Buscar">
</div>
</center>
<table class="table table-striped">
<thead class="thead-dark">
<th class="w-50">Material</th>
<th>Unidade</th>
<th>Quantidade</th>
<th class="w-25">Preço</th>
<th>Qtd</th>
</thead>
<tbody class="resultado" id="lista">
<tr id="row1">
<td style="display:none;">1</td>
<td>Adesivo Instantâneo Almasuper 100g</td>
<td>Galão</td>
<td>64</td>
<td>R$ 20,00</td>
<td>
<div class="qtd" style="width: 60px;">
<input id="1" type="text" class="form-control" name="quantidade">
</div>
</td>
</tr>
<tr id="row4">
<td style="display:none;">4</td>
<td>Batente Silicone Adesivo 12mm com 25</td>
<td>Cartela</td>
<td></td>
<td>R$ 6,50</td>
<td>
<div class="qtd" style="width: 60px;">
<input id="4" type="text" class="form-control" name="quantidade">
</div>
</td>
</tbody>
</table>
</div>
</div>
First, you shouldn't be setting numerical ids. Second, buscar has no siblings so you can't say nextAll because they aren't any siblings.
What you can do is watch the input for an enter key up and focus on the first input with the name quantidade. See the first function below.
$('#busca').on('keyup', function(e){
if(e.which === 13){
$('input[name="quantidade"]').first().focus();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body style="padding-top: 70px;">
<div class="container-fluid">
<div class="row">
<div class="col-6">
<center>
<div class="form-group has-feedback">
<input type="text" class="form-control" name="busca" id="busca" placeholder="Buscar">
</div>
</center>
<table class="table table-striped">
<thead class="thead-dark">
<th class="w-50">Material</th>
<th>Unidade</th>
<th>Quantidade</th>
<th class="w-25">Preço</th>
<th>Qtd</th>
</thead>
<tbody class="resultado" id="lista">
<tr id="row1">
<td style="display:none;">1</td>
<td>Adesivo Instantâneo Almasuper 100g</td>
<td>Galão</td>
<td>64</td>
<td>R$ 20,00</td>
<td>
<div class="qtd" style="width: 60px;">
<input id="1" type="text" class="form-control" name="quantidade">
</div>
</td>
</tr>
<tr id="row4">
<td style="display:none;">4</td>
<td>Batente Silicone Adesivo 12mm com 25</td>
<td>Cartela</td>
<td></td>
<td>R$ 6,50</td>
<td>
<div class="qtd" style="width: 60px;">
<input id="4" type="text" class="form-control" name="quantidade">
</div>
</td>
</tbody>
</table>
</div>
</div>
// get all the inputs that are not disabled and not hidden
var $allInputs = $(':input:not(:disabled):not(:hidden)');
$('#busca').on('keyup', function(e){
// if enter was pressed
if ((e.keyCode || e.which) === 13) {
// cancel any form submit that might happen
e.preventDefault();
// focus on the input that is the next index after the index that busca has
$allInputs.eq( $allInputs.index(this) + 1 ).focus();
}
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-6">
<center>
<div class="form-group has-feedback">
<input type="text" class="form-control" name="busca" id="busca" onclick="this.select()" placeholder="Buscar">
</div>
</center>
<table class="table table-striped">
<thead class="thead-dark">
<th class="w-50">Material</th>
<th>Unidade</th>
<th>Quantidade</th>
<th class="w-25">Preço</th>
<th>Qtd</th>
</thead>
<tbody class="resultado" id="lista">
<tr id="row1">
<td style="display:none;">1</td>
<td>Adesivo Instantâneo Almasuper 100g</td>
<td>Galão</td>
<td>64</td>
<td>R$ 20,00</td>
<td>
<div class="qtd" style="width: 60px;">
<input id="1" type="text" class="form-control" name="quantidade">
</div>
</td>
</tr>
<tr id="row4">
<td style="display:none;">4</td>
<td>Batente Silicone Adesivo 12mm com 25</td>
<td>Cartela</td>
<td></td>
<td>R$ 6,50</td>
<td>
<div class="qtd" style="width: 60px;">
<input id="4" type="text" class="form-control" name="quantidade">
</div>
</td>
</tbody>
</table>
</div>
</div>
I have a table inside a div that shows some important information about the elements inside the div and I want this table to follow the scroll as long as the div.
<div id="DivMeritos" class="panel">
<div class="panel-body">
<div class=" col-md-12 col-lg-19 ">
<div class="table-responsive">
<table>
<tr style="white-space:nowrap;">
<th class="fill"><h2>Meritos</h2></th>
<th scope="row" style="white-space:nowrap;">
<h2>Auto Puntuación</h2>
<input type="text" value="<?= $solicitude->autoPuntuacion ?>" size="2" disabled>
</th>
<th></th>
<th scope="row" style="white-space:nowrap;">
<h2>Puntuación Evaluación</h2>
<input type="text" id="puntuacion" value="<?= $solicitude->puntuacionEvaluacion ?>" size="2" disabled>
</th>
</tr>
</table>
</div>
<div class="list-group"> <!-- <a class="list-group-item active"> -->
{code .....}
</div>
</div>
</div>
</div>
I have tried everything that I found about making an element follow the scroll with Javascript/jQuery with no result.
I´m working with Bootstrap v3.3 and Cakephp v3.5.
Thanks a lot in advance.
Use position: fixed;
See code below:
.panel-body{
height: 150px;
overflow-y: scroll;
padding:0!important;
}
.table-responsive{
position: fixed;
width:90%!important;
}
.list-group{
height: 300px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="DivMeritos" class="panel">
<div class="panel-body">
<div class=" col-md-12">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
</tbody>
</table>
</div>
<div class="list-group"> <!-- <a class="list-group-item active"> -->
</div>
</div>
</div>
</div>
I am new to Bootstrap and Html. I am currently trying to separate my Add Person button away from the panel body but I do not know how to achieve that. Below is the screenshot of my problem and my current codes:
<div class="panel panel-primary">
<div class="panel-heading clearfix">
<div class="panel-heading">
Manage Person
</div>
</div>
</div>
<div class="btn-group pull-right">
<a asp-action="Create" asp-controller="Persons" class="btn btn-primary btn-group-sm">
Add Person
</a>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
<th>Height</th>
</tr>
</thead>
<tbody>
<tr>
<td>Rachel</td>
<td>25</td>
<td>Female</td>
<td>175cm</td>
</tr>
<tr>
<td>Thomas</td>
<td>15</td>
<td>Male</td>
<td>165cm</td>
</tr>
<tr>
<td>Jared</td>
<td>40</td>
<td>Male</td>
<td>195cm</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Use clearfix div as sugggested below. And add margin-top: 10px; on the panel-body
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class="panel panel-primary">
<div class="panel-heading ">
<div class="panel-heading">
Manage Person
</div>
</div>
</div>
<div class="btn-group pull-right" style="float: right;">
<a asp-action="Create" asp-controller="Persons" class="btn btn-primary btn-group-sm">
Add Person
</a>
</div>
<div class="clearfix"></div>
<div class="panel-body" style="margin-top: 10px;">
<div class="row">
<div class="col-md-12">
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
<th>Height</th>
</tr>
</thead>
<tbody>
<tr>
<td>Rachel</td>
<td>25</td>
<td>Female</td>
<td>175cm</td>
</tr>
<tr>
<td>Thomas</td>
<td>15</td>
<td>Male</td>
<td>165cm</td>
</tr>
<tr>
<td>Jared</td>
<td>40</td>
<td>Male</td>
<td>195cm</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="btn-group pull-right">
<a asp-action="Create" style="margin-bottom:5px" asp-controller="Persons" class="btn btn-primary btn-group-sm">
Add Person
</a>
</div>
you can use margin-bottom.
This would be my way to fix this:
Give your button an id and add bottom margin within your css:
#yourButtonId{ margin-bottom: 10px; }
OR
Put your Button in a new bootstrap row: <div class="row"> ---Your button code--- </div>
I have an issue with the behavior of toggle on click when I include pagination management in List.js. The effect works properly first, but when I navigate to page 2 then back to page one, toggle effect is not responding. I have to click 2 times on the pagination link to restore the effect.
How can I correct this behavior? And more generally, what is the right strategy to debug this kind on problem?
Here is a codepen with the example, and bellow the js and html codes.
Thank you for your help!
var options = {
valueNames: [
'date',
'conversions',
'revenue',
'cr'
],
page: 3,
pagination: true
};
var userList = new List('users', options);
function hide_and_toggle(userList){
$('.row-toggle').hide();
$(".list li").on('click', function(row){
$(this).find('.row-toggle').toggle();
});
}
$(function(){
hide_and_toggle(userList);
userList.on('updated', function(userList){
hide_and_toggle(userList);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<div id="users">
<input class="search" placeholder="Search" />
<div class="row">
<button class="sort col" data-sort="date">
Sort by Date
</button>
<button class="sort col" data-sort="conversions">
Sort by Conversion Count
</button>
<button class="sort col" data-sort="revenue">
Sort by Revenues
</button>
<button class="sort col" data-sort="cr">
Sort by CR
</button>
</div>
<ul class="list">
<li data-id="1">
<div class="row">
<div class="col text-center date">1</div>
<div class="col text-center conversions">10</div>
<div class="col text-center revenue">100</div>
<div class="col text-center cr">1000</div>
</div>
<div class="row row-toggle">
<div class="col">
<span> Goals</span>
<table class="table-sm">
<tr>
<td>Install</td>
<td>20</td>
</tr>
<tr>
<td>First listen</td>
<td>3</td>
</tr>
<tr>
<td>Purchase</td>
<td>4</td>
</tr>
</table>
</div>
<div class="col">
<span>Scrubed & Overdelivery</span>
<table class="table-sm">
<tr>
<td>Scrubed</td>
<td>30</td>
<td>200</td>
</tr>
<tr>
<td>Over Delivery</td>
<td>40</td>
<td>400</td>
</tr>
</table>
</div>
</div>
</li>
<li data-id="2">
<div class="row">
<div class="col text-center date">2</div>
<div class="col text-center conversions">20</div>
<div class="col text-center revenue">200</div>
<div class="col text-center cr">2000</div>
</div>
<div class="row row-toggle">
<div class="col">
<table>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
</table>
</div>
<div class="col">
Content On the side 2
</div>
</div>
</li>
<li data-id="3">
<div class="row">
<div class="col text-center date">3</div>
<div class="col text-center conversions">30</div>
<div class="col text-center revenue">300</div>
<div class="col text-center cr">3000</div>
</div>
<div class="row row-toggle">
<div class="col">
<table>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
</table>
</div>
<div class="col">
Content On the side 3
</div>
</div>
</li>
<li data-id="10">
<div class="row">
<div class="col text-center date">10</div>
<div class="col text-center conversions">100</div>
<div class="col text-center revenue">1000</div>
<div class="col text-center cr">10000</div>
</div>
<div class="row row-toggle">
<div class="col">
<table>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
</table>
</div>
<div class="col">
Content On the side 10
</div>
</div>
</li>
</ul>
<ul class="pagination"></ul>
</div>
The root cause:
If userList.on('updated', function(userList){} is triggered, it will bind the $(".list li").on('click', function(row){} again and again.
You can try to double click page 1, then you will find the toggle is not working (actually it is toggled twice, so it seems no toggle).
When you click again, you will find the toggle is working again. (actually it is toggled three times).
The solution is very easy, just unbind before bind $(".list li").on('click').
var options = {
valueNames: [
'date',
'conversions',
'revenue',
'cr'
],
page: 3,
pagination: true
};
var userList = new List('users', options);
function hide_and_toggle(userList){
$('.row-toggle').hide();
$( ".list li").unbind( "click" ); //clear up event binding.
$(".list li").on('click', function(row){
$(this).find('.row-toggle').toggle();
});
}
$(function(){
hide_and_toggle(userList);
userList.on('updated', function(userList){
hide_and_toggle(userList);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<div id="users">
<input class="search" placeholder="Search" />
<div class="row">
<button class="sort col" data-sort="date">
Sort by Date
</button>
<button class="sort col" data-sort="conversions">
Sort by Conversion Count
</button>
<button class="sort col" data-sort="revenue">
Sort by Revenues
</button>
<button class="sort col" data-sort="cr">
Sort by CR
</button>
</div>
<ul class="list">
<li data-id="1">
<div class="row">
<div class="col text-center date">1</div>
<div class="col text-center conversions">10</div>
<div class="col text-center revenue">100</div>
<div class="col text-center cr">1000</div>
</div>
<div class="row row-toggle">
<div class="col">
<span> Goals</span>
<table class="table-sm">
<tr>
<td>Install</td>
<td>20</td>
</tr>
<tr>
<td>First listen</td>
<td>3</td>
</tr>
<tr>
<td>Purchase</td>
<td>4</td>
</tr>
</table>
</div>
<div class="col">
<span>Scrubed & Overdelivery</span>
<table class="table-sm">
<tr>
<td>Scrubed</td>
<td>30</td>
<td>200</td>
</tr>
<tr>
<td>Over Delivery</td>
<td>40</td>
<td>400</td>
</tr>
</table>
</div>
</div>
</li>
<li data-id="2">
<div class="row">
<div class="col text-center date">2</div>
<div class="col text-center conversions">20</div>
<div class="col text-center revenue">200</div>
<div class="col text-center cr">2000</div>
</div>
<div class="row row-toggle">
<div class="col">
<table>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
</table>
</div>
<div class="col">
Content On the side 2
</div>
</div>
</li>
<li data-id="3">
<div class="row">
<div class="col text-center date">3</div>
<div class="col text-center conversions">30</div>
<div class="col text-center revenue">300</div>
<div class="col text-center cr">3000</div>
</div>
<div class="row row-toggle">
<div class="col">
<table>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
</table>
</div>
<div class="col">
Content On the side 3
</div>
</div>
</li>
<li data-id="10">
<div class="row">
<div class="col text-center date">10</div>
<div class="col text-center conversions">100</div>
<div class="col text-center revenue">1000</div>
<div class="col text-center cr">10000</div>
</div>
<div class="row row-toggle">
<div class="col">
<table>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
</table>
</div>
<div class="col">
Content On the side 10
</div>
</div>
</li>
</ul>
<ul class="pagination"></ul>
</div>
So, I have a small table with some content, which with the click of a button can be expanded to show a container div with extra content.
I'm trying to tie a function to this action, but when I do, the function seems to get fired once per number of table row.
JSFiddle:
https://jsfiddle.net/jtby9c12/
Table:
<button id="toggle-descriptions-button">+</button>
<table>
<tbody>
<tr>
<th class="table-header-1">Download</th>
<th class="table-header-2">Size</th>
<th class="table-header-3">Notes</th>
</tr>
<tr>
<td class="column-1">Item
<div class="div-container" style="display: block;">
<div class="div-gallery">
<img src="#">
<br style="clear: both">
</div>
<div class="div-description">Description Text</div>
</div>
</td>
<td class="column-2">1.2MB</td>
<td class="column-3">Note</td>
</tr>
</tbody>
</table>
*The actual table contains 22 rows and descriptions, this just shows the structure sample.
Jquery:
var descriptions = $(".div-container")
var descButton = $("#toggle-descriptions-button")
descButton.click(function(){
console.log("Button Clicked!")
descriptions.toggle(400, function() {
console.log("I'm a fucntion!")
});
});
As you can see, it calls the function 22 times, and I'm trying to get it to call just once.
I'm looking to get a single call back for the function, it's one state change for all descriptions, I only need one return.
To achieve this you can use the promise() returned from the toggle() calls. Attach a done() event handler to it, which will fire after all the promises have been resolved:
var $descriptions = $(".div-container")
var $descButton = $("#toggle-descriptions-button")
$descButton.click(function() {
console.log("Button Clicked!")
$descriptions.toggle(400).promise().done(function() {
console.log("I'm a function!")
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle-descriptions-button">+</button>
<table>
<tbody>
<tr>
<th class="table-header-1">Download</th>
<th class="table-header-2">Size</th>
<th class="table-header-3">Notes</th>
</tr>
<tr>
<td class="column-1">Item
<div class="div-container" style="display: none;">
<div class="div-gallery">
<img src="#">
<br style="clear: both">
</div>
<div class="div-description">Description Text</div>
</div>
</td>
<td class="column-2">1.2MB</td>
<td class="column-3">Note</td>
</tr>
<tr>
<td class="column-1">Item
<div class="div-container" style="display: none;">
<div class="div-gallery">
<img src="#">
<br style="clear: both">
</div>
<div class="div-description">Description Text</div>
</div>
</td>
<td class="column-2">1.2MB</td>
<td class="column-3">Note</td>
</tr>
<tr>
<td class="column-1">Item
<div class="div-container" style="display: none;">
<div class="div-gallery">
<img src="#">
<br style="clear: both">
</div>
<div class="div-description">Description Text</div>
</div>
</td>
<td class="column-2">1.2MB</td>
<td class="column-3">Note</td>
</tr>
</tbody>
</table>