Show tooltip on mouseover of a disabled dropdown - javascript

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.

Related

Trying to disable button in all pages in Datatables

I am using Datatables JQuery plugin in order to show data on a table.
In one of the columns I have added also a button to edit the rows.
What I am trying to do is when I click one of the buttons, to deactivate all the others.
Here is my current code together with a screenshot:
$(document.body).on("click", "._edit_save_btn",function(e){
var id = this.id; // get id of selected btn
// disable all other buttons but selected
$("._edit_save_btn").not("#"+id).prop('disabled', true);
)};
Although this works fine for the first page of data (paginated presentation), when I change page, it seems like that the property disabled is not applied.
Thus I can click any other button in order to add the property disabled.
I thought by using the on click event things would work. What am I missing here?
EDIT
The table is created automatically using DataTables jquery plugin and jquery functionality.
On page load my html structure looks like this:
<table id="example">
<thead id="table_head">
</thead>
</table>
Then the table is populated with data coming from Django. The button element looks like this:
edit_btn = '<button id="' + row_id + '" class="btn btn-info btn-sm _edit_save_btn" style="background-color:#a7a3a3;border-color:#a7a3a3">Edit</button>'
EDIT_2
This screenshot explains better what I mean with pagination and changing pages. Please check the lower right corner to see the pagination. When I go to another page (e.g. from 1 to 2) then I see that the disabled property wasnot applied for the buttons on that page:
EDIT
With the help of #Sherin Jose I have managed to reach to this point:
var disable_buttons = function(class_exists){
if (class_exists){
alert("dfdf")
$("._edit_save_btn").not(this).prop('disabled', true);
}
};
$("#example").dataTable({
"scrollX": true,
"aaData":whole_array
}).on( 'page.dt', function () {
class_exists = $("button").hasClass("clicked");
//alert(class_exists)
disable_buttons(class_exists)
});
Whenever a user clicks a button, then the button gets a class called clicked.
Then in the disable_buttons function, I check if this class exists (the 'clicked' class). If it exists I want to disable the other buttons on page change event.
The issue I am facing now is that the
on( 'page.dt', function () {
is executed before the datatable is loaded!
Try this one,
//define the disable feature as a function
var disable_buttons = function(){
$("._edit_save_btn").unbind("click").click(function(e){
// disable all other buttons but selected
$("._edit_save_btn").not(this).prop('disabled', true);
});
};
//call the above function on dataTable init and page change events like:
$("#example").dataTable({
"scrollX": true,
"aaData":whole_array,
"fnDrawCallback":function () {
disable_buttons();
}
});

Make bootstrap timepicker popup on input click

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();

Cannot select ASP WebForms control with jQuery

I have an asp:RadioButton and try to manipulate a label according to whether it is selected or not. Using this code:
if ($('.rbOpenClient').prop('checked'))
$('.openInvLabel').addClass('radioBtnSelected');
else if ($('rbClosedClient').prop('checked'))
$('.closedInvLabel').addClass('radioBtnSelected');
$('.openInvLabel').click(function () {
$('.rbOpenClient').css('checked', true);
$('.openInvLabel').addClass('radioBtnSelected');
$('.rbClosedClient').css('checked', false);
$('.closedInvLabel').removeClass('radioBtnSelected');
});
$('.closedInvLabel').click(function () {
$('.rbClosedClient').prop('checked', true);
$('.closedInvLabel').addClass('radioBtnSelected');
$('.rbClosedClient').prop('checked', false);
$('.openInvLabel').removeClass('radioBtnSelected');
});
.rbOpenClient and .rbClosedClient are CssClass in the asp:Button. The other classes are labels.
Do you see some problems with the jQUery?
Add
ClientId="static"
to the asp controls should make the ids visible to JavaScript. This is because asp.bet displays a generated Id by default. The above code will enable you to use the id you gave it in the markup.

Collapsible Menu Not Staying Open

Hello ive followed the instructions from this webspage Add a Blogger-like collapsible archive block to your Drupal 7 site and suprised myself that everything seems to be 'sort of' working. As you can see from my 'collapsible block' on the right of THIS PAGE that the block doesnt seem to want to stay open when viewing other months. I dont think this was the intended behaviour.
jQuery(document).ready(function($) {
// init: collapse all groups except for the first one
$(".view-collapsible-archive ul").each(function(i) {
if (i==0) {
$(this).siblings("h3").children(".collapse-icon").text("▼");
} else {
$(this).hide();
}
});
// click event: toggle visibility of group clicked (and update icon)
$(".view-collapsible-archive h3").click(function() {
var icon = $(this).children(".collapse-icon");
$(this).siblings("ul").slideToggle(function() {
(icon.text()=="▼") ? icon.text("►") : icon.text("▼");
});
});
});
Could anyone suggest anything to me to make the menu block open on a month when clicked and to close the other 'months'?
thanks
The problem is that the code you have is already added inside the file http://netmagpie.com/sites/all/themes/feverultra/js/feverultra.js and by adding your file after that, you're binding twice to the event and the function toggles twice, so the elements open and close
If you want to only have one month open then you need to close any open months before opening the one that was clicked, something like:
jQuery(document).ready(function($) {
// init: collapse all groups except for the first one
$(".view-collapsible-archive ul").each(function(i) {
if (i==0) {
$(this).siblings("h3").find(".collapse-icon").text("▼");
} else {
$(this).hide();
}
});
// click event: toggle visibility of group clicked (and update icon)
$(".view-collapsible-archive h3").click(function() {
$('.view-collapsible-archive ul:visible').not($(this).next('ul')).slideUp();
var icon = $(this).find(".collapse-icon");
$(this).siblings("ul").slideToggle(function() {
(icon.text()=="▼") ? icon.text("►") : icon.text("▼");
});
});
});
It's because of this line:
$(this).siblings("ul").slideToggle
It says: "toggle the state of all the ul elements using a slide animation"
You will want to change this to slideDown when it's hidden in order to show it and slideUp when it's visible in order to hide it.
I would provide a code sample but I'm typing with one thumb on an iPhone at the moment.

Jquery .ClickOut Event

Hi everybody,
I have some issue with one of my project. I'm currently developing a toolbar for Google Chrome. The concept is that my extension insert by using a content script an iframe in every page i visit. Materialized in Red on my Printscreen.
After that i've created another iframe who appear when i click on the "Menu" Button. This iframe appear like a dropMenu. Materialized in orange in the printscreen.
Well now let me explain my problem :
When i click on the "dropMenuButton" i execute this code :
$( "#dM1").click( function() {
dropMenu('dropMenu1', $(this).position().left);
});
To be clear the function "dropMenu" will call my background page (by messaging exchange) to show or hide the dropMenu, in function if it's allready activated or not.
Here is the executed code by the "dropMenu function"
if(document.getElementById("dropMenu"))
{
$("#dropMenu").slideUp(800, function() {
$(this).remove();
});
}
else
{
var body = $('body'),
MenuURL = chrome.extension.getURL(dropMenuPage + ".html"),
iframe = $('<iframe id="dropMenu" scrolling="no" src="'+MenuURL+'">');
body.append(iframe);
$("#dropMenu").hide().slideDown(800);
// Shift the menu (Left)
$("#dropMenu").css({left: marginLeft+'px'});
}
So the event on dropMenuButton work perfectly but i want to provide some ameliorations like a .ClickOut event. What i want is that when somebody click outside the dropMenu (in orange) the menu will be hide.
I've tried a lot of things but nothing work...
Hope somebody will provide me some help !
Thanks in advance.
Edit (Injection) :
I've tried to inject the javascript like this :
var injectJs = $('<script type=text/javascript>' +
'$(document).click(function() {' +
'dropMenu("dropMenu1", 0);' +
'});');
body.append(injectJs);
injectJs = $('$("#dropMenu").click( function(e) {' +
'e.stopPropagation();' +
'});' +
'</script>');
body.append(injectJs);
But it didn't seems to inject on the page. It should have a problem somewhere...
Can't you just add a click event on the document? Then on the actual drop down menu (or any other events where you don't want to hide the drop down) prevent any clicks from bubbling up:
$(document).click(function(){
// hide drop down clicking anywhere on page:
$("#dropMenu").slideUp(800, function() {
$(this).remove();
});
});
$("#dropMenu").click( function(e) {
e.stopPropagation(); // prevent click on drop menu from removing the drop down.
});
It works great but like this :
$(document).click(function(){
// hide drop down clicking anywhere on page:
dropMenu('slideUp', 0);
});
$("#dM1").click( function(e) {
e.stopPropagation(); // prevent click on drop menu from removing the drop down.
dropMenu('dropMenu1', $(this).position().left);
});
Now i have to insert the similar code on the global page, someone have an idea how i can insert dynamically a js code ?

Categories