Make bootstrap timepicker popup on input click - javascript

I am tried to create a timepicker
using this here
then I implemented its js and css in my project.
but when I click it the popup didn't appear
I just have this code and can't add anew control to the glyphicons
TextBox control = new TextBox { ID = _TimeFieldID + item.BlueprintFieldId, CausesValidation = true, EnableViewState = true, CssClass = "form-control timepicker margin-top-none metadatacontrol", Width = new Unit(ctrWidth + "%") };
and fire it in javascript with
$(".timepicker").timepicker();
how can I make it appears popup in textbox click?
How can ovride the js to get timepicker fire on a click in the input field?
any help?
EDIT:
Here is my new javascript calling
$(".timepicker").timepicker();
$('.timepicker').click(function () {
$('.bootstrap-timepicker-widget.dropdown-menu').show();
});
Now I can show the timepicker popup , but it looks very wide
I try this
$('.bootstrap-timepicker-widget.dropdown-menu').css("display", "inline-block");
This code displays the popup. Now, the pop-up window width needs to be set the same as width of the input.

use this javascript
$('.timepicker').focus(function (){
$('.timepicker').timepicker('showWidget');
});
or
$('.timepicker').click(function (){
$('.timepicker').timepicker('showWidget');
});
after your code
$(".timepicker").timepicker();

Related

how can I set a value repeatedly to a field with auto clicking in javascript?

I tried to write the auto-clicking function on a web page:
var button = document.getElementById('send_order_btnSendOrder');
setInterval(function(){button.click()}, 200)
it works correctly
, now after each auto clicking i want these values will be located in fileds.
document.getElementById('send_order_txtPrice').value = "24030";
document.getElementById('send_order_txtCount').value = "5";
I mean setting values after autoclaving repeatedly.
how should I change my code?
var button = document.getElementById('send_order_btnSendOrder').addEventListener('click', function())
And then removeEventListener('click', function())

My Jquery animation is not working, nothing is showing up

$("#run_anim").click(function(){
var box = $('.anim_box')
box.show()
//going to add more this is just for testing
})
On my site (torin.eschweb.com) I am trying to make an animation and so far all I have is the part to make the div show when you press the button but nothing is showing up.
Please wrap adding event listener to a jQuery ready method
$(document).ready(function() {
$("#run_anim").click(function(){
var box = $('.anim_box')
box.show()
//going to add more this is just for testing
});
});

Show tooltip on mouseover of a disabled dropdown

