I am displaying datas in a grid ,on click of active or inactive button i have to change the button ,functionality is working fine ,for changing icon i am unable to find the active clicked button ,in jquery we can use "this" ,but no idea in angular js ,pls help
$scope.activeSource = function(datasource,status)
{
$scope.loading = true;
$scope.activeInfo = {
datasource:datasource,
};
$scope.alerts = [];
if(status == "Stopped")
{
$scope.entityService.activeInfo($scope.activeInfo,
function( msg ) // success
{
$scope.loading = false;
$rootScope.successMsg.push(msg);
$('.icon-play').hide(); // this.
$('.icon-stop').show(); // this. no idea
},
function( msg ) // error
{
$scope.loading = false;
$rootScope.successMsg.push(msg);
}
);
You don't need to use this to access the button. Instead, in your controller create a javascript object that holds all the attributes for the button. Something like this:
$scope.myButton = {
src : 'foobar.png',
isVisible : true
};
Then, define your button like this:
<img ng-src="myButton.src" ng-show="myButton.isVisible" />
Now, when you want to modify any attribute of the button, you just need to change the javascript object myButton, and angular will take care of updating the actual button.
For example, if you want to hide the button:
// you don't need to do this
// $('#myButton').hide();
// instead just do this
$scope.myButton.isVisible = false;
Similarly, you can change the src of the image as well.
Related
I am using wordpress for my blog posts - all posts are fetched on the same page and each post has button, I need to be able to recognise which button of which post was clicked.
I can do it only with hardcoded data, but I am unsuccessful with dynamic ones.
I tried to give a trigger button common class and then detect it in JS.
<div class="row">
<button class="common-button-class">CLICK</button>
</div>
let openButton = document.getElementsByClassName(
'common-button-class'
);
if (openButton != null) {
document.querySelector('.common-button-class')
.addEventListener('click', (event) => {
// tried detect event id here unsuccessfully
});
}
Is there function of how to know which post is being triggered?
Use querySelector instaid of getElementsByClassName
let openButton = document.querySelector('.common-button-class');
openButton.onclick = function() {
//Your code here
};
you can use jquery in WordPress
first add properties just like data-id and keep post id in it.
then :
$(document).on("click",".common-button-class", function () {
var clickedBtnID = $(this).data('id');
alert('you clicked on button #' + clickedBtnID);
});
As pictures below I have a tone of img data in one parent div. I would like to return one model value when I click one of those icon in this map layout. What i have done it return all model value when I click those icon.
here is my code
$('#droparea img').click(function (e) {
var imgs = $('#droparea').children('img').map(function () {
var modelid = $(this).attr('model');
console.log(modelid);
}
});
How to get one value when I click one of those icon?
Why not just do this?
$('#droparea img').click(function (e) {
var modelid = $(this).attr('model');
console.log(modelid);
});
Ok, so I have been trying for a few days now to figure out how to detect a user click, and assign new properties to a variable. I have attempted this in a few different ways most of them however not working.
So far I have this, which is pretty self explainitory.
var settings = {
objSlideTrigger: '#one', // link button id
objSlidePanel: '#content-one' // slide div class or id
};
if(document.getElementById('#one').click) {
var setup = settings;
setup.objSlideTrigger = '#one',
setup.objSlidePanel = '#content-one'
};
if(document.getElementById('#two').click) {
var setup = settings;
setup.objSlideTrigger = '#two',
setup.objSlidePanel = '#content-two'
};
when the user clicks a href on the page it I want it to be detected by the javascript and, for the correct setup to be placed within the settings var for use by the rest of the code.
I have two questions really the first being, I will have to duplicate the conditional statement at least ten times so is there anyway to condense/simplify the code.
secondly,When detecting a Href click in javascript do i have to assign an onclick value to the actual element in the html?
thanks again.
With jQuery
Assuming you're wanting to use jQuery because you've included it at the top, use:
$(document).on('click', '#one', function( event ) {
//Do Code here
//For #one click event
});
Although, to prevent DRY - keep it more generic by using Classes:
<div class="updatesettings" id="one">One</a>
<div class="updatesettings" id="two">Two</a>
<script>
$(document).on('click', '.updatesettings', function( event ) {
//Do Code here
//For all .updatesettings click event
alert( $(this).attr('id') );
});
</script>
With JavaScript
var OnOneClick = function() {
// Your click handler
};
var OneClick = document.getElementsById("#one");
OneClick.addEventListener('click', OnOneClick, false);
Then to listen for multiple, use by Class (Although not all IE versions can listen for this):
var AwaitedClickEvent = function() {
//Class Click
}
var WaitingClick = document.getElementsByClassName('clickme');
for (var i = 0; i < WaitingClick.length; i++) {
var current = WaitingClick[i];
current.addEventListener('click', AwaitedClickEvent, false);
}
Your Solution
<!-- Links with ID & Content -->
<div class="updatesettings" id="one" data-content="content-one">One</a>
<div class="updatesettings" id="two" data-content="content-two">Two</a>
<script>
/**
* Get the clicked element's ID
* and it's stored data-content string.
**/
$('.updatesettings').on('click', function( event ) {
var Id = $(this).attr('id'),
Content = $(this).data('content'),
setup = settings,
setup.objSlideTrigger = Id,
setup.objSlidePenl = Content;
console.log( setup );
});
</script>
I have created a fiddle of my function here( http://jsfiddle.net/rhy5K/10/ ) . Now i want to disable the button click i.e play/pause if the sound is playing like Get ready,5,4,3,2,1 .
I know only how to disable the form submit button , but I am very confused how to disable the click in my case the hyperlinks.
Explanation using code example:
I want to disable this
PLAY
click, while interpreter is executing the below code:
var playGetReady = function (done) {
var ids = ['audiosource', 'a_5', 'a_4', 'a_3', 'a_2', 'a_1'],
playNext = function () {
var id = ids.shift();
document.getElementById(id).play();
if (ids.length) {
setTimeout(playNext, 1000);
} else {
done();
}
};
playNext();
};
Warning: This JS fiddle demo may play sound on load
You may try this (Changes in following function), but not sure if this is you want and maybe there are other ways to do it.
App.prototype.start = function () {
var self = this;
// unbind for a while
self.$button.unbind('click', self.buttonHandler); // <--
var start = function () {
// start countdown
self.intervalHandle = setInterval($.proxy(self.tick, self), 1000);
// bind again
self.$button.click($.proxy(self.buttonHandler, self)); // <--
// change button text to PAUSE
self.$button.text('PAUSE');
};
if (this.newTimer) {
playGetReady(start);
} else {
start();
}
};
DEMO.
In jquery, it can be done easily by cancel default action. Here's the sample.
$("#btn_start").click(function(event){
if(not_active_flag){
// Prevent anchor to active
return false;
}else{
// Anchor active as usual
return true;
}
});
In your case, the link will ultimately call this.buttonHandler, which has the following code:
App.prototype.buttonHandler = function (e) {
e.preventDefault(); // prevent anchor default action
this.toggle(); // toggle play/pause
};
Because buttonHandler is attached before playGetReady is executed, it is not possible to let playGetReady attach a click handler to that anchor element that uses .stopImmediatePropagation() to prevent the other click handler from executing.
In this case #gp.'s solution in the comments is most likely the best solution. In your case you might even be able to use a local variable in your app. If you use a global variable, reference it with window.yourglobalvariable. If you use a local variable, make sure you define it somewhere and reference it with this.yourvariable. Change your buttonHandler to:
App.prototype.buttonHandler = function (e) {
e.preventDefault(); // prevent anchor default action
if( this.soundready )
this.toggle(); // toggle play/pause
};
On the appropiate place make this variable false to prevent the 'button' from working. When the button should work, change the variable to true. I think that should be just before done() in the code you have in your question, but you probably have a better idea in what order the code is executed.
The following code worked as expected, however on the paging click, it still execute and display message "Please select a record first, then press this button". Is there anyway to prevent this unless the export button click. Thank you
$(document).ready(function () {
$("#Product").on("click",function(){
var $exportLink = $('#export');
var href = $exportLink.attr('href');
var grid = $('#Product').data('kendoGrid'); //get a reference to the grid data
var record = grid.dataItem(grid.select()); //get a reference to the currently selected row
if(record !=null)
{
href = href.replace(/refId=([^&]*)/, 'refId='+record.ID);
$exportLink.attr('href', href);
}
else
{
alert("Please select a record first, then press this button")
return false;
}
});
});
Defining a click handler as $("#Product").on("click",function(){...}) you are actually defining it for any click on #Product not just on you Export button. You should define the on for the button and not for the grid