Please, help with this situation: I have online-shop and I want to make ajax popup window when user is editing field, for example, 'quantity'. The field is part of the shop system and I can't edit him. The field look like this:
<input type="text" id="qid-110103-basket" value="1" size="3" onfocus="this.select()" onkeypress="return checkNumber(this, event, '1');">
And I want to show popup windows only on selected products, not for all.
Thank for help!
Using this way You can achieve that.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( ".dialog" ).click(function(){
$('#editQun').val($(this).html());
$('#dialog').dialog();
});
});
</script>
</head>
<body>
<table width="30%" border="1" cellpadding="1">
<tr>
<th scope="col"> <p>Quantity</p>
</th>
</tr>
<tr>
<th scope="col" class="dialog">2</th>
</tr>
<tr>
<th scope="col" class="dialog">5</th>
</tr>
<tr>
<th scope="col" class="dialog">3</th>
</tr>
</table>
<div id="dialog" title="Edit Product Quantity" style="display:none;">
<input type="text" name="editQun" id="editQun" /><br>
<small>And You can Edit this value regarding product Id Using Ajax </small>
</div>
</body>
</html>
Related
I am developing a Flask application, I have an HTML template in which I have two tables, for which I want to use the datatable plugin. Here is the code of my HTML template with the tables
<doctype html>
<html>
<head>
<title> car_name </title>
<link rel="stylesheet" type="text/css" href="{{url_for('static', filename='aesthetic.css') }}">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
</head>
<body>
<script>
$(document).ready( function () {
$('#table_1').DataTable();
$('#table_2').DataTable();
} );
</script>
<div class="spacebox"></div>
<div class="boxheader">
<a id="Shops">Shops</a>
</div>
<div id="bigbox">
<table id="table_1" border="1" style="background: white">
<thead>
<tr>
<th><b>Phosphosite ID</b></th>
<th><b>Protein</b></th>
<th ><b>Gene</b></th>
<th><b>Residue</b></th>
</tr>
</thead>
<tbody>
{% for x in searchshops %}
<tr>
<td> {{x.NAME}} </td>
<td> {{x.RESOURCES}} </td>
<td> {{x.CARS}} </td>
<td> {{x.BRANDS}}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="spacebox"></div>
<div class="boxheader">
<a id="Cars">Cars</a>
</div>
<div class="bigbox">
<table id="table_2" border="1" style="background: white">
<tr>
<th><b>Name</b></th>
<th ><b>Shop</b></th>
</tr>
{% for x in searchcars %}
<tr>
<td> {{x.CAR}}</td>
<td> {{x.Shop}} </td>
</tr>
{% endfor %}
</table>
</div>
</body>
</html>
(searchshops and searchcars are SQLAlchemy queries to a database, in my Flask python script)
The datatable attributes (search bar, sort columns), show on the first table but not the second one.
I have also tried the following script, (having added class="display" after both tables, based on this example https://datatables.net/examples/basic_init/multiple_tables.html )
<script>
$(document).ready(function() {
$('table.display').DataTable();
} );
</script>
But I have the same problem.
How can I apply the datatable plugin to both tables?
Thank you.
I think it's a bug that it only applies to the first table and not on the succeeding table/s regardless if the first table is initialized or not with DataTable. I've tried it, it's the same.
Maybe you can use this concept. The datatables were rendered serverside.
multitable serverside rendering
I'm having this issue with datables in Asp.net mvc; I've done a number of research and nothing that I have tried work. I'm getting this error when I use firefox TypeError: $(...).DataTable is not a function and this error when I use microsoft edge: Object doesn't support property or method 'DataTable'. Guess they have the same meaning.
Update
After following the suggestions that were given I then encounter on this error: TypeError: i is undefined
table
<table id="data" >
<thead>
<tr>
<th class="col-lg-3 tablehead">Expense Account</th>
<th class="col-lg-3 tablehead">Description</th>
<th class="col-lg-3 tablehead">Item Number</th>
<th class="col-sm-1 tablehead">Quantity</th>
<th class="col-sm-1 tablehead">UOM</th>
<th class="col-sm-1 tablehead">Cost</th>
<th class="col-sm-1 tablehead">Extended Cost</th>
</tr>
</thead>
<tbody>
#for (int i = 0; i < Model.Count; i++)
{
<tr>
<td>#Html.CheckBoxFor(m => m[i].postTrnx, new { #class = "checkGroup1" })</td>
<td class="label">#Html.DisplayFor(m => m[i].requisitionNumber) </td>
<td class="label">#Html.DisplayFor(m => m[i].transactionDate)</td>
</tr>
foreach (var item in Model[i].items)
{
<tr>
<td class="col-lg-3 tabledata">#item.expense_account.account_desc</td>
<td class="col-lg-3 tabledata">#item.description</td>
#*<td class="label">#Html.DisplayFor(m => m[i].requisitionNumber) </td>*#
<td class="col-lg-3 tabledata">#item.itemNumber</td>
<td class="col-sm-1 tabledata">#item.quantity</td>
<td class="col-sm-1 tabledata">#item.selecteduomtext </td>
<td class="col-sm-1 tabledata">#item.price</td>
<td class="col-sm-1 tabledata">#item.extended_cost</td>
#*<td class="label">#Html.DisplayFor(m => m[i].transactionDate)</td>*#
<td>#Html.ActionLink("Edit", "Edit", new { id = #item.lineNum, name = Model[i].docNumber })</td>
</tr>
}
#*<tr> <td></td></tr>
<tr> <td></td></tr>
<tr> <td></td></tr>
<tr> <td></td></tr>*#
}
</tbody>
</table>
.layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - TWCL Issue Management System</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jqueryui")
<script src="~/Scripts/jquery-1.10.2.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link href="~/Content/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/jquery-ui-1.10.4.custom.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
view
#section Scripts {
<script>
$(document).ready(function () {
$('#data').DataTable();
});
</script>
}
You're using some seriously outdated stuff. I put up a jsfiddle here that is working (well, gets you past your issue). I would suspect that your script refs are not in the correct order or something.
<body>
<table id="data">
data table
</table>
</body>
$(document).ready(function() {
$('#data').DataTable();
} );
https://jsfiddle.net/2s2Lq9mh/
Based on researches I found out that there should matching td to th; that is what I used to solve the issue and now datatables is working fine.
When I try to remake this example of Group Columns: http://issues.wenzhixin.net.cn/bootstrap-table/index.html#options/group-columns.html
from the Bootstrap table documentation, I get a wrong result. The header gets duplicated and shown twice.
My code is here:
TYPE html>
<html>
<head>
<title>Group Columns</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.min.css">
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.js"></script>
</head>
<body>
<div class="container">
<h1>Group Columns</h1>
<p>Use <code>rowspan, colspan</code> options to set the group columns header.</p>
<table id="table" data-toggle="table">
<thead>
<tr>
<th colspan="2">Item Detail</th>
<th data-field="id" rowspan="2" data-valign="middle">Item ID</th>
</tr>
<tr>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
<tbody>
<tr>
<td style="border: 1px solid black">1</td>
<td style="border: 1px solid black">2</td>
<td style="border: 1px solid black">3</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
and it is shown in the following JSFiddle http://jsfiddle.net/mwe2ufzg/.
Try updating to bootstrap-table version 1.9.0
I got the same issue here. I found that it will generate two headers in the HTML. One is used for fixed header and another in the tbody.
I resolve it by hide the header in body.
var th = $(".fixed-table-body > thread");
th.hide();
I am using a jQuery table to show my data. There I have 2 buttons previous and next for pagination. But I want to add a scroll bar in the bottom of the table. I wrote
overflow:scroll
in CSS, but it didn't work.
Here is my code:
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Query Result Page</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/jquery.contextMenu.css" rel="stylesheet" type="text/css" />
<link href="css/jdpicker.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
<script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
</head>
<body>
//this is the jQuery function for table //
<script type="text/javascript">
$(document).ready(function() {
$('#tableData').dataTable();
} );
</script>
// these are the CSS classes that will create the table look and feel
<table class="tableData context-menu-one" id="tableData" style="overflow-x: scroll ">
<thead> // this is column for tables which will contain the values from the database //
<tr style="font-size: 14px;" >
<th width="20%" align="left">Name</th>
<th width="20%" align="left">Class</th>
<th width="20%" align="left">Roll</th>
<th width="20%" align="left">Address</th>
<th width="20%" align="left">Marks</th>
</tr>
</thead>
// this is table values here we will list some values dynamically which will come from database
<tr style="font-size: 14px;" >
<th width="20%" align="left">john</th>
<th width="20%" align="left">9</th>
<th width="20%" align="left">47</th>
<th width="20%" align="left">mumbai</th>
<th width="20%" align="left">52</th>
</tr>
<tbody>
<tbody>
</tbody>
</table>
</body>
</html>
Someone please help me
The overflow property must be applied on the table container and not the table itself.
If the scrollbar is not appearing, it's because the table width is less than the container width.
I have been trying to use set up this table here. http://www.ajaxblender.com/demos/tables/sortabletable/
I checked with my browser and the page is properly pulling the css and the .js files yet it gives me this error in reference to my sortabletable.js file
(screen shot of the error)
http://i.imgur.com/iJa2Rz8.png
Here is a copy of the relevant part of the source code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<title>Home page</title>
<link rel="stylesheet" href="./_common/css/main.css" type="text/css" media="all">
<link href="sortableTable.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./_common/js/mootools.js"></script>
<script type="text/javascript" src="sortableTable.js"></script>
</head>
<body>
<div id="container">
<div id="example">
<div class="tableFilter">
<form id="tableFilter" onsubmit="myTable.filter(this.id); return false;">Filter:
<select id="column">
<option value="1">Firstname</option>
<option value="2">Lastname</option>
<option value="3">Department</option>
<option value="4">Start Date</option>
</select>
<input type="text" id="keyword" />
<input type="submit" value="Submit" />
<input type="reset" value="Clear" />
</form>
</div>
<table id="myTable" cellpadding="0" cellpadding="0">
<thead>
<th axis="number">ID</th>
<th axis="string">Firstname</th>
<th axis="string">Lastname</th>
<th axis="string">Department</th>
<th axis="date">Start Date</th>
</thead>
<tbody>
<tr id="1">
<td class="rightAlign">1</td>
<td>Sam</td>
<td>Birch</td>
<td>Programming</td>
<td class="rightAlign">01/06/00</td>
</tr>
<tr id="2">
<td class="rightAlign">2</td>
<td>George</td>
<td>Lo</td>
<td>Support</td>
<td class="rightAlign">01/07/99</td>
</tr>
<tr id="3">
<td class="rightAlign">3</td>
<td>kevin</td>
<td>Walker</td>
<td>Programming</td>
<td class="rightAlign">01/06/05</td>
</tr>
<tr id="4">
<td class="rightAlign">4</td>
<td>Peter</td>
<td>Aland</td>
<td>Project Management</td>
<td class="rightAlign">23/10/06</td>
</tr>
<tr id="5">
<td class="rightAlign">5</td>
<td>Rachel</td>
<td>Dickinson</td>
<td>Design</td>
<td class="rightAlign">20/01/05</td>
</tr>
<tr id="6">
<td class="rightAlign">6</td>
<td>John</td>
<td>Tsang</td>
<td>Support</td>
<td class="rightAlign">05/10/05</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
<script type="text/javascript">
var myTable = {};
window.addEvent('domready', function(){
myTable = new sortableTable('myTable', {overCls: 'over', onClick: function(){alert(this.id)}});
});
</script>
</div>
</div>
</div>
</body>
</html>
any thoughts on what it could be?
Use $.find('tbody') to get all descendant tbodys and $.children('tbody') to get all children tbodys. Try this:
this.thead = this.table.children('thead');
this.tbody = this.table.children('tbody');
this.tfoot = this.table.children('tfoot');
this.elements = this.table.find('tr');
Altough I don't see jQuery being loaded in your HTML sample, your question's title suggests that your are using jQuery in your site. If that's the case, your problem would be that there's a conflict between Mootools and jQuery because both libraries defines the $ function. To fix the issue, you will have to use jQuery.noConflict().