I have a problem with the performance of a click event on a marker.
This is my map view:
<div class="map-wrapper">
<map center="{{mapCenter}}" street-view-control="false" zoom-control="false" map-type-control="false" zoom="14">
<marker position="{{place.coords}}" title="{{place.name}}" icon="{{place.icon}}" ng-repeat="place in places" on-click="select(place.id)"></marker>
</map>
</div>
This is a button calling the same function (same view and controller):
<button ng-click="select(null, 13)">My test button</button>
This is my function:
$scope.select = function(event, placeId) {
$log.debug('select called');
$location.path('/places/' + placeId);
};
When I click on the button the console.log appears and location change happens immediately. When I click on the marker the console.log appears immediately but the location change takes up to 5s to happen.
Any idea how this could be?
Try to avoid ng-repeat use ui-gmap-markers instead in which it has a click param to wire up your handler.
In my case calling $digest() on $scope in a timeout function did the trick:
$timeout(function () {
$scope.$digest();
});
Related
This is just a test of something I'm trying to accomplish here that is probably incredibly simple but is racking my brain. I've reviewed some of the closest matches already available here, but I wasn't able to make any of them work.
I'm trying to load content into a div using a button, like so:
<div class="load-container">
<button class="load-first">Load First</button>
</div>
<script type="text/javascript">
$(".load-first").click(function() { $(".load-container").load("/test-1.html"); });
$(".load-second").click(function() { $(".load-container").load("/test-2.html"); });
$(".load-third").click(function() { $(".load-container").load("/test-3.html"); });
</script>
And this actually works on the first try, but then, when "/test-1.html" loads, the next button doesn't work. This is what is in /test-1.html file:
This is the first one.<br>
<button class="load-second">Load Second</button>
Clicking the second button should load the next bit of content but it does nothing. Is the problem that the button is inside of the destination container div? I need a container div with buttons inside that can load new content in this way.
Because at the time the page is loaded, the "load-second" button was not there yet, thus the click() event was not registered to the button that is yet to come via the load() content, you need to attach your event after your buttons are created in the DOM, try the following:
<div class="load-container">
<button class="load-first">Load First</button>
</div>
<script type="text/javascript">
$(".load-first").click(function() {
$(".load-container").load("/test-1.html", function(){
// now load-second button is available, register the click handler
$(".load-second").click(function() {
$(".load-container").load("/test-2.html", function(){
// now load-third button is available, register the click handler
$(".load-third").click(function() { $(".load-container").load("/test-3.html"); });
});
});
});
});
</script>
I have a link which downloads a file on click. I wrote a function on onclick event of that link tag to do some ajax operations when it is clicked.
But the function is not getting called when we click on that link.
However, if i debug the code or place a alert box in that js function, it just works fine. what will be the cause for this?
My code:
HTML:
<a href="DllLocation.dll" onclick=fntrackdownloads() ></a>
JS:
function fntrackdownloads() {
$.get("default.aspx?RT=1", Responsetrackdownloads);
}
Working code:
JS:
function fntrackdownloads() {
$.get("default.aspx?RT=1", Responsetrackdownloads);
alert("something");
}
Any help will be appreciated.
note: the anchor tag is generated dynamically from code behind and
written to dom. i am unaware of what dll location will come in href
attribute.
$(document).("click", "a.putaclass", function(e) {
//what to do on the click
var $a=$(this);
$.get(pathtoserver,function(d) {
alert('data received:'+d);
})
return false; //or e.preventDefault
});
It's probably because the default anchor behaviour interrupts your AJAX response.
Try to put return false at the end of the function that's called on click and see what happens.
I think you are missing the "quotes" here:
//--------------------------------^------------------^
or more in jQuery way:
$('a[href="DllLocation.dll"]').click(function(){
fntrackdownloads();
});
and
$('a[href="DllLocation.dll"]').click(fntrackdownloads);
);
This tv.ui.button only responds to mouseclick when initially loaded, but then responds to keyboard ENTER or mouseclick after it's been clicked at least once. Do I have something wrong here?
HTML
<div class="tv-button alert-button" id="test-button">Alert button</div>
JS
decorateHandler.addClassHandler('alert-button', function(button) {
goog.events.listen(button, tv.ui.Button.EventType.ACTION,
function() {
alert('Button clicked.');
var elementToFocus = goog.dom.getElement('tab1');
var componentToFocus = tv.ui.getComponentByElement(elementToFocus);
tv.ui.Document.getInstance().setFocusedComponent(componentToFocus);;
});
});
EDIT: it seems this may be a question about javascript, not closure specifically. I'm posting a new question under the appropriate tag
Have you made sure that the button has cursor focus? If not then the "Enter" key event will get handed to the default handler.
Well, I fixed it with a semi hack. i used a $('target').click on the button within $(document).ready, which seems to set the focus as if a click event had actually happened
I'm trying to prevent the user from clicking on more than one postback-causing element on the page. In other words, if they click the 'continue' submit button, they shouldn't be able to cause another postback before the original request comes back.
I've had a go with two versions of jQuery code. Neither does exactly what I want:
This version will disable all the postback elements, but in doing so, it stops the clicked element from firing. For the record, I don't think the .removeAttr('onclick') is really required, but leaving it out doesn't seem to change the behaviour.
$(function() {
$('a, :button, :submit').click(function() {
var elements = $('a, :button, :submit');
elements.attr('disabled', 'disabled').removeAttr('onclick');
});
});
This version disables all other postback elements, but it lets me reuse the same element that was clicked - I don't want to be able to hit the same button twice.
$(function() {
$('a, :button, :submit').click(function() {
var otherelements = $('a:not(#' + $(this).attr('id') + '), :button:not(#' + $(this).attr('id') + '), :submit:not(#' + $(this).attr('id') + ')');
elements.attr('disabled', 'disabled').removeAttr('onclick');
});
});
How can I prevent this behaviour?
I just tested your first approach without JQuery, and it worked fine, i.e. disabling the submit button didn't prevent the form submission.
<form method="get">
<input type="text" name="textfield" value="a" />
<input type="submit" onclick="this.disabled=true">
</form>
Maybe you want to double check is there is anything else, e.g. JQuery, going on?
Maybe you could put a flag or something that it could remember what button it was clicked and if that flag exist, you can remove the onclick event on that postback-causing element. But I think this cannot be done in client side scripting alone, since once the page is submitted, all client side elements and scripts are refreshed.
Perhaps instead of making this a click function make it onmouseup so it fires after the click event has occured.
Here's a final version that worked - just overriding the form submit event rather than looking at any individual elements.
var submitted = false;
$(function() {
$('form').bind('submit', function() {
if (!submitted) {
submitted = true;
return true;
} else {
return false;
}
});
});
Thanks all for your suggestions.
<input type="button" onclick="executes second" />
$('input').click(function() { //this first }}
p.s. onclick="executes second" - cannot be removed (its __doPostBack)
try ...
$(document).ready(function(){
$("input").removeAttr("onclick");
$("input").click(function(){
// do first
my_first_function();
// do second
my_second_function();
return false;
});
});
Couldn't you just do something like:
< input type="button" onclick="do_something();" />
function do_something() {
// this first
// then second?
}}
My guess is the inline onclick handler cannot be removed as it has been output by ASP.NET. To solve this problem you need to override ASP.NET's doPostBack method to inject your function before the postback takes place. Try including the following function in your page somewhere and then use it to add your event handler:
Update: Just re-read and realised this answer slightly misses the mark - it basically allows you to fire events prior to postback, but not necessarily attached to the button's onclick handler.
var addToPostBack = function(func) {
var old__doPostBack = __doPostBack;
if (typeof __doPostBack != 'function') {
__doPostBack = func;
} else {
__doPostBack = function() {
func();
old__doPostBack.apply(this, arguments);
}
}
};
...
<input type="button" id="btn" onclick="..." />
...
addToPostBack(function() { alert("You're posting back!"); });
If you use jQuery the is no need to put onclick into the HTML:
$('input').click(function() {
//this first
something();
// this last
playSound();
});
Edit:
Just Remove the onclick attribute with jQuery:
$('input').removeAttr("onclick");
you could put it inside document ready or just attach it to your call
$('input').removeAttr("onclick").click(function() {...});