I need to have dialog box under the input field. The default behavior - to display above the filed. Tried to customize it using dialog method - haven't worked. What is the proper way to do it?
<script>
$(function() {
$( "#adv-issue-date" ).datepicker();
var handler = function() {};
var dp-settings-param = "";
var dp-pos = [100, 200];
$( "#adv-issue-date" ).datepicker( "dialog", "10/12/2012, handler, dp-settings-param, dp-pos" );
});
</script>
UPDATE:
The datepicker dialog is not showing because of empty handler. This way also does not works :
var handler = function() {$( "#adv-issue-date" ).datepicker("show");};
Modify .ui-datepicker in the CSS file.
If you want to manually move the datePicker around:
$(document).ready(DocReady);
function DocReady()
{
$("#adv-issue-date").datepicker({ beforeShow: moveDatePicker });
}
function moveDatePicker(input, inst)
{
inst.dpDiv.css({ marginLeft: "200px", marginTop: "200px" });
}
Related
My current situation:
kendo tooltip works fine alone.
my new custom angularjs directive with kendoConfirm works fine alone.
but once i try to use them both together on an element, then only the kendo tooltip stops working.
<button type="button" title="Disable Item" k-confirm-disable k-confirm-disable-title="'Confirm Disable'" k-confirm-disable-msg="'Are you sure you want to disable this item?'" ng-click="disable(dataItem.id)" class="btn btn-danger" kendo-tooltip k-content="'Disable Item'" k-options="kendoTooltipOptions">
$scope.kendoTooltipOptions = {
showAfter: 600, //time for tooltip appear
position : 'top',
width : 100
}
kendo tooltip only works when I remove the custom angular directive from the element.
function kConfirmDisable($compile){
return {
restrict: 'A',
scope: {
kConfirmDisableTitle: '#',
kConfirmDisableMsg: '#'
},
link: function(scope, element, attrs){
var clickHandlers = $._data(element[0]).events.click;
clickHandlers.reverse(); //reverse the click event handlers list
var onClick = function(evt) {
evt.preventDefault();
evt.stopImmediatePropagation();
if(!scope.kConfirmDisableTitle) {
scope.kConfirmDisableTitle = "Confirm";
}
if(!scope.kConfirmDisableMsg) {
scope.kConfirmDisableMsg = "Are you sure?";
}
angular.element("<div></div>").kendoConfirm({
title: scope.kConfirmDisableTitle.replace(/['"]+/g, ''),
content: scope.kConfirmDisableMsg.replace(/['"]+/g, ''),
buttonLayout: "normal",
visible: false,
actions: [
{
text: "No",
Primary: false,
action: function(){
evt.preventDefault();
evt.stopImmediatePropagation();
}
},
{
text: "Yes",
Primary: true,
action: function(){
element.unbind(this);
setTimeout(function() {
element.unbind("click", onClick);
element.click();
evt.preventDefault();
evt.stopImmediatePropagation();
element.on("click", onClick);
},0);
}
},
],
animation: {
open:{
effects: "zoom:in",
duration: 250
},
close:{
effects: "fade:out",
duration: 250
}
},
open: function(e) {
$("html, body").css("overflow", "hidden");
},
close: function() {
$("html, body").css("overflow", "visible");
}
}).data("kendoConfirm").open().result;
};
element.on("click", onClick);
clickHandlers.reverse();
}
}
}
Since Kendo AngularJs source is not available, I can only suggest couple of things:
Try to research what happens if you dont stop the propagation and not stop the default on the click in your directive.
If the scenario is that it does not work immediately on page reload and hovering on the element without using clicks- then this is not relevant.
Avoid using isolated scope in your directive and get the attributes via the $attrs link function parameter. Since you did not specify you get js error, I am assuming Kendo isn't using isolated scope, but it is still a direction to investigate.
my solution is I removed the "k-" from the "k-confirm-disable" directive and it worked.
i think its because kendo has "k-" reserved.
I have been trying to add the chosen jquery for my selectbox which is fetching the values from database based on another. The normal selectbox works fine and all the options are getting displayed but the chosen jquery is not working.
I won't put the script tags over here because the chosen jquery is working fine for hard coded values of host names.I have applied jquery for 'host_name' scrolling list.
This is what i tried
$( function() {
$(".host_name").chosen(); });
or:
$( function() {
$("#host_name").chosen().change(host_name); })
or:
$( function() {
$('#host_name').trigger('chosen:updated');
})
perl cgi code containing ajax for fetching data from database scrolling list:
my $JAVASCRIPT = <<'ENDJS';
function call(host)
{
//alert("in call");
var selos=document.getElementById("ostype");
var x=selos.options[selos.selectedIndex].text;
if (x){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange=function() {
if (this.readyState == 4 && this.status == 200) {
var obj=JSON.parse(this.responseText);
var select = document.getElementById("host_name");
for (var key in obj){
var option = document.createElement('option');
option.text = option.value = obj[key];
select.add(option, 0);
//document.getElementById('host_name').appendChild(var);
}
}
};
xhttp.open("GET", "logic.cgi?ostype="+x, true);
xhttp.send();
}
}
cgi code for html
$q->start_td({-colspan=>2}),
$q->scrolling_list(-name=>'ostype',
-size=>1,
-id=>'ostype',
-values=>['RHEL','Windows','SLES'],
-onClick=>'together()',
-onChange=>'call()'
),
$q->end_td,
"Host name",$q->font({-color=>'red'},"*") ,
$q->end_td,
$q->start_td({-colspan=>2}),
$q->scrolling_list({-style=>'width:150px',
-name=>'host_name',
-class=>'host_name',
-id=>'host_name',
-size=>'3',
-values=>[],
-multiple=>'true'}
),
$( function() {
$(".host_name").chosen(); });
The $(".host_name") jQuery selector selects all elements with the class hostname (e.g. <div class="host_name"></div>).
$( function() {
$("#host_name").chosen().change(host_name); })
The $("#host_name") jQuery selector selects all elements with the id hostname (e.g. <div id="host_name"></div>)
$( function() {
$('#host_name').trigger('chosen:updated');
})
You might want to check the chosen() documentation for usage examples, too.
There's an error in your commented-out bit of JavaScript:
//document.getElementById('host_name').appendChild(var);
It should be
//document.getElementById('host_name').appendChild(option);
I was using this code to keep popovers stay open on hover:
var originalLeave = $.fn.popover.Constructor.prototype.leave;
$.fn.popover.Constructor.prototype.leave = function(obj){
var self = obj instanceof this.constructor ?
obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type)
var container, timeout;
originalLeave.call(this, obj);
if(obj.currentTarget) {
container = $(obj.currentTarget).siblings('.popover')
timeout = self.timeout;
container.one('mouseenter', function(){
//We entered the actual popover – call off the dogs
clearTimeout(timeout);
//Let's monitor popover content instead
container.one('mouseleave', function(){
$.fn.popover.Constructor.prototype.leave.call(self, self);
});
})
}
};
$('body').popover({ selector: '[data-popover]', trigger: 'click hover', placement: 'auto', delay: {show: 50, hide: 400}});
Example here: http://jsfiddle.net/raving/2thfaxeu/
This works great on Bootstrap 3, however I'm now using the Bootstrap 4 alpha and this doesn't work anymore. I can't figure out how to get it to work and I can't find an answer anywhere. Could anyone help me modify this code to work with Bootstrap 4?
Alright I found an answer. I looked through other Bootstrap 3 solutions and found one that I was able to tweak to work with Bootstrap 4. Also I forgot to mention this is using popovers with tether.js.
$(".trigger-link").popover({
trigger: "manual",
}).on("mouseenter", function() {
var _this = this;
$(this).popover("show");
$(".popover").on("mouseleave", function() {
$(_this).popover('hide');
});
}).on("mouseleave", function() {
var _this = this;
setTimeout(function() {
if (!$(".popover:hover").length) {
$(_this).popover("hide")
}
}, 100);
});
sorry if this is a repost, I've looked around and cannot find a solution that works.
I have to radio buttons, and I want to execute a function when they are changed. From other posts I thought this should work
$(function() {
$("#isMale").change( function() {
alert("test");
location.href = 'http://google.com'
}
});
http://jsfiddle.net/BfMYF/1/
But it doesn't, can anyone help ?
The selector is wrong, but you need to close .change function brackets properly too:
$(function() {
$("input[name=isMale]").change( function() {
alert("test");
location.href = 'http://google.com';
});
});
$(function() {
$("#male,#female").change(function () {
alert("test");
location.href = 'http://google.com';
});
});
You also had a missing semi and paran!
I am having a webpage with 3 slider and one popup box. For sliders i used jQuery.noConflict() so that is working fine. but in the case of popup box if i am using jQuery.noConflict() its not working.
If i am not using jQuery.noConflict() then my slider wont work.
popup html
<div id="popupContact">
<a id="popupContactClose"><img src="close.gif" alt="close"/></a>
<div id="contactArea"></div>
</div>
<div id="backgroundPopup"></div>
popup jquery
var popupStatus = 0;
function loadPopup(){
if(popupStatus==0){
$("#backgroundPopup").css({
"opacity": "0.2"
});
$("#backgroundPopup").fadeIn("slow");
$("#popupContact").fadeIn("slow");
popupStatus = 1;
}
}
function disablePopup(){
if(popupStatus==1){
$("#backgroundPopup").fadeOut("slow");
$("#popupContact").fadeOut("slow");
popupStatus = 0;
}
}
function centerPopup(){
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#popupContact").height();
var popupWidth = $("#popupContact").width();
$("#popupContact").css({
"position": "absolute",
"top": windowHeight/2-popupHeight/2,
"left": windowWidth/2-popupWidth/2
});
$("#backgroundPopup").css({
"height": windowHeight
});
}
var $rp = jQuery.noConflict();
$rp(document).ready(function(){
$rp("#buttonpop").click(function(){
centerPopup();
loadPopup();
});
$rp("#popupContactClose").click(function(){
disablePopup();
});
$rp("#backgroundPopup").click(function(){
disablePopup();
});
$rp(document).keypress(function(e){
if(e.keyCode==27 && popupStatus==1){
disablePopup();
}
});
});
Note: This popup jquery is an external jquery and i am using <script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script> also.
Thank you.
If you use jQuery.noConflict(), that prevents jQuery from aliasing jQuery as $. However your popup code is still trying to use $.
Either reference jQuery, not $, or wrap your code in a closure and reference $ as a local variable within the closure, i.e.
(function($) {
//popup code here
})(jQuery);