countLabel() == 0 ? $('#' + uniqueValueee + 'AndOrSelection').prop("disabled", true) : $('#' + uniqueValueee + 'AndOrSelection').prop("disabled", false);
Using the above code I am able to disable the selection of the dropdown.
I also want to show a tooltip saying why the dropdown is disabled. For that I have written a function on #onmouseover = "showToolTip(this.id)" on my razor dropdownlist.
function showToolTip(id)
{
alert(id);
}
If i write the code on other dropdowns which are enabled it works fine. But when the disabled dropdown is mose overed, the js function doesn't fire. Plus in chorome i am also not able to inspect element. Please help.
Try this on your razor view. I tested it and it is working perfectly for both condition (ddl enabled & disabled):
#Html.DropDownListFor(m => m.City, new SelectList(Model.Lookups.Where(x => x.LookupType == "City"),
"LookupID", "LookupValue"), "---- Select ----", new { disabled= true, #Title= "Tooltip here" })
Please attention to the properties below:
new { disabled= true, #Title= "Tooltip here" }
Then here is the result with enabled and disabled option:
Usually, HTML disabled elements do not facilitate any JS events like hover, click, etc. For your purpose, you put a div overlay with higher z-index such that it acts as a disabled area. Then you can define the hover event on the div itself.

Prevent closure in jQuery/JavaScript

I'm trying to do something that seems (to me, at least) to be a fairly easy, common thing to do.
Here's the HTML for what I've got on a web page:
<div class="allergiesDiv">
<div>
<span class="editButton">Allergies</span><br />
</div>
<span>Allergies</span>
</div>
</div>
I turn the first <span> into a jQuery button with $('.editButton').button().
(I have many of these pairs on the page.)
What I am trying to do is the following:
When the button is clicked, it loads a jQuery Dialog with the value of the span that follows it loaded into a <textarea>. (BONUS: When the dialog is loaded, I'd like the <textarea> to be focused and all text inside highlighted.)
The user is able to edit the value and then click 'OK'.
When the user clicks 'OK', the Dialog is dismissed and the new value that was entered is used to replace the old value for the span.
Here's the code I'm trying to use (this works OK in IE, but breaks in Mobile Safari and Chrome for PC):
NOTE: I've been chopping the code up some to try to get each problem isolated. I have had this working, at least in IE.
// How I get the button and bind to the click event
$('.editButton')
.button({icons: {primary:'ui-icon-pencil'} })
.click(EditClicked);
// 'Edit' button click handler
function EditClicked() {
var span = $(this).parent().next().children().first();
var text = span[0].innerText;
var dialog = $('<div>').prop('title', 'Edit: ' + $(this).text());
var textArea = $('<textarea>').css('width', '98%').prop('rows', '4').html(text);
textArea.appendTo(dialog);
var windowWidth = $(window).width();
var buttonTop = $(this).button().offset().top;
$(dialog).dialog({
modal: true,
minWidth: windowWidth / 2,
position: ['center',buttonTop],
buttons: {
'Ok' : function () {
OKClicked(span);
},
'Cancel' : function () {
$(this).dialog('close').remove();
}
}
});
textArea.focus().select();
}
// Dialog 'OK' button click handler
function OKClicked(span) {
var text = $(this).find('textarea')[0].innerText;
span.html(text);
$(this).dialog('close').remove();
}
This is currently broken when it gets to var buttonTop..., with the error message of "button is undefined". I haven't yet figured out why that is (I used to have a variable in that method named 'button', but it's gone now. Not sure if that's a caching issue.)
Other than that, can anyone see what's wrong with my process? It seems like I've got some kind of misunderstanding with closure, but I'm not yet good enough with JavaScript to understand how to get the kink out of this code.
what about
var buttonTop = $(this).offset().top;
I am not sure, that $('<div>') is properly syntax for jQuery. Try to use $('div') instead.
When you use $(this).button() - you try to call button method of $(this) object. Seems like a bug.

Tinymce on keypress I am try to display the preview of the content

I am trying below code
$('textarea.tinymce').keypress(function(){
dealDescription = $('textarea.tinymce').tinymce().execCommand('mcePreview');
$("#deal_preview div").text(dealDescription);
});
But I am not using jquery tinymce editor suppose I use jquery tinymce and other jquery UI component not working properly so I am directly using the tinymce component.
Now I need to show content preview in preview box for each key press.
Im using this in tinymce 4.x
tinymce.init({
selector: "#tinymce-textarea",
setup : function(ed) {
ed.on("change", function(e){
$('#tinymce-livepreview').html(tinymce.activeEditor.getContent());
});
ed.on("keyup", function(){
$('#tinymce-livepreview').html(tinymce.activeEditor.getContent());
});
}
});
Explanation:
on("change") is for detect changes on mouse event if u click toolbar icon or selection from the menu. It also able to detect the keyboard event but only after lost focus (not real time).
on("keyup") is for detect changes on real time keyboard event
Could be done after initialisasing as well by getting the active editor:
tinyMCE.activeEditor.on('keyup', function () {
// your nicely formatted code here
});
There's also an editors array you can iterate over if you need it.
I try with below code is working fine
tinyMCE.init({
mode : "exact",
elements : "text",
setup : function (theEditor) {
theEditor.onKeyPress.add(
function (theEditor) {
previewContent(theEditor);
}
);
},
});
function previewContent(editorObject){
var content = editorObject.getContent();
document.getElementById("previewContent").innerHTML = content;
}

Categories