Enable tab in AngularJS - html

In HTML disabled two tabs by default
"<tab heading='Test Case Details' active='tabs[1].active' disable='true'>"+
"<tab heading='Test Case Past Results' active='tabs[2].active' disable='true'>"+
When clicking on a function, both the tabs should be enabled and one to be active
$scope.tabs[2].active = true;
$scope.tabs[1].disabled = false;
The controller used is
$scope.tabs = [{ title:'Detailed Test Case 1', content:'Test case content details will come here', disabled: true }];
Still, the tab is not getting enabled. Anything else to be done in this.

You defined the disable attribute of both your tab on true and you never change that, so whatever you do, your tabs will always by disabled. I guess you should bind them to tabs[x].disabled and your function should do something like:
$scope.tabs[0].disabled = false;
$scope.tabs[1].disabled = false;
$scope.tabs[0].active = true;
To enable both tabs, then activate the first one.
Moreover, you should check your indexes and your array. You seem to have only one item in your array but you use the index "2" and you don't seem to be using the "0" index..

If you can use jQuery, you could assign each of the tabs an id and have the jQuery in your function to do something along the lines of:
$("#tab1").attr("disable","false");
$("#tab2").attr({"disable": "false", "active": "true");

Related

Toggle switch to pass unchecked value

I'm using a checkbox to create a toggle switch as shown in this tutorial
The switch lives in a form where questions can be added dynamically. On submission the form posts as array of each answer back to the page to be processed however as the off switch doesn't pass a value back to the form the answers get out of sync with the answers for the other text fields. Is there any way to set a value for the off switch, i.e. when a check box is left unchecked?
I've tried to use the following to set my off checkboxes to off however it just seems to animate all the switches to on on form submission, anyone any ideas as to what I'm doing wrong?
$('form').submit(function(e){
var b = $("input:checkbox:not(:checked)");
$(b).each(function () {
$(this).val(0); //Set whatever value you need for 'not checked'
$(this).attr("checked", true);
});
return true;
});
You probably want to use Javascript to set a value for each checkbox "switch" in one of two ways:
Option 1: in the html of the switch elements/checkboxes, set the value attribute to zero by default. Then add a javascript click handler for the toggle to check its current value and toggle to the opposite state/value.
Option 2: add Javascript to the form's submit handler (on submit) that checks for any switch elements which have no values and set them to zero before processing form.
Either way should pass a value at all times, and your form should be able to keep track of all input states.
This snippet did the trick, as Anson suggested this finds all the checkboxes and sets them to either on or off on form submission:
$('form').submit(function () {
$(this).find('input[type="checkbox"]').each( function () {
var checkbox = $(this);
if( checkbox.is(':checked')) {
checkbox.attr('value','1');
} else {
checkbox.after().append(checkbox.clone().attr({type:'hidden', value:0}));
checkbox.prop('disabled', true);
}
})
});

Lightswitch html client override default save button

I want to be able to override the default save button on the html client however i cant seem to find the control to do so. I want to write some validation behind it and allow the user to select an option but I just cant seem to find it.
I know the silverlight client you can override it but just cant seem to override it in the html client.
thanks
It's achieved using beforeApplyChanges.
example: (Please excuse any typos/syntax errors, you get the rough idea!)
myapp.AddEditScreen.beforeApplyChanges = function (screen) {
switch (screen.Property_SavingStatus) {
case 'Not Saving':
setTimeout(function () {
// Override Save -> toggle SavingStatus -> Call Save again
SaveMyChangesMyWay();
screen.Property_SavingStatus = 'Commit';
myapp.commitChanges(); // Or Discard or Apply.
}, 500);
return false; // Cancel save changes request
break;
case 'Apply':
return true;
break;
default:
};

Selectively remove Chrome browsing history

Is it possible to selectively remove items from Google Chrome browsing history? I have a website from my history that wants to be the default everytime I start a search with a specific letter, but I often reference my history to re-find things.
So I would like to remove all history from, say, www.pythonismyfavoritest.com without removing everything; is that possible?
Try searching www.pythonismyfavoritest.com in the search bar in chrome://history/ and then remove each item by clicking the check box in the left and then hitting the "remove selected items" button.
The chrome history api works with url such chrome://history/#q=hello&p=0
Here's something I wrote in JavaScript. It works through the Console Debugger. I tried using it in a bookmark but I get no response from the page.
** // UPDATE (07.28.15)
I added a shorter approach provided by #Denis Gorbachev to the checkbox targeting, which helped shorten some of this code. I also added "auto-stop" functionality, meaning the loop will stop once it has finally cleared the list.
** // UPDATE (08.20.14)I made a few changes to the code, to make it more user friendly. Other users may not be code-savvy, and others may simply prefer convenience. Therefore, I whipped up a couple buttons (start/stop) to control the usage; as well as address some "ASSERTION FAILED" exceptions/errors that were being thrown when attempted to run the script loop.. Enjoy!!
In your address bar, type in the following address to to the meat of the history page.. It's normally loaded in an iframe, with the left-side menu loaded in another frame.. // **
chrome://history-frame/
Next, load your Console Debugger/Viewer by pressing Ctrl+Shift+J(For Mac users, ⌘+⌥+J)
You can also press F12 and select the "Console" tab.
In the Console Debugger/Viewer, copy & paste the following code:
function removeItems() {
removeButton = document.getElementById('remove-selected');
overlayWindow = document.getElementById('overlay');
//revision (07.28.15): Replaced the For Loop targeting the checkboxes, thanks to Denis Gorbachev via comments (02.19.15)
Array.prototype.forEach.call(document.querySelectorAll("input[type=checkbox]"), function(node) {node.checked = "checked"})
setTimeout(function () {
if (removeButton.getAttribute("disabled") !== null) {
removeButton.removeAttribute("disabled")
}
/* revision (08.20.14): no longer binding to that condition, button should no longer be disabled, so click! */
if ((overlayWindow.hasAttribute("hidden")) && (overlayWindow.getAttribute("hidden") !== false)) {
removeButton.click();
}
/* revision (08.20.14): new Interval, to check against the overlay DIV containing the confirmation "Remove" button */
/* Attempting to click the button while the DIV's "hidden" attribute is in effect will cause FAILED ASSERTION */
stopButton = setInterval(function () {
if (overlayWindow.hasAttribute("hidden")) {
if (overlayWindow.getAttribute("hidden") == "false") {
hidden = false
} else {
hidden = true
}
} else {
hidden = false
}
if (!hidden) {
document.getElementById("alertOverlayOk").click();
clearInterval(stopButton)
}
}, 250)
}, 250)
}
//revision (08.20.14): Lets build our buttons to control this so we no longer need the console
//stop button (08.20.14)
var stopButton = document.createElement('button');
stopButton.setAttribute('id', "stopButton");
stopButton.innerHTML = "Stop";
stopButton.style.background = "#800";
stopButton.style.color = "#fff";
stopButton.style.display = "none";
stopButton.onclick = function () {
clearInterval(window.clearAllFiltered);
document.getElementById("stopButton").style.display = "none";
document.getElementById("startButton").style.display = ""
};
//start button (08.20.14)
var startButton = document.createElement('button');
startButton.setAttribute('id', "startButton");
startButton.innerHTML = "Start";
startButton.style.background = "#090";
startButton.style.color = "#fff";
startButton.onclick = function () {
window.clearAllFiltered = setInterval(function () {
/* revision (07.28.15): Stop the Loop automatically if there are no more items to remove */
if(document.getElementById("results-header").innerText=="No search results found."){
document.getElementById("stopButton").click();
}
if (document.getElementById("loading-spinner").getAttribute("hidden") !== null) {
removeItems()
}
}, 250); //adjust Time Here (1500 [millisec] = 1.5sec)
document.getElementById("stopButton").style.display = "";
document.getElementById("startButton").style.display = "none"
};
/* revision (08.20.14): Now we add our buttons, and we're ready to go! */
editingControls = document.getElementById('editing-controls');
editingControls.appendChild(stopButton);
editingControls.appendChild(startButton);
This removeItems function will select loop through all form inputs and check all checkboxes, enable the "Remove Selected Items" button and click it. After a half-second, it'll check if the "Are You Sure" prompt is displayed and, if so, click the "Yes/Remove" button automatically for you so that it will load a new list of items to do this process all over again..
The item is looped using the variable "clearAllFiltered", which is a setInterval loop, which is checking for the status of the "Loading" screen..
To start erasing your filtered history items, you can now click the green Start button.
** // UPDATE (07.28.2015) It will now stop on ITS OWN.
To stop the loop manually, you can now click the red Stop button. Simple as that!
1) Go to your history settings ( chrome://history/ )
2) In the top right hand corner will be a search bar with a 'Search History" button
3) Type in the sitename you want to remove from history, then click the button
4) Click the box on the first one, then scroll to the bottom of the page
5) Press and hold the Shift key, then click the last box (This will check all on that page)
6) Scroll back up and select the 'Remove Selected Items" Button
7) Repeat steps 4-6 until all your Youtube History is gone.
Hopefully Chrome will update this clear history feature, but for now this seems to be the fastest option
Easy way is Shift+Delete.
For example when you type "you", "youtube.com" will be shown as selected in suggestions. Just click Shift+Delete. Then retype "you" and you will see no "youtube.com" in that list anymore.
If you are talking about getting rid of the suggested search/auto-completion... then removing specific items from your chrome://history won't do it (in my experience). I want to fill in more detail to the answer #LacOniC gave.
In the screenshot you can see I typed "ba" and Chrome is suggesting completion based on my browsing history (the items in green).
In my experience, removing specific items from your history will not remove them from showing up in this address bar auto-completion.
To quickly remove these auto complete items:
Start typing a few letters that generate the offending suggestion.
Use your keyboard's arrow keys to select the suggestion you don't like (selected item is highlighted blue in screenshot).
Press shift+delete on windows or shift+fn+delete on mac to remove the selected item.

