I need to select dynamic id using JQuery, and once I select it then I need to do some action on it. This is the HTML that I have:
<input id="content_photos_attributes_1355755712119_image" name="content[photos_attributes][1355755712119][image]" size="30" type="file">
Please note the id value, text is always the same however the number changes (I do not have control over that change).
What I need to do is to create on click for that element. This is what I got so far, and it is not working.
<script type="text/javascript">
jQuery.noConflict();
jQuery("input[id *= 'content_photos_attributes_']").click(function() {
alert("Image deletion is clicked");
});
</script>
It really makes no difference whether I select that element by ID or by its name.
As i see this it should be in the $(document).ready(); handler and its a dynamic id so for this you have to use .on() handler to select the selector:
$(document).ready(function(){
jQuery(document).on('click', 'input[id^="content_photos_attributes_"]', function() {
alert("Image deletion is clicked");
});
});
try this and see if helps.
Try the starts with ^= selector:
$("input[id^='content_photos_attributes_']").click(function() {
alert("Image deletion is clicked");
});
Also you don't need the quotes inside the attribute comparison unless you're having the dot '.' character. This would also work:
$("input[id^=content_photos_attributes_]").click(function() {
alert("Image deletion is clicked");
});
Related
I am having some difficulties in getting text from a url and assigning the retrieved data into a form input field. When I use a div the code works but i want to use an input text field.
Below is my jQuery:
<script>
$(document).ready(function(){
$("#torefresh").load("myurl.php");
setInterval(function() {
$("#torefresh").load("myurl.php");
}, 100);
});
</script>
This is my html:
<div data-value="" id='torefresh'></div>
It works with the above div.
<input type='text' readonly="readonly" name='torefresh' id='torefresh'>
But i want the input text solution
Thanks in advance
From the jQuery .load() documentation:
jQuery uses the browser's .innerHTML property to parse the retrieved document and insert it into the current document.
However, the input element doesn't have an innerHTML property - you must use the value property (or .val() in jQuery-ese). Therefore, you cannot use .load() to do this.
Since .load() is just a shorthand for $.ajax(), you can use that instead.
Try:
<script>
$(document).ready(function(){
get_new_data();
setInterval(function() {
get_new_data();
}, 100);
});
function get_new_data(){
$.ajax({
type: 'get',
url: 'myurl.php'
}).done((retn) => {
$('#torefresh').val(retn);
});
}
</script>
How can I detect that a click event is fired on any checkbox on a page using jQuery? Please also note that on page load, may be checkbox(s) is/are not created but could be created on request. So HTML DOM will be updated in that fashion.
$(":checkbox").on("click", function(){
// your work
} );
also see bind
delegate
live
reference On
TRy this
$( document ).on( "click", "input[type='checkbox']", function() {
alert( "check box clicked" );
});
$(":checkbox").on("click", function(){
// ALL YOUR STUFF
} )
Simply create a function checkboxClick() as -
function checkboxClick() {
// ---
// your code goes here
// ...
}
Now for every checkbox (even when you add them dynamically) add attribute onclick like
<input type="checkbox" onclick="javascript:checkboxClick();" class="checkbox" />
Note : Since javascript works on existing dom elements, even if you do something like jQuery(".checkbox").click(function() {...});, it wont work on dynamicically added elements
$(document).on('click', ':checkbox', function() {
//your code
});
I'm trying to get the value of a mobile number textbox to validate its input value using angular.js. I'm a newbie in using angular.js and not so sure how to implement those events and put some javascript to validate or manipulate the form inputs on my html code.
This is my HTML:
<div>
<label for="mobile_number">Mobile Number</label>
<input type="text" id="mobile_number" placeholder="+639178983214" required
ngcontroller="RegisterDataController" ng-keydown="keydown">
</div>
And my controller:
function RegisterDataController($scope, $element) {
console.log('register data controller');
console.log($element);
$scope.keydown = function(keyEvent) {
console.log('keydown -'+keyEvent);
};
}
I'm not sure how to use the keydown event in angular.js, I also searched how to properly use it. And can i validate my inputs on the directives? Or should I use a controller like what I've done to use the events like keydown or keypress?
Update:
ngKeypress, ngKeydown and ngKeyup are now part of AngularJS.
<!-- you can, for example, specify an expression to evaluate -->
<input ng-keypress="count = count + 1" ng-init="count=0">
<!-- or call a controller/directive method and pass $event as parameter.
With access to $event you can now do stuff like
finding which key was pressed -->
<input ng-keypress="changed($event)">
Read more here:
https://docs.angularjs.org/api/ng/directive/ngKeypress
https://docs.angularjs.org/api/ng/directive/ngKeydown
https://docs.angularjs.org/api/ng/directive/ngKeyup
Earlier solutions:
Solution 1: Use ng-change with ng-model
<input type="text" placeholder="+639178983214" ng-model="mobileNumber"
ng-controller="RegisterDataController" ng-change="keydown()">
JS:
function RegisterDataController($scope) {
$scope.keydown = function() {
/* validate $scope.mobileNumber here*/
};
}
Solution 2. Use $watch
<input type="text" placeholder="+639178983214" ng-model="mobileNumber"
ng-controller="RegisterDataController">
JS:
$scope.$watch("mobileNumber", function(newValue, oldValue) {
/* change noticed */
});
You were on the right track with your "ng-keydown" attribute on the input, but you missed a simple step. Just because you put the ng-keydown attribute there, doesn't mean angular knows what to do with it. That's where "directives" come into play. You used the attribute correctly, but you now need to write a directive that will tell angular what to do when it sees that attribute on an html element.
The following is an example of how you would do that. We'll rename the directive from ng-keydown to on-keydown (to avoid breaking the "best practice" found here):
var mod = angular.module('mydirectives');
mod.directive('onKeydown', function() {
return {
restrict: 'A',
link: function(scope, elem, attrs) {
// this next line will convert the string
// function name into an actual function
var functionToCall = scope.$eval(attrs.ngKeydown);
elem.on('keydown', function(e){
// on the keydown event, call my function
// and pass it the keycode of the key
// that was pressed
// ex: if ENTER was pressed, e.which == 13
functionToCall(e.which);
});
}
};
});
The directive simple tells angular that when it sees an HTML attribute called "ng-keydown", it should listen to the element that has that attribute and call whatever function is passed to it. In the html you would have the following:
<input type="text" on-keydown="onKeydown">
And then in your controller (just like you already had), you would add a function to your controller's scope that is called "onKeydown", like so:
$scope.onKeydown = function(keycode){
// do something with the keycode
}
Hopefully that helps either you or someone else who wants to know
You can checkout Angular UI # http://angular-ui.github.io/ui-utils/ which provide details event handle callback function for detecting keydown,keyup,keypress
(also Enter key, backspace key, alter key ,control key)
<textarea ui-keydown="{27:'keydownCallback($event)'}"></textarea>
<textarea ui-keypress="{13:'keypressCallback($event)'}"></textarea>
<textarea ui-keydown="{'enter alt-space':'keypressCallback($event)'}"> </textarea>
<textarea ui-keyup="{'enter':'keypressCallback($event)'}"> </textarea>
JavaScript code using ng-controller:
$scope.checkkey = function (event) {
alert(event.keyCode); //this will show the ASCII value of the key pressed
}
In HTML:
<input type="text" ng-keypress="checkkey($event)" />
You can now place your checks and other conditions using the keyCode method.
Newbie to jQuery here. I have a check box that is dynamically added through the following code in jQuery:
.html("<input type='checkbox' class='checkbox' value='7.5'>");
I want to be able to eventually call a function if a checkbox is clicked. I have tried using these two variants of code:
for the class checkbox:
$(".checkbox").live('click', function() {
alert('test');
});
or to call all checkboxes:
$(":checkbox").live('click', function() {
alert('test');
});
This isn't working at all. Any ideas?
Much appreciated!
.live() is deprecated. Use the event delegation syntax:
$(document).on('change', 'input[type="checkbox"]', function(e) {
alert(e);
});
Replace document with the selector of the closest parent element that's present when you bind the event handler. I'd also suggest not to use :checkbox, as it's a non-native selector and will be slower than input[type="checkbox"]
JS:
$(document).ready(function(){
$("#loader").load("external.html");
$("#buttonClickText").live('click', function() {
$("#buttonClickText").text("Text changed after button click.");
});
// MYSTERY FUNCTION
$("#pageLoadText").text("Text changed after external HTML was loaded.");
//
});
External HTML:
<div id="buttonClickText">
This text changes when clicked.
</div>
<div id="pageLoadText">
This text should have changed when external HTML was loaded, but didn't.
</div>
Main HTML (just showing the relevant tag):
<div id="loader"></div>
Also, I know .live() is deprecated for jQuery 1.7+, I'm guessing the solution will be similar using .on()
Thanks!
from http://api.jquery.com/load/:
This method is the simplest way to fetch data from the server. It is
roughly equivalent to $.get(url, data, success) except that it is a
method rather than global function and it has an implicit callback
function. When a successful response is detected (i.e. when textStatus
is "success" or "notmodified"), .load() sets the HTML contents of the
matched element to the returned data.
Just pass a function as the second argument.
$('#result').load('ajax/test.html', function() {
alert('Load was performed.');
});
below is the solution for the issue:
$(document).ready(function(){
$("#loader").load("external.html", function()
{
$("#pageLoadText").text("Text changed after external HTML was loaded.");
}
);
$("#buttonClickText").live('click', function() {
$("#buttonClickText").text("Text changed after button click.");
});
});