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
Related
I want to select or type a text in a combox with the frameworks w2ui. When i type on the key "Enter", i would get the value in the combobox to push this value in a array (see my addItem function in my code). I don't know how to access the string in the combobox ?
The documentation for this combo is here : http://w2ui.com/web/docs/1.5/form/fields-list
I have made a jsfiddle about what i'm trying to do here :
https://jsfiddle.net/espace3d/bLughmy9/
This is for a simple todo list with tag.
<!DOCTYPE html>
<html>
<head>
<title>W2UI Demo: fields-3</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css" />
</head>
<body>
<div style="height: 10px"></div>
<div class="w2ui-field w2ui-span3">
<label>Combo:</label>
<div> <input type="combo"> <span class="legend">You can type any text</span> </div>
</div>
<div style="height: 20px"></div>
<style>
.w2ui-field input {
width: 200px;
}
.w3ui-field > div > span {
margin-left: 20px;
}
</style>
<script type="text/javascript">
var data={
description:["georges","henry"],
}
var addItem=function(item){
console.log(item)
data.description.push(item)
data.description.sort();
}
$('input[type=combo]').w2field('combo', {
items: data.description,
});
$( 'input[type=combo]' ).keypress(function(event) {
if(event.key == 'Enter'){
console.log( "Handler for .keypress() called." );
/////////////////////////////////////////
//WHAT I WANT TO DO
//addItem(something)
}
});
</script>
</body>
</html>
You can access the w2field object by calling $element.w2field().
After that, you can access the content by calling get() on the w2field object.
Side note: get() may return an object, e.g. if your items are objects in the form { id: 123, text: "my text" }, which would be valid for w2ui combo box or list fields.
In your case, you can change the code as follows:
$( 'input[type=combo]' ).keypress(function(event) {
if(event.key == 'Enter'){
console.log( "Handler for .keypress() called." );
var w2ui_field = $(this).w2field();
var value = w2ui_field.get();
addItem(value);
w2ui_field.options.items = data.description;
}
});
Note that you will have to re-assign the new items to the w2field options, if you want to display them in the combo box.
If you don't want that, you can ommit the w2ui_field.options.items = data.description; part.
Updated fiddle: https://jsfiddle.net/k548j0w1/
I had the same problem as you.
To address my problem, I got the JSON object item of the list and got its id or text in the COMBOBOX as follows.
$('#yourlistid').w2field().get().id
$('#yourlistid').w2field().get().text
I've some problems with JQuery Autocomplete, my code it's like:
var mySource = [{"label":"Value one","id":"1"},{"label":"Value two","id":"2"},{"label":"Value three","id":"3"}];
$("#txtAutocomplete").autocomplete({
source: mySource,
select: function(event, ui){
if(ui.item){
//console.log('select', ui.item.label);
$("#hiddenField").val(ui.item.id);
return ui.item.label;
}
else{
//console.log('select with null value');
$("#hiddenField").val('');
}
},
change: function(event, ui){
if(ui.item){
//console.log('change', ui.item.id);
$("#hiddenField").val(ui.item.id);
}
else{
//console.log('change with null value');
$("#hiddenField").val('');
}
}
});
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<p>
<ol>
<li>Type 'Value' in the text box</li>
<li>Press 'arrow down' to select the first element</li>
<li>Press enter</li>
<li>Keep pressed backspace to delete completely the selected item</li>
<li>Press TAB</li>
<li>Value in 'readonly' field is still there</li>
</ol>
</p>
<input type="text" id="txtAutocomplete">
<input type="text" id="hiddenField" disabled="disabled">
<button>Button added just to have an element to focus on</button>
When I put the string 'value' in the editable field, autocomplete appears correctly, so I can select one value and put it in the textbox with id hiddenField.
Then, if I clear the value in the textbox, I can't update the related hiddenField with a blank value, because change event doesn't fire. Why?
Steps to test snippet:
Write 'value' in the editable field
Select one value
Clear the selected value
hiddenField will still contain old value.
Thanks
Note: It doesn't work when I clear the field after selection but still keeping the focus on it.
Updated: I reported the bug here on bugs.jqueryui.com
I have run to this problem and there is a hack to avoid the problem. You have to force a blur but with a setTimeout
if(ui.item){
//console.log('select', ui.item.label);
$("#hiddenField").val(ui.item.id);
setTimeout(function () {
$(event.target).blur();
});
return ui.item.label;
}
You don't have to keep the inputs in sync inside the autocomplete options. Attach a separate event handler to your text input like so:
$("#txtAutocomplete").autocomplete({
source: ['test1', 'test2', 'test3'],
select: function(event, ui){
console.log('select', ui.item.value);
$("#hiddenField").val(ui.item.value);
}
});
$("#txtAutocomplete").on("input propertychange", function () {
console.log("change", this.value);
$("#hiddenField").val(this.value);
});
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<input type="text" id="txtAutocomplete">
<input type="text" id="hiddenField" disabled="disabled">
When I run your code snippet, the change event does get fired each time I select an item, or when I clear the value, and the log gets printed. But the event gets fired only after I tab out after a selection, or after I click outside the auto-complete input element.
This is because, as per the documentation, the change event gets fired only when the element loses focus.
Steps that make it work:
Write 'test' in the editable field, and select an option
Tab out - this fires the change event
Delete the value
Tab out - this fires the change event
I"m making a very simple to-do list with jquery. I have an input box for adding thing and once entered it will print out that underneath:
HTML:
<html>
<head>
<title>My to-do list</title>
<link rel="stylesheet" href="css/list.css" >
</head>
<body>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="js/list.js"></script>
<div id="empty-top"></div>
<div align= "center" class="wrapper">
<h2>Add thing to your to-do list</h2>
<input id='input' type="text" placeholder="To-do-list" >
</div>
<div class = "things">
</div>
</body>
</html>
my js file:
$(function(){
$("#input").keypress(function(e){
if(e.which == 13){
var content = $("#input").val();
$("<li>" + content + "<input id= 'check' type='checkbox'> </li>").appendTo(".things");
};
});
//I want to check if the box is checked. If it is then I want to insert the tag to cross that item. This function, however does not work. I also tried ("input").is(":checked") or ("input").prop("checked",true) but still doesn't do what I wanted.
$("#check").click(function(){
var box = $(this);
$("<del>").insertBefore("<li>");
$("</del>").insertAfter("</li>");
});
});
Thank you!!!!!!!!
Firstly, you can't append LI elements to a DIV, it should be an UL or OL parent element, and you can't wrap the LI in a DEL, as a DEL element can't be a child of an UL, so you have to wrap the inner element, and unwrap it when the checkbox is unchecked again.
As for the event handler, you can attach that when you create the element, and you should be listening to the change event etc.
$(function () {
$("#input").keypress(function (e) {
if (e.which == 13) {
var content = $("#input").val();
var li = $('<li />', {
text : this.value
}),
inp = $('<input />', {
'class': 'check',
type : 'checkbox',
on : {
change: function() {
if (this.checked) {
$(this).closest('li').wrapInner('<del />');
}else{
$(this).unwrap();
}
}
}
});
$('.things').append( li.append(inp) );
};
});
});
FIDDLE
To see if your checkbox is checked, you can use:
$("input").get(0).checked
I would suggest adding a class in your CSS:
.complete{text-decoration:line-through}
And then add the complete class if checked
if($("input").get(0).checked){
$('corresponding-list-item').addClass('complete');
}
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>
Ok, I'm having a major headache with simplemodal - I know I'm almost there, but can't get this to quite work right. I have a simplemodal dialog that has several dynamically created divs inside it, such as
<html>
<head>
<!-- Confirm CSS files -->
<link type='text/css' href='css/confirm.css' rel='stylesheet' media='screen' />
</head>
<body>
<div id='container'>
<h1>Test Page</h1>
<div id='content'>
<div id='confirm-dialog'>
Page Content Goes Here
</div>
<!-- modal content -->
<div id='confirm'>
<div class='header'><span>Header Text</span></div>
<div class='message'>
<div id='optionDiv0'><input type='radio' id='options' name='options' value='0' />Option0</div>
<div id='optionDiv1'><input type='radio' id='options' name='options' value='1' />Option1</div>
<div id='optionDiv2'><input type='radio' id='options' name='options' value='2' />Option2</div>
</div>
<div class='buttons'>
<div class='yes'>OK</div>
</div>
</div>
</div>
<!-- Load JavaScript files -->
<script type='text/javascript' src='scripts/jquery.js'></script>
<script type='text/javascript' src='scripts/jquery.simplemodal.js'></script>
<script type="text/javascript">
jQuery(function ($) {
$('#confirm-dialog input.confirm, #confirm-dialog a.confirm').click(function (e) {
e.preventDefault();
confirm("", function () {
for(var k = 0; k <= 3; k++) {
if(options[k].checked) {
var ele = document.getElementById("optionDiv" + k);
ele.style.display = "none;";
//alert("Stop Here");
}
}
});
});
});
function confirm(message, callback) {
$('#confirm').modal({
closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
position: ["20%",],
overlayId: 'confirm-overlay',
containerId: 'confirm-container',
containerCss: {
height: 300,
width: 450,
backgroundColor: '#fff',
border: '3px solid #ccc'
},
onShow: function (dialog) {
var modal = this;
$('.message', dialog.data[0]).append(message);
// if the user clicks "yes"
$('.yes', dialog.data[0]).click(function () {
// call the callback
if ($.isFunction(callback)) {
callback.apply();
}
// close the dialog
modal.close(); // or $.modal.close();
});
}
});
}
</script>
</body>
</html>
In the click code, I'm trying to make it so when the user clicks on one of the radio buttons, then clicks 'OK', that item is no longer visible in the popup. If I follow that code with an alert("Stop here");(shown in the code above, commented out), then I can see the div disappear from the popup. But once I clear the alert box, (or if I comment it out so it never runs), the next time I activate the dialog, the div that I hid is re-appearing. How can I keep it hidden, so that it remains hidden the next time the dialog is activated, or is that possible? Thanks in advance.
FINAL EDIT: Found the solution for the dialog box reverting to its original state every time it opens. I pasted this in just above the jquery code, and it works like a charm:
<script> $.modal.defaults.persist = true; </script>
Found on this site in another thread, as part of a different question. Thanks for all who helped.
Your code still doesn't look complete to me, but as for your confirm function callback
confirm("", function(){
$('#confirm input[type=radio]').each(function(){
if($(this).is(':checked'))
$(this).parent().empty();
});
});
Like that?