I was trying to make a extension of datebox were I first needed to select the date and then click "Choose date".
All works, well almost. When I click the "Choose date" button the content behind the modal window get clicked, and in my case it is a search button.
Anyone know why?
if (o.useSelectDateButton) {
$('Välj datum')
.appendTo(hRow).buttonMarkup({ theme: o.theme, icon: 'check', modal: true, iconpos: 'left', corners: true, shadow: true })
.on(o.clickEvent, function(e) {
if ($(this).jqmData('enabled')) {
w.theDate.set(2, 1).set(1, $(this).jqmData('month')).set(2, $(this).jqmData('date'));
w.d.input.trigger('datebox', { 'method': 'set', 'value': w._formatter(w.__fmt(), w.theDate), 'date': w.theDate });
}
if (w.theDate == new Date()) {
w.theDate.set(2, 1).set(1, $(this).jqmData('month')).set(2, $(this).jqmData('date'));
w.d.input.trigger('datebox', { 'method': 'set', 'value': w._formatter(w.__fmt(), w.theDate), 'date': w.theDate });
}
w.d.input.trigger('datebox', { 'method': 'close' });
});
}
I call the datebox like this:
<input name="datepicker" id="datepicker" type="date" data-role="datebox" data-options='{"mode": "calbox", "calShowWeek": true, "overrideCalStartDay": 1, "useModal": true, "useAltIcon": true, "afterToday": true, "useFocus": true }'>
Added a JsFiddle
Click for fiddle
The problem is that i cant recreate the problem in the browser, it only happens in a mobile device.
can you make fiddle with this?which jquery libraries you use for this?
An another option / alternative:
Take at look at this
its a very simple datetimepicker which jquery libraries and it is very simple to put this to work.
head tag:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
body tag:
<p>Date: <input type="text" id="datepicker" /></p>
Related
So I have a label/text that can be a hyperlink, that I need to change to a Kendo Combobox (in a div). Is there a way, in javascript, that I can show and hide or alter between a label and the combobox on click of the text.
So my desired output is:
click on text, combobox displays, click away from label, combobox disappears and text is back with selected value from combobox
Currently my code looks like the following:
<div id="siteText" onclick="showcombo()"> Site </div>
<div id="combobox" hidden>
#(Html.Kendo().ComboBox()
.Name("DDLSiteID")
.DataTextField("SiteName")
.DataValueField("SiteID")
.BindTo((List<SitesClass>)ViewData["Sites"])
.Filter(FilterType.Contains)
.Value(Model.SiteID.ToString())
.HtmlAttributes(new { style = "width: 300px;" })
.Events(e => e.Change("onSiteChange"))
)
</div>
<script>
function showcombo(e) { ///what do I do here? }
function onSiteChange(e) {
$("#SiteID").val(e.sender.element[0].value);
console.log("Site selected: ", $("#SiteID").val());
}
So what I need is to be able to click the site hyperlink value and it changes to the combobox, then when I select a value from the combobox, it changes the hyperlink value to the selected text and the combobox changes back to showing just the hyperlink.
I've seen this done before, but can't remember where. I'm not sure if it is as simple as hiding the one div and showing the other?
Something like this?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.617/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.2.617/js/kendo.all.min.js"></script>
<style type="text/css">
#combobox-container {
display: none
}
</style>
</head>
<body>
<div id="siteText">Site</div>
<div id="combobox-container">
<input id="combobox" />
</div>
<script>
$("#combobox").kendoComboBox({
dataSource: {
data: [{
text: 'Test 1',
value: 1
},{
text: 'Test 2',
value: 2
},{
text: 'Test 3',
value: 3
}]
},
dataTextField: 'text',
dataValueField: 'value',
change: function() {
console.log(this.value());
}
});
$("#siteText").on('click', function(e) {
$(this).hide();
$("#combobox-container").show();
e.stopPropagation();
});
$('#combobox-container').on('click', '*', function(e) {
e.stopPropagation();
});
$('body').on('click', function() {
$('#siteText').show();
$("#combobox-container").hide();
});
</script>
</body>
</html>
Dojo
I work on the system where JQuery dialog is used as a main tool to display text/elements in dialog box. I need to display form with some elements that should be validated. I like to use HTML5 validation with pattern. In order to use that I need to trigger form submit. I'm wondering how that can be triggered with JQuery dialog Save/Submit button?
Here is example of my code:
$(".add").on('click', addRecord);
function addRecord() {
var form = $('<form name="frm_save" id="frm_save" autocomplete="off"></form>');
var subject = $('<div class="form-group"><label class="control-label" for="title">Title:</label><input type="text" class="form-control" name="frm_title" id="frm_title"></div>').attr({
pattern: "[a-zA-Z][A-Za-z '.,-:()]{0,50}$",
title: "Allowed charachters: A-Za-z .,-():",
maxlength: 50,
required: true,
placeholder: "Enter Title"
});
form.append(subject);
displayForm(form, 'Add Record');
}
function saveRecord() {
//Here I want to preventDefault() and run some checks before form gets submited.
console.log('Submit');
}
function displayForm(msg, msgTitle, minH, width) {
if (msgTitle == undefined) msgTitle = 'System Message';
if (minH == undefined) minH = 100;
if (width == undefined) width = 435;
if (!$("#message-dialog").length) $("<div id='message-dialog'></div>").appendTo("body");
$("#message-dialog").html(msg);
$("#message-dialog").dialog({
autoOpen: true,
title: msgTitle,
minHeight: minH,
width: width,
modal: true,
position: {
my: "center",
at: "center",
of: window
},
draggable: false,
buttons: [{
text: "Submit",
class: "btn btn-primary",
id: "btn_submit",
click: function() {
saveRecord(this);
}
},
{
text: "Close",
class: "btn btn-primary",
click: function() {
$(this).dialog("close");
}
}
]
});
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<button class="add">Add</button>
Simply having a <form> and form controls with the [required] attribute already covers basic validation (like an empty field). By adding constraints by [type] or [pattern] the constraint validation API will cover it 99% of the time. The following demo submits to a live test server, the iframe will display the server response. The input value is intentionally invalid so submit the form as is to test validation.
<form id='main' action='https://www.hashemian.com/tools/form-post-tester.php' method='post' target='response'>
<input id='test' name='test' type='email' value='byte2me.com' required><input type='submit'>
</form>
<iframe name='response'></iframe>
I'm using the following code:
<script src="/js/spectrum.js" type="text/javascript"></script>
<link rel="stylesheet" href="/css/spectrum.css" />
<script type="text/javascript">
jQuery(function() {
var opts = {
showInput: true,
className: "full-spectrum",
showInitial: true,
showPalette: true,
showSelectionPalette: true,
maxSelectionSize: 20,
preferredFormat: "hex"
};
jQuery( '#driverColor' ).spectrum( opts );
} );
</script>
...
<input type="text" name="driverColor" value="#ff0000" id="driverColor" />
when I hit the color picker, the original input field is also appearing:
How can I fix it?
TIA
This may be a little late but, in an older rails app (2.3.4), I was able to force the original input field to not show up by adding width, height, border and padding to the style of the input eg:
<input id="your_id" name="your_field_name" type="text" style="width:0;height:0;padding:0;border:0;">
I'm trying to use new google recaptcha in ajax window with colorbox. But there is a problem in IE 9, 10, 11: I can enter nothing in text field. Without colorbox it's allright.
Here's my code
<script type="text/javascript" defer="defer" src="//www.google.com/recaptcha/api.js?ver=1"></script>
<div id="form">
<div class="g-recaptcha" id="g-recaptcha" data-sitekey="<?= RECAPTCHA_KEY ?>"></div>
<button name="" id="sendNotice" type="submit">Send</button>
</div>
<script>
function showNoticePopup(productId, shopProductId) {
$.colorbox({
href: '#form',
onComplete: function() {
grecaptcha.render('g-recaptcha', {
'sitekey' : '<?= RECAPTCHA_KEY ?>'
});
}
});
}
showNoticePopup();
</script>
Does anyone know the solution?
Finally I found the solution.
The problem was in colorbox option called trapFocus.
If you has this problem just set this option to false and enjoy :)
Similar problem was posted here for bootstrap modal window.
Can I write a custom confirm box in JavaScript that, instead of the default OK and CANCEL button, shows a SAVE and DELETE button?
Use the jQuery UI Dialog Box for this.
You can do something like this:
JS:
$(function() {
$("#dialog-confirm").dialog({
resizable: false,
height: "auto",
width: 400,
modal: true,
buttons: {
"Do it": function() {
$(this).dialog("close");
},
Cancel: function() {
$(this).dialog("close");
}
}
});
});
<link href="https://jqueryui.com/jquery-wp-content/themes/jquery/css/base.css" rel="stylesheet"/>
<link href="http://jqueryui.com/jquery-wp-content/themes/jqueryui.com/style.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="dialog-confirm" title="Is it treason, then?">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"></span>Am I the Senate?</p>
</div>
Not with the native JavaScript confirm box. You could use one of the many JavaScript UI components that emulate modal dialogs to do this instead.
Here's an example: https://jqueryui.com/dialog/#modal-confirmation
I've never used this so use at your own risk.
$('confirm text').dialog(
{
modal:true, //Not necessary but dims the page background
buttons:{
'Save':function() {
//Whatever code you want to run when the user clicks save goes here
},
'Delete':function() {
//Code for delete goes here
}
}
}
);
This should work, but you will need to download or link to jQuery and the jQuery UI libraries to run this.