How do I reference a UIkit Component in Javascript? I made a small example of my problem:
This is the HTML:
<div class="uk-panel">
<div id="myRadios" data-uk-button-radio>
<button class="uk-button">Option1</button>
<button class="uk-button">Option2</button>
<button class="uk-button">Option3</button>
</div>
</div>
<br/>
<button class="uk-button" onclick="check()">Check Selection</button>
And here is the Javascript part:
function check() {
var selected = $('#myRadios').getSelected();
var selected2 = $('#myRadios').uk('buttonRadio').getSelected();
// getSelected() is not defined in both!
}
I also created this as a plunker: http://plnkr.co/edit/U4ELL78YSsBbBHiwGnOQ
Thanks for your help!
UIkit seems to only toggle buttons(I don't see any api inside docs), and adds class uk-active to selected buttons. So maybe something like this:
$('#myRadios button').on('click', function() {
var selectedValue = $(this).text();
console.log(selectedValue);
});
Related
I was trying to create a to-do list where with help of one input tag I wanted to enter all todo lists by adding HTML dynamically but while removing, I thought to remove it from the opposite order and later to implement it differently;
if I press the remove button I was getting an error in the console part as shown in this image:;
can anyone find the problem in my code, if I test only that remove function separately then that works but not in bellow mentioned code
<body>
<div>Hello world</div>
<div id="li">
<input type="text" id="liin" name="in"/>
<button name="add" onclick=add() className="btn btn-light">add</button>
</div>
<script>
var i =1;
function add() {
let temp = document.getElementById('liin').value;
document.getElementById('li').innerHTML+=`<br><span id="divli${i}">${temp}</span>
<button name="add" onclick=remove() className="btn btn-light">remove</button>`;
i++;
}
function remove() {
document.getElementById(`divli${i}`).innerHTML ='';
i--;strong text
}
</script>
</body>
Try this. You are incrementing the i value too late in the code so your reference to select the element is coming in a null.
Another thing you'll want to do is add a class to each 'remove' button to be selected and removed in the remove function as well. This can be done dynamically as well.
<body>
<div>Hello world</div>
<div id="li">
<input type="text" id="liin" name="in"/>
<button name="add" onclick=add() className="btn btn-light">add</button>
</div>
<script>
var i = 0;
function add() {
i++;
let temp = document.getElementById('liin').value;
document.getElementById('li').innerHTML+=`<br><span id="divli${i}">${temp}</span>
<button name="add" onclick=remove() id="divli${i}" className="btn btn-light">remove</button>`;
}
function remove() {
// document.getElementById(`divli${i}`).innerHTML = '';
let nodeList = document.querySelectorAll(`#divli${i}`);
nodeList.forEach(node => node.remove());
i--;
}
</script>
</body>
I want to change a button name once it is clicked. There are two functions differently Add and Subtract. first-time button name is 'Add', when it clicked it should execute add number function and then name dynamically change button name to Subtract, and once I clicked to subtract it should execute subtract function and again the name of a button come to Add which is previous. How can I do this? how to call a different function like add function when button toggle is add and vice versa.
now I can toggle between two buttons but facing issues with calling add and subtract functions.
<div ng-app="myModule">
<div ng-controller="myController">
<button ng-click="toggle = !toggle">
{{ toggle ? 'Add' : 'Subtract' }}
</button>
</div>
</div>
Varsha, Could you please check this working fiddle. Do you want this?
Explanation: You can use a flag (functionToBeCalled in this case) to call the targeted function and switch the text of the button.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="personCtrl">
<button ng-click="functionToBeCalled == 'Add' ? add() : substract();">
{{ functionToBeCalled }}
</button>
<br>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.functionToBeCalled = "Add";
$scope.add = function() {
$scope.functionToBeCalled = "Substract";
alert('Add is clicked');
};
$scope.substract = function() {
$scope.functionToBeCalled = "Add";
alert('Substract is clicked');
};
});
</script>
</body>
</html>
You probably want to have 2 buttons defined and show one of them at a time using ng-if. ng-if removes the button from the DOM if the condition is not met. See the official documentation: https://docs.angularjs.org/api/ng/directive/ngIf
<div ng-app="myModule">
<div ng-controller="myController">
<button ng-if="toggle" ng-click="add()">
Add
</button>
<button ng-if="!toggle" ng-click="subtract()">
Subtract
</button>
</div>
</div>
I want to get a text from a textarea after clicking on button that is next to the textarea.
The problem is that I will have many textareas and every button must returns the text of the textarea that corresponds to it.
This is my code
function btnmodif(){
var mod = $(this).prev().val();
alert(mod);
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="list-item-edit">
<textarea class="list_input">eggs</textarea>
<button class="btn btn-modify-item" onClick="btnmodif()">get text</button>
</div>
<div class="list-item-edit">
<textarea class="list_input">water</textarea>
<button class="btn btn-modify-item" onClick="btnmodif()">get text</button>
</div>
You have to pass object clicked to btnmodif function.
<button class="btn btn-modify-item" onClick="btnmodif(this)">get text</button>
JS
function btnmodif(button){
var mod = $(button).prev().val();
alert(mod);
};
Also, you should use .prev function.
Read more about .prev() function, here.
function btnmodif(button){
var mod = $(button).prev().val();
alert(mod);
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="list-item-edit">
<textarea class="list_input">eggs</textarea>
<button class="btn btn-modify-item" onClick="btnmodif(this)">get text</button>
</div>
<div class="list-item-edit">
<textarea class="list_input">water</textarea>
<button class="btn btn-modify-item" onClick="btnmodif(this)">get text</button>
</div>
Firstly, you need to pass the clicked element as context to the function:
onClick="btnmodif(this)"
...
function btnmodif(button){
Second, if the HTML structure will remain the same (i.e. the textarea is always going to be the element immediately before the button), then you can use prev()
var mod = $(button).prev('textarea').val();
https://api.jquery.com/prev/
If that structure isn't guaranteed to be maintained, then .siblings() gives you a bit more flexibility, as it searches through all the elements at the same hierarchical level in the DOM to find what you want:
var mod = $(button).siblings('textarea').val();
https://api.jquery.com/siblings/
Here is what are you looking for.
Add this as parameter to your button.onclick
Thanks to jQuery:
Using $(element).parent(), you get your div element.
Using $(element).parent().find('.list_input'), you get your textarea element.
Using $(element).parent().find('.list_input').text() gives you the value of the textarea "related to" the clicked button.
function btnmodif(element){
var result = $(element).parent().find('.list_input').text();
alert(result);
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="list-item-edit">
<textarea class="list_input">eggs</textarea>
<button class="btn btn-modify-item" onClick="btnmodif(this)">get text</button>
</div>
<div class="list-item-edit">
<textarea class="list_input">water</textarea>
<button class="btn btn-modify-item" onClick="btnmodif(this)">get text</button>
</div>
You're missing the this from the inline handler specification:
https://jsfiddle.net/3mvod6ux/
Use siblings with a selector to get the textarea's value that belong to the same block of the button clicked.
function btnmodif(button){
var mod = $(button).siblings("textarea").val();
alert(mod);
};
Another way to do this task .
Instead to use HTML event attribute this is better approach.
var btnModifyItem = $('.btn-modify-item');
btnModifyItem.click(function(){
var mod = $(this).prev().val();
alert(mod);
})
This way you can get the parent of button (and textarea) and then can get the text from child textarea:
$('button').on('click', function () {
console.log(($(this).parent().find("textarea").text()));
});
Let's say i have a search box and i want to display it after user click on button . so far so good .
but i want to add another feature , when user click anywhere search box go away .
How can i do this with AngularJs ?
this is my code :
HTML
<button class="btn btn-info " ng-click="addStyle()" ><i class="fa fa-search"></i>
Search</button>
<input type="text" placeholder="Type" class="{{noneStyle}} {{visibleStyle}}">
Angular
app.controller("MainCtrl", function($scope,$http){
$scope.noneStyle = "noneVisible";
$scope.addStyle = function(){
$scope.noneStyle = "visibleStyle";
}
})
any idea ?
Thx in advance
I'd recommend use ng-if instead
app.controller("MainCtrl", function($scope,$http){
$scope.visible = true;
$scope.changeStatus = function(){
$scope.visible = !$scope.visible;
}
$scope.hideAll= function(){
$scope.visible=false;
}
})
HTML
<div class="well" ng-controller="MyController">
<button class="btn btn-primary" ng-disabled="checked" ng-click="changeStatus()" ng-blur="hideAll()">BUTTON</button>
<hr/>
{{visible}}
<input type="text" placeholder="Type" ng-if="visible">
</div>
look at this jsFiddle
try it out!
Use ng-blur/ng-focus to achieve this.
I demonstrate a simple code over here. http://jsfiddle.net/lookman/1Lp95or0/
var myApp = angular.module('myApp',[]);
myApp.controller('MyController', function($scope) {
$scope.visible = true;
$scope.changeStatus = function(){
$scope.visible = !$scope.visible;
}
$scope.hideAll= function(){
$scope.visible=false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="MyController">
<button ng-disabled="checked"
ng-click="changeStatus()">Click to show/hide the input box</button>
<hr/>
<p>Current visible status: {{visible}}</p>
<input type="text" placeholder="Type" ng-show="visible" ng-blur="hideAll()">
</div>
</div>
Note that in this example, you need to click on input box first before clicking elsewhere to hide it. I hope this is what are you looking for and this helps.
Use the ng-blur directive to update your model when the user clicks somewhere else:
<button class="btn btn-info " ng-click="addStyle()" ng-blur="removeStyle()">
You could do it using standard JavaScript, registering an event listener once the search box is displayed and unregistering it, as soon as the user has clicked anywhere:
$scope.addStyle = function()
{
$scope.noneStyle = "visibleStyle";
// register event listener
document.addEventListener("click", hideSearchBox);
}
function hideSearchBox()
{
// set style to hide search box
$scope.noneStyle = "noneVisible";
// unregister event listener
document.removeEventListener("click", hideSearchBox);
}
I'm not sure if there is a more Anuglar-way of doing it. To do so, you would need to register something on document level, as you want the search box to be hidden if you click anywhere. And "anywhere" might not be where the Angular root scope is registered..
Please help me to combine two scripts of jquery. AT the moment they are not compatible to each other. What can I do to make them both friendly.
Jquery:
<script>
function edit_product() {
var id = $('.DIVY.panel3').attr('id');
alert (id);
</script>
<script>
$(function(){
$('.DIVY').click(function(){
$('.DIVY.panel3').removeClass('panel3').addClass('panel2');
$(this).removeClass('panel2').addClass('panel3');
})
})
</script>
html:
<div id="1" class="DIVY panel2" >click me please!</div>
<div id="2" class="DIVY panel2" >click me please!</div>
<div id="3" class="DIVY panel3" >click me please!</div>
<div id="4" class="DIVY panel2" >click me please!</div>
<div >Check ID</div>
For better visualization, I put this code to My_jsfiddle
Thank you for your efforts!
Your code works on jsfiddle, just change the execution to No wrap - <in head> on the Frameworks & Extensions panel, see http://jsfiddle.net/IrvinDominin/CevcR/4/
But don't mix jQuery and inline js code if you can, you lose clarity in the code.
Assign an id to your anchor element like editMe and set its click function, your code can look like:
$(function () {
$('.DIVY').click(function () { // when a .myDiv is clicked
$('.DIVY.panel3').removeClass('panel3').addClass('panel2');
$(this).removeClass('panel2').addClass('panel3');
})
$('#editMe').click(function () { // when a .myDiv is clicked
var id = $('.DIVY.panel3').attr('id');
alert(id);
})
})
Demo: http://jsfiddle.net/IrvinDominin/CevcR/2/