I have created a table which is draggable and droppable using jQuery and I have also created textbox, which is draggable. When my textbox is dropped on a table cell, I want the cell to adjust its size according to the size of the textbox. Is this possible? Please help?
This is the code I have tried:
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$('input').draggable({
cancel: null
});
$('tr>td').droppable({
drop: function(event, ui) {
$(this).html('droped');
}
});
$('table').draggable({
cancel: null
});
});
</script>
<input type="text" id="draggable"></input>
<table id="droppable" border="1" style="height: 100px;width: 200px">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
This can be done like so:
https://jsfiddle.net/dqg2r6xx/
jQuery
$(document).ready(function() {
$('input').draggable({
cancel: null
});
$('#droppable td').droppable({
accept: "input",
drop: function(event, ui) {
$(this).html('droped');
}
});
$('table').draggable({
cancel: null
});
});
Problem here is that it does not attach to the table. So if you move it around, the input is still in position.
In regards to the sizing, it's adjusting the cell but not the table size. The input is wider than 100px so it stretches the cell to it's max and can do no more.
Related
I created a web site in ASP.NET Core MVC, using bootstrap and jquery-ui. The site works well in a desktop.
However in a smartphone, when I want to pick a date with jquery-ui datepicker, the calendar window appears in the wrong position…, outside of the partial window that contains the date input.
My View is:
#using (Html.BeginForm(FormMethod.Post, new { #class = "form-group" }))
{
<table id="ProdTable" class="table">
<tbody id="ProdTable">
#foreach (var p in Model)
{
<tr id="tableRow" data-key="#p.lineid">
<td><input asp-for="#p.paData" type="date"
class="appDatePickClass" autocomplete="off" /></td>
</tr>
</tbody>
</table>
}
<script type="text/javascript">
// setting the Date Picker that I want.
$(document).ready(function () {
$(".appDatePickClass").attr('type', 'text');
$(".appDatePickClass").datepicker({
dateFormat: "yy-mm-dd"
});
});
</script>
Thank you.
Try this work around to adjust position of datepicker after it opens (please adjust position as per your requirement)
<script type="text/javascript" language="javascript">
$(function(){
$("#appDatePickClass").datepicker({ dateFormat:'yy-mm-dd'});
// bind click event and adjust datepicker position.
$(".hasDatepicker").click(function(e){
$("#ui-datepicker-div").css({'top':e.pageY+20,'left':e.pageX-250});
});
});
</script>
and make sure you have :
at top.
I am using JQuery Data Table in my project.
I have ActionResult and getting data. I want to display data in table but if I use tbody, datatable is not styling look like normal table.
I tried without data and wrote custom tbody and tr tags. My probiem is continue. Where is my wrong ?
ActionResult
public ActionResult YayinEvleri()
{
dbContext = new DatabaseContext();
var yayinEvleri = dbContext.YayinEvi.ToList();
return View(yayinEvleri);
}
View
#model List<KitapFuari.Models.Yayinevi>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js "></script>
<script>
$(document).ready( function () {
$('#yayinEvleri').DataTable();
});
</script>
<table id="yayinEvleri" class="table table-striped table-bordered" style="width:100%" cellspacing="0">
<thead>
<tr>
<th>Yayın Evi</th>
<th>Yazar</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>#item.Ad</td>
</tr>
}
</tbody>
</table>
Add this script.
$(document).ready( function () {
$('#yayinEvleri').DataTable();
});
i am starting to learn to use angular's ui bootstrap library and trying to get a popover working. Am i missing something in my setup?
i've provided a plunker example. my requirement is to have a popover over cells in a table that gets refreshed by $interval every second.
http://plnkr.co/edit/hF3EDIRfKA1VOfSennZq?p=preview
<!DOCTYPE html>
<html ng-app="test">
<head>
<meta charset="UTF-8">
<title>angular-test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.2/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript">
var app = angular.module("test", ['ngAnimate', 'ui.bootstrap']);
app.controller("testCtrl", function($scope, $interval) {
var stats = [{
"name": "john",
"stat1": 3,
"stat2": 5
}];
var count = 0;
$scope.getTestInfo = function() {
$scope.count = count++;
$scope.stats = stats;
}
$interval(function(){$scope.getTestInfo();}, 1000);
});
</script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-4" ng-controller="testCtrl" ng-init="count=0">
<table id="table1" class="table table-hover table-condensed">
<thead>
<tr>
<th>column1</th>
<th>column2</th>
<th>column3</th>
</tr>
</thead>
<tbody class="bg-info">
<tr ng-repeat="stat in stats">
<td uib-popover="testcolumn1">{{stat.name}}</td>
<td uib-popover="{{stat.stat1}}">{{stat.stat1 + count}}</td>
<td uib-popover="testcolumn3">{{stat.stat2}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
You just need to add the metadata (popover-trigger etc.) for the popover modal. I forked your plunkr to demonstrate. http://plnkr.co/edit/d1eAf2NEAA9mCXmNN5LC?p=preview
I'm trying to add a jQuery dialog in each row of a table, using jQuery, and dataTables plugin.
I want to add in the dialog data specific to each row.
I've seen in other post that you can think of two ways:
1) One dialog for each row.
2) Only one dialog for all the rows, and then fill it with specific data.
In this example, I have a list of courses in a table, with name(nombre), code(codigo), and mode(modo).
For each row, there is a button (modificar) that should show a dialog to edit the data for that course. Of course, in each dialog, must be loaded the data of that row.
My idea (viewed other ideas in other post) is to put the dialog inside the row, so I can load the data from that row.
I created a class (masInfo) and in the Javascript code, I put a function that should open the dialog after the button is. But it doesn't work.
Do you have any idea? Thanks.
HTML Y JSP
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link type="text/css"
href="css/milk.css" rel="stylesheet" />
<title>Paginadores tablas</title>
</head>
<body>
<%
CatalogoCursos catalogoCursos = CatalogoCursos.getCatalogoCursos();
ArrayList<Curso> cursos = catalogoCursos.getCursos();
%>
<div id="miTabla">
<form id="formulario" name="formulario" method="post">
<table id="tabla">
<thead>
<tr>
<th>Nombre </th>
<th>Código </th>
<th>Modo de juego </th>
<th> Acción </th>
</tr>
</thead>
<tbody>
<%
for(Curso curso: cursos) {
%>
<tr>
<td><%=curso.getNombre()%></td>
<td><%=curso.getCodigo()%></td>
<td><%=curso.getStringModo()%></td>
<td>
<input type="button" class="masInfo" value="modificar"/>
<div title="Modificar curso">
<table>
<tr>
<td><input type="text" name="mod_nombre" value="<%=curso.getNombre()%>"/></td>
<td><input type="text" name="mod_codigo" value="<%=curso.getCodigo()%>"/></td>
<td><input type="text" name="mod_modo" value="<%=curso.getStringModo()%>"/></td>
</tr>
</table>
</div>
</td>
</td>
</tr>
<%
}
%>
</tbody>
</table>
</form>
</div>
</body>
</html>
JAVASCRIPT
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.custom.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript">
(function($) {
// Dialog
$('.masInfo').next().dialog({
autoOpen: false,
width: 600,
buttons: {
"Borrar": function() {
document.formulario.submit();
$(this).dialog("close");
},
"Cancelar": function() {
$(this).dialog("close");
}
}
});
// Dialog Link
$('.masInfo').click(function(){
$('#dialog').dialog('open');
return false;
});
});
You are much better off using just one dialog and populate the relevant information in the dialog on the button click. The way you currently do it will result in a lot of duplicated input elements.
So, the HTML would look like:
<div id="miTabla">
<table id="tabla">
<thead>
<tr>
<th>Nombre </th>
<th>Código </th>
<th>Modo de juego </th>
<th> Acción </th>
</tr>
</thead>
<tbody>
<%
for(Curso curso: cursos) {
%>
<tr>
<td><%=curso.getNombre()%></td>
<td><%=curso.getCodigo()%></td>
<td><%=curso.getStringModo()%></td>
<td>
<input type="button" class="masInfo" value="modificar"/>
</td>
</td>
</tr>
<%
}
%>
</tbody>
</table>
</div>
<div title="Modificar curso" id="ModificarDialog">
<form id="formulario" name="formulario" method="post">
<table>
<tr>
<td><input type="text" name="mod_nombre" id="mod_nombre" /></td>
<td><input type="text" name="mod_codigo" id="mod_codigo" /></td>
<td><input type="text" name="mod_modo" id="mod_modo" /></td>
</tr>
</table>
</form>
</div>
JavaScript would change to:
(function($) {
// Dialog
$('#ModificarDialog').dialog({
autoOpen: false,
width: 600,
buttons: {
"Borrar": function() {
document.formulario.submit();
$(this).dialog("close");
},
"Cancelar": function() {
$(this).dialog("close");
}
}
});
// Dialog Link
$('.masInfo').click(function(){
var cells = $(this).parent().find('td');
$('#mod_monbre').val(cells.eq(0).text());
$('#mod_codigo').val(cells.eq(1).text());
$('#mod_modo').val(cells.eq(2).text());
$('#dialog').dialog('open');
return false;
});
});
I'm about to try and implement the JQuery slider into an old Classic ASP store, where the slider would control the price range. So have a price between say $40 and $80 and you could use the slider to go between $50 and $60...
Anyone know of any examples of using the slider with ASP in this way? I'm guessing I store the values in hidden values, and then make the page post the values async back on itself?
Thanks
the slider gives you the chance to add a minimum, maximum values as well the a step...
try this code below and implement it in your ASP code
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#slider { margin: 10px; width: 300px; }
body { font-size: 20px; }
</style>
<script type="text/javascript">
$(document).ready(function(){
$("pre a").bind("click", function() { // show current hidden value
alert($("#prdRange").val());
});
$("#slider").slider({
min: 40, // minimum amount
max: 80, // maximum amount
step: ((80 - 40) / 10), // steps ...
slide: function(event, ui) { // fire this when change
$("#lbl").text(ui.value + ",00 €");
$("#prdRange").val(ui.value);
}
});
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="slider"></div>
<span id="lbl">40,00 €</span>
<input type="hidden" id="prdRange" value="40" />
<pre>min: 40 Euros, max: 80 Euros, range chosen</pre>
</body>
</html>
all you have to do is change the values with the asp value when you load the page like
$("#slider").slider({
min: <%= ProductMinValue %>, // minimum amount
max: <%= ProductMaxValue %>, // maximum amount
step: <%= ProductStepValue %>, // steps ...
slide: function(event, ui) { // fire this when change
$("#lbl").text(ui.value + ",00 €");
$("#prdRange").val(ui.value);
}
});
see this code live in JSBin (you can edit it by adding /edit to the URL...)
This answer is for Ajaxing the base code...
Procedure:
The output for the slider changed. It now loads a productList.asp passing the value from the slider.
The productList.asp is a simple ASP page that picks up the Query String "value" and build a table of products using that value.
Right now it only get the QueryString and populates the 4 products with that value.
Code:
slider.html
<!DOCTYPE html>
<html>
<head>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.slider.js"></script>
<style type="text/css">
#slider { margin: 10px; width: 300px; }
#lbl { font-size: 22px; }
</style>
<script type="text/javascript">
$(document).ready(function(){
$("pre a").bind("click", function() { // show current hidden value
alert($("#prdRange").val());
});
$("#slider").slider({
min: 40, // minimum amount
max: 80, // maximum amount
step: ((80 - 40) / 10), // steps ...
slide: function(event, ui) { // fire this when change
var newValue = ui.value;
$("#lbl").text(newValue + ",00 €");
$("#prdRange").val(newValue);
$("#prdList").load("productList.asp #prdTableList", { 'value' : newValue }, function(){
//alert("products in range of " + newValue + ",00 € loaded");
});
}
});
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="slider"></div>
<span id="lbl">40,00 €</span>
<input type="hidden" id="prdRange" value="40" />
<pre>min: 40 Euros, max: 80 Euros, range chosen</pre>
<div id="prdList"></div>
</body>
</html>
productList.asp
<%
Dim newValue
newValue = Request("value") & ",00 €"
%>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="prdTableList">
<table style="width:100%;">
<tr>
<td style="width:50%;">Product</td>
<td>Price</td>
</tr>
<tr>
<td><a href="#">PRD 001<a></td>
<td><%= newValue%></td>
</tr>
<tr style="background-color:#ccc;">
<td><a href="#">PRD 002<a></td>
<td><%= newValue%></td>
</tr>
<tr>
<td><a href="#">PRD 003<a></td>
<td><%= newValue%></td>
</tr>
<tr style="background-color:#ccc;">
<td><a href="#">PRD 004<a></td>
<td><%= newValue%></td>
</tr>
</table>
</div>
</body>
</html>
Note: I'm only loading the #prdTableList output (load("productList.asp #prdTableList"...), and not the entire productList.asp page, so there will be no problem to have HTML tags and is a good way to debug, because all we need to do in that page is call it with the value query string like:
productList.asp?value=47
Output:
alt text http://www.balexandre.com/temp/2009-05-22_1311.png
Sure, just use the jQuery Slider: http://docs.jquery.com/UI/Slider or any of the sliders found with The Google. http://www.keepthewebweird.com/demo/slider/