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.
Related
How can I close all other jQueryUI tooltips when a user opens a new tooltip. I want to avoid littering the UI with open tooltips.
I did not want to clutter up what I thought was a straightforward question but my tooltips are customized to only show when a user has clicked on a help icon or field name as in the example below. In addition as in the example, the help triggers are not in the [label] tag associated to that input and so the tooltip can't count on the field focus. I suspect that is the issue.
function loadCSS(filename) {
var file = document.createElement("link");
file.setAttribute("rel", "stylesheet");
file.setAttribute("type", "text/css");
file.setAttribute("href", filename);
document.head.appendChild(file);
}
loadCSS("https://code.jquery.com/ui/1.12.1/themes/start/jquery-ui.css");
// Disable HOVER tooltips for input elements since they are just annoying.
$("input[title]").tooltip({
disabled: true,
content: function() {
// Allows the tooltip text to be treated as raw HTML.
return $(this).prop('title');
},
close: function(event, ui) {
// Disable the Tooltip once closed to ensure it can only open via click.
$(this).tooltip('disable');
}
});
/* Manually Open the Tooltips */
$(".ui-field-help").click(function(e) {
var forId = e.target.getAttribute('for');
if (forId) {
var $forEl = $("#" + forId);
if ($forEl.length)
$forEl.tooltip('enable').tooltip('open');
}
});
.ui-field-help {
text-decoration: underline;
}
input {
width: 100%
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<table width=100%>
<tr>
<td for="A000" class="ui-field-help">First</td>
<td><input type="Text" id="A000" title="title #A000"></td>
</tr>
<tr>
<td for="B000" class="ui-field-help">Second</td>
<td><input type="Text" id="B000" title="title #B000"></td>
</tr>
<tr>
<td for="C000" class="ui-field-help">Third</td>
<td><input type="Text" id="C000" title="title #C000"></td>
</tr>
<tr>
<td for="D000" class="ui-field-help">Fourth</td>
<td><input type="Text" id="D000" title="title #D000"></td>
</tr>
<tr>
<td for="E000" class="ui-field-help">Fifth</td>
<td><input type="Text" id="E000" title="title #E000"></td>
</tr>
</table>
What I was asking for was unnecessary. If used correctly jQueryUI tooltips will automatically close themselves based on the focus/hover events.
If the tooltip is opened without triggering these events then there won't be any way for it to automatically close itself.
I had intentionally opened the tooltips via a click on a separate help icon. That click did not trigger the focus. By fixing my code to move the icon into the LABEL (for=) tied to the INPUT, it resulted in the INPUT receiving the focus which then gave the jQueryUI tooltip widget what it needed to manage the visibility.
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.
I have a table full of data, upon clicking on any of the record. A jquery ajax function called and get the detailed information for that record and display it in the div associated with the record.
Now i want to show it in a accordion.
Most of time a jquery accordion works like this
$(document).ready(function() {
$('#accordion').accordion();
});
But here i want that my div gets populated first with data then accordion method gets called. Because if accordion() called first then there is nothing for accordion to display as the request for data is still in processing.
My jquery ajax method is like this
$(function () {
$("span.Consignment").click(function () {
var position = 'div#' + this.innerHTML;
var url = "/Tracking/TrackingConsignment?consno=" + this.innerHTML;
$(position).load(url, function() {
$("a.Consignment").accordion();
return false;
});
});
});
This is my code
#foreach (var lst in item.Item2)
{
<a href="#" class="Consignment">
<table class="gridtable">
<a href="#">
<tr>
<td>
<span class="Consignment" href="#">#lst.ConsignmentNo</span>
</td>
<td>#lst.ConsignmentDate
</td>
</tr>
</a>
</table>
</a>
<div id="#lst.ConsignmentNo">
</div>
}
How should i make it work. First data then accordion.
Setup your accordion in the success of the .load.
.load(url,function(){
$("#accordion").accordion();
})
I'm creating table like this:
<table>
<tr>
<th>Column</th>
</tr>
#foreach (var item in someList)
{
foreach (var item1 in item)
{
<tr>
<td onclick="myMethod();">#item1.name</td>
</tr>
}
}
</table>
And here is the method which is called when the row is selected:
<script type="text/javascript" language="javascript">
function myMethod() {
var clickedCell = $(this);
alert(clickedCell.text());
}
</script>
But it's not working! How can I get the text from the row/cell which is selected/clicked on?
I also tried:
<script type="text/javascript" language="javascript">
function myMethod() {
alert($(this).html());
}
</script>
and it's giving me null althought the table is full.
I'm inferring from this line that you're using jQuery:
var clickedCell = $(this);
If that's the case, let's take a step back for a moment and separate your JavaScript from your HTML. Instead of this:
<td onclick="myMethod();">#item1.name</td>
which has in-line JavaScript (which is generally frowned upon), try something like this:
<td class="clickableCell">#item1.name</td>
Now it's just markup, which is a bit cleaner. Next you need to attach click events to your rendered cells:
$(document).ready(function() {
$('td.clickableCell').click(function() {
alert($(this).text());
});
});
Now this refers to the element to which jQuery is binding the click event, so it can be easily referenced in the code, as opposed to having to pass a self-reference from the click event being bound within the HTML (which is another approach, but continues down the road of mixing markup with code).
I have a couple of jQuery datepickers inside a jQuery dialog. Whenever users select a date from the datepicker the screen scrolls to the top. This only happens in IE8 not the Firefox 3.6 or Chrome 5. Since the majority of users will user IE this is going to be very annoying. Can anyone give me a clue as to why this is happening?
Here is a snippet of the HTML for the dialog:
<div id="AppointmentDialog" style="display: none; font-size: 12px;">
<table>
<tr class="lesson notAvailable allDay">
<td>
Start
</td>
<td>
<input id="txtStartDate" type="text" readonly="readonly" style="width: 90px" class="lesson notAvailable allDay" />
<input id="txtStartTime" type="text" style="width: 50px" class="lesson notAvailable" />
<input id="hidStartTime" type="hidden" value="" />
</td>
</tr>
<tr class="notAvailable allDay">
<td>
End
</td>
<td>
<input id="txtEndDate" type="text" readonly="readonly" style="width: 90px" class="notAvailable allDay" />
<input id="txtEndTime" type="text" style="width: 50px" class="notAvailable" />
<input id="hidEndTime" type="hidden" value="" />
</td>
</tr>
</table>
</div>
Snippet of Javascript to initialise the dialog and datepickers:
$(document).ready(function() {
initDialogs();
});
function initDialogs() {
// Configure the New Appointment dialog
$("#AppointmentDialog").dialog({
autoOpen: false,
resizable: false,
width: 320,
modal: true,
title: 'Appointment',
buttons: {
"Close": function() { $(this).dialog("close"); },
"Save": function() {
// Function call
}
}
});
$.mask.definitions['h'] = '[012]';
$.mask.definitions['m'] = '[012345]';
$("#txtStartTime").mask("h9:m9");
$("#txtEndTime").mask("h9:m9");
// Init date pickers
$("#txtStartDate").datepicker({ dateFormat: 'dd-mm-yy' });
$("#txtEndDate").datepicker({ dateFormat: 'dd-mm-yy' });
};
EDIT
I'm using jQuery 1.4.2 and UI 1.8.2
I've looked into it again. The bug has been reported with a workaround.
I'm using a minified version of jQuery UI so the code looks like this:
(B?" ui-priority-secondary":"")+'" href="#">'+q.getDate()+"</a>")+"</td>"
(B?" ui-priority-secondary":"")+'" href="javascript:;">'+q.getDate()+"</a>")+"</td>"
I had this exact problem, but the real issue turned out to be duplicate ids on the page. Once I removed the duplicate id the problem went away completely.
I wasn't allowed to touch js libraries, I added this line under onSelect handler.
$('#ui-datepicker-div table td a').attr('href', 'javascript:;');
so my code looked like
$('#txtDate').datepicker({
// other properties
onSelect: function (selectedDate) {
$('#ui-datepicker-div table td a').attr('href', 'javascript:;');
// other code
}
});
You need to override the "$" placeholder with "jQuery" if the text contain "#"