I have a radiobuttongroup where one button is checked upon pageload, is it possible to get some kind of onClick event to fire from that radiobutton upon pageload if it's checked?
I dont whant to use some kind onLoad JavaScript to check it.
$('.radioButton:checked').live('click', function(){
// do something
});
If I understood what you need, you could try something like this (jQuery):
if($('.radioButton').is(':checked')) { $('.whatever_must_be_clicked).click(); }
for the first selector, you can also use the :radio selector $(':radio') or $('input:radio')
Related
I want to have a pair of radio buttons sitting over an HTML table so that whenever the rb is clicked it will cause the table to rebuild (rebuild the page) by submitting a different URL variable. Is there a way to do this without having to build a form and click a submit button? I'm pretty new to this stuff so please keep any answers basic and/or show samples of code. Thanks!
Html is a Markup Language it will not do the logic for you. that way javascript is there .
<input id="gotogoogle" type="radio" name="name" value="google" checked>
<script>
var radiob = document.getElementById("gotogoogle");
radiob.addEventListener("change", function() {
if(radiob.value == "google")
{
document.location = "http:\\www.gooogle.com"
}
});
</script>
Yes there is, you can use Javascript event binding to help you achieve this. This will get you started. This adds an event binding so when you "change" or click the radio buttons, it can fire an event off.
From here you'd need to research how to rebuild the table data in JS if you don't already know.
$("input[#name='nameofinput']").change(function(){
// Do something interesting here
});
I created a button
<button type="button" ng-click="chooseOptions()" id="chooseOptionButton" ng-bind="whatToDisplay()"></button>
Which shows a <div ng-show=appearOnChoice>on click and toggles back when clicking again!
$scope.chooseOptions=function(){
$scope.appearOnChoice=!$scope.appearOnChoice;
}
However, I also want this element to hide again, when the user clicks anywhere outside this div
element. How can I do this? I need strictly stick with AngularJS and not use jQuery.
Hope you can help me with that.
EDIT: I tried to adapt some of the events of bootstrap datepicker, but I am not sure how to apply it properly
$scope.$on('datepicker.focus', focusElement);
scope.$watch('isOpen', function(value) {
if (value) {
scope.$broadcast('datepicker.focus');
scope.position = appendToBody ? $position.offset(element) : $position.position(element);
scope.position.top = scope.position.top + element.prop('offsetHeight');
$document.bind('click', documentClickBind);
} else {
$document.unbind('click', documentClickBind);
}
});
var focusElement = function() {
$timeout(function() {
self.element[0].focus();
}, 0 , false);
};
How can I adapt this to my case?!
I think that you dont have to write a function, you can use ng-init to create a model, ng-show to show/hide the div based on the value of the model, and with ng-click change the value of the model. See example below:
var myapp = angular.module('myapp',[]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
<div ng-init="showDiv = true;" >
<div ng-show="showDiv"> SHOOOOOOOOW </div>
<button ng-click="showDiv = !showDiv;">Click me</button>
</div>
</div>
You can set the model value to be false when the user is clicking everywhere else, and set it again to true when it clicks the button. If you made a fiddle I can help you easier :)
If the DIV has focus, then you can use the ng-blur directive on the DIV to run set appearOnChoice to false. However, if the DIV does not already have focus (which it won't if you are depending on the button to make it visible), you will need to manipulate the DOM in your code (to provide focus) OR create a custom directive to set focus so that the ng-blur directive will work. Check out possibilities for that with this link.
alternatively, you can add an ng-click directive to every clickable object on your view that will hide the DIV when fired. But I don't really think that's the best way to go...
The easiest and cleanest way to handle the click away is to register and event on the document that will remove the element when anything other than it, or its children, are clicked.
For an example of a service that does this see GitHub EnzeyNet/Services
Sorry about the lack of documentation there but after injecting the service you would use it like this.
var divElem
nzService.registerClickAwayAction(function() {
divElem.remove();
}, divElem);
I simply solved it by using a ui bootstrap dropdown. This comes along with an is-open option and closes on click outside.
Link to form
The form can be found at the link above.
Up until this morning the radio buttons and the form had been working as expected, however now users can't change their answer once they've picked from one of the two radio buttons even though they use the same input name. Using $("#volunteer-form input:radio[name='gender']:checked").val() I've found that the value is being correctly set and that the two buttons are still linked by a common name. Also, it appears possible to switch between the two using a bit of jQuery, like so:
$("#volunteer-form input[name=gender][value=male]").prop('checked', true);
Any ideas?
its because of your javascript block here:
$(document).ready(function() {
$('.inline').fancybox({
'maxWidth': 600
});
$('.form').click(function(event){
event.preventDefault();
});
});
when you are clicking on the radio button inside the form your preventDefault is stopping the change of radiobutton state ... or maybe you already knew that.
What is the intended purpose of including the preventDefault where you have it?
I am using the drop down in webpage and also the submit button to submit the selected value of the drop down.but i don't want to use the submit button. when i select the value from drop down it should re direct the page without using the submit button. can anyone post the code... i was using select and option tag.
See Navigational pulldown menus in HTML for a comprehensive guide, but in a nutshell:
Bind an onchange JavaScript event handler to the select element that calls the forms submit() method
Don't do this, it is a horrible UI.
You need to use JavaScript to perform this operation.
For example, in jQuery, you could do something similar to:
$(function() {
$('#myDropDownId').change(function() {
$('#formId').submit();
});
});
JQuery:
$('#selectId').change(function(){
if ($(this).val())
$(this).closest('form').submit();
});
If you don't want to use jQuery, you can do this with Javascript. Change your select box to look like this.
<select name="NAME" onchange="this.form.submit();">
I have a input text field which is filled with the url of an image using a jQuery function.
How do I use the "onChange" event of the input to run the jQuery function?
If you update field by JavaScript, than after changing value just call on it change()
$('#myId').val('new_url').change();
Try this -
$('#myId').trigger('change');
Put it in any function where you are changing the url in the textbox.
try this :
$("#myId").trigger('event_name')
where event_name is the event you've bound your checker function, such as keyUp or change
I can't imagine the problem lies with .change() perhaps somewhere else in your code, I have just tested and the event will get fired if I copy and paste, or if I type some new text (with both normal and onscreen keyboard).
The only time it didn't seem to trigger was when I dragged some text clipping from the desktop to the input box but this was to do with it being highlighted and sure enough when the input box lost focus the event triggered (I can't think of any other use cases)
You can do something like below using the blur() or focusout() event which essentially I believe is the change event
function foo(e) {
alert(e.type + ' triggered');
}
$('input').blur(function(e) {
$t = $(this);
if ($t.data('oVal') != $t.val()) {
$t.data('oVal', $t.val());
foo(e);
}
})