Disabling KendoUI drop down list options

How to disable an option of a kendoiu drop down list?
I couldn't find how to accomplish this in their documentation...
Try the following approach (here and here there are some demos): use a template for your items, which conditionally adds a class to the items to be disabled. The info about which items should be disabled comes from the underlying data objects.
HTML:
<script id="template" type="text/x-kendo-tmpl">
#
if (data.disabled != null) {#
<span class="tbd" > ${data.text} - is disabled </span>
# } else { #
<span>${data.text}</span > #
}#
</script>
<input id="color" value="1" />
jQuery and Kendo UI (note here the disabled extra property for the Orange item and the usage of the dataBound event):
var data = [{
text: "Black",
value: "1"
}, {
text: "Orange",
value: "2",
disabled: "disabled"
}, {
text: "Grey",
value: "3"
}];
$("#color").kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
dataSource: data,
index: 0,
template: kendo.template($("#template").html()),
dataBound: function (e) {
$(".tbd").parent().click(false);
}
});
CSS for graying out:
.tbd{
color:#777777
}
While the accepted answer will prevent a click on the item, it still allows keyboard navigation (and feels pretty hackish).
Using the DataItems to identify which item should be disabled is indeed the way to go, but instead of removing the click handler, it is simpler to implement a Select handler that will stops the chain. This method is supported and documented by Kendo :
Fired when an item from the popup is selected by the user either with
mouse/tap or with keyboard navigation.
...
e.preventDefault Function
If invoked prevents the select action. The widget will retain the
previous selected item.
All that remains is to detect if we want to cancel the selection or not, which is trivial if your data item keeps a property that identifies whether it is available or not :
function Select(e) {
if (e.sender.dataItem(e.item).disabled) {
e.preventDefault();
}
}
Using a template to inject a specific class is not needed, but I would still recommend it if only to enable a proper styling.
Based on the question here, you could access the relevant item and change attributes like so:
var ds = $('#YourCombo').data().kendoComboBox.dataSource;
//someIndex is the index of the item in the dataSource
ds.data()[someIndex].set("enabled","False");
Kendo currently doesn't support such functionality but this is easiest hack I found to disable an option in Kendo Dropdown.
$("#" + id + "_listbox .k-item")[index].disabled = true;
where id -> ID of your dropdown
index -> position of the element in the dropdown you want to disable.
Hope it helps. Enjoy :)
You could try something like this:
var dropDown = $("#yourDropdown").data("kendoDropDownList");
dropDown.enable(false);
Try other way for specific index
var dropDown = $("#color").data("kendoDropDownList");
$("#color" + "_listbox .k-item")[index].disabled = true;
$("#color" + "_listbox .k-item").eq(index).addClass("tbd");
Fiddler for reference :- http://jsfiddle.net/xLs4n9dm/2/
If you want to disable the entire control and you are using the MVC fluent API, then you can use the .HtmlAttributes() method:
#Html.Kendo()
.DropDownList()
.HtmlAttributes(new { #disabled = "disabled" })
Try like this
$('#YourDropDown').attr('disabled', 'disabled');

Checking whether a checkbox is checked

I have not found any inbuilt function for checking whether a checkbox is set true or false,
isChecked() is not available is apps-script (if i am right).
Any idea on how to find it or we shall have a value change handler to count the number of times the value changed and find if it is checked or not?
You should assign your checkbox a name so that you can retrieve its value in a handler function with e.parameter.checkboxname : this value is boolean.
var chkmode = app.createCheckBox("description").setName("chk1").setId("chk1")
with the ID you can modify its state from the handler function (or from any other) if necessary (getElementbyId())
note that the handler can be on the checkbox itself (a change handler) or on any other element in the UI, depending on your needs.
I might be wrong, however I believe there is a problem with the checkBox status, even though its status looks like boolean, it doesn't behave like boolean but like string
if you print in a spreadsheet e.parameter.myCheckBox you will get TRUE or FALSE
if you print in a spreadsheet e.parameter you will get the whole object and see myCheckBox=true or myCheckBox=false
however, if (e.parameter.myCheckBox) will always return True
the workaround I am using is: if (e.parameter.myCheckBox == "true") will return the actual myCheckBox status
Just in case, I am opening a new ticket in the issue tracker
I hope this would help you
ps. confirmed with Google, e.parameter.myCheckBox is a string, not a boolean
if you want to use it as boolean it would be like (e.parameter.myCheckBox == "true")
var handler = app.createServerClickHandler('tellStatus');
and then (as example showing it in a label)
function tellStatus(e){
var app = UiApp.getActiveApplication();
app.getElementById('yourStatusLabel').setText('Checkbox checked: ' + e.parameter.yourCheckbox)
return app;
}
You should use handler function look like below.
I found example from https://sites.google.com/site/scriptsexamples/learn-by-example/uiapp-examples-code-snippets/check-box
if(e.parameter['checkbox_isChecked_'] == 'true'){
itemsSelected+= e.parameter['checkbox_value_']+',';
}