i have make many search in getting current element
in jQuery :$(this)
but in Angular J S 1.x i haven't found it here what i have do angular.element(this) but it's not correct
here is my code i like to get current target element
<html>
<head>
<style>
.error{
color:red;
}
</style>
</head>
<body>
<div ng-app="" ng-controller="eventController">
<h2>AngularJS $event example</h2>
<input type="text" ng-change="handleChange($event)" ng-model="test" value="My Text" class="testtt" >
</div>
<script>
function eventController($scope) {
$scope.handleChange = function(event) {
var classname = event.target.currentTarget.className
console.log(classname);
}
}
</script>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
I think you should look into ng-class for what you are trying to do. If you really need direct access to an element, use a directive. The directives link function gets the element at initialisation time.
i have found the solution to my problem by using javascript
document.activeElement
Related
I tried to do a simple slider but that did not work, so i am copying one of code cademy, but it still qont work.
I have used 4 different browsers all have the same problem, i can type in the box but wont post, and show below.
PLEASE HELP?
Html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link type='text/css' href="stylesheet.css" rel="stylesheet">
</head>
<body>
<div class="container">
<form>
<div class="form-group">
<textarea class="form-control status-box" rows="2" placeholder="What's on your mind?"></textarea>
</div>
</form>
<div class="button-group pull-right">
<p class="counter">140</p>
Post
</div>
<ul class="posts">
</ul>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
AMMENDED
script.js
$(document).ready() {
$('.btn').click(function() {
var post = $('.status-box').val()
$('<li>').text(post).prependTo('posts');
});
};
THANK YOU ALL, this has been corrected and it now works :)
val is a jQuery function ... you need () to invoke it so it returns the value of element. As your code stands now you are trying to set a function object as text.
You are also using incorrect selectors $('btn') and $('status-box') which are looking for non existent tags <btn> and <status-box>.
Add dot prefix for both to represent class:
$('.btn') and $('.status-box')
As well as what's been mentioned in the other answer, I don't believe your main method is ever called. If it isn't called then the event handler isn't going to be attached.
The main method would be easier set up via jquery, so instead of:
var main = function() {
$('btn').click(function() {
var post = $('status-box').val
$('<li>').text(post).prependTo('.posts');
});
}
Just do:
$(function() {
$('btn').click(function() {
var post = $('status-box').val
$('<li>').text(post).prependTo('.posts');
});
});
Alternatively you could adjust your body tag as follows:
<body onload="main()">
I would like to know how to access a parent element when it doesn't have any identifier. Typically I want to do the following:
<td>
<a title="mySweetTitle"/>
</td>
Access the "td" using his "a" child to modify his properties.
you should use parentElement property https://developer.mozilla.org/en/docs/Web/API/Node/parentElement
example:
document.getElementById('your_id').parentElement
in your case you can use
document.getElementsByTagName('a')[0].parentElement
Maybe this could help you:
$("a").bind("click" , function(){
var parent = $(this).parent();
});
what you are looking for ist $(this).parent() look at my example
i hope it helps
$(document).ready(function() {
$('.test').on('click', function() {
$(this).parent().append("<button>test2</button>");
});
});
<!doctype HTML>
<html>
<head>
<title>Test Umgebung</title>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<div>
<button class="test">test</button>
</div>
</body>
</html>
Here is the HTML:
<html>
<head>
<Script type = "text/javascript" src = "CprMdlrSrch.js"></Script>
<link type="text/css"rel="stylesheet"href="CprMdlrSrch.css"/>
</head>
<body>
<div id="main_box">
<p id="instructions"><strong>Please enter a part number to search.</strong></p>
<input id="part_num_search" type="text" name="searchPhrase">
<button id="search_button" type="button" value="button"> <strong>Search</strong></button>
<div id="results"></div>
<script type="text/javascript">
</div>
</body>
</html>
Here is the Javascript:
$(document).ready(function(){
$("#search_button").toggle(function() {
$("#part_num_search").fadeIn("slow");
},
$("#part_num_search").fadeOut("slow");
});
});
I am just unsure what I am doing wrong. I am really just trying to out the button to make sure I am on the right track.
thanks!
-Dustin
I'm not sure you understand how to use the toggle command. Please check out the API documentation: http://api.jquery.com/toggle/
For fade toggling, try .fadeToggle(), which started becoming available since JQuery 1.4.4.
http://api.jquery.com/fadeToggle/
Try something like this:
$(document).ready(function(){
$("#search_button").click(function() {
$("#part_num_search").fadeToggle("slow");
});
});
You'll be better served using http://api.jquery.com/fadetoggle/.
$("#search_button").click(function() {
$("#part_num_search").fadeToggle("slow");
});
In the following code, how can I move the <div class="move">I was moved to the parent.</div> after the parent of the element I click, when I click Add New.
I have everything right, but I cannot do the part where I need to move it after() the parent.
Can you please help?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Side bar poll thingy</title>
<script type="text/javascript" src="http://localhost/site/scripts/jQueryCore.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.add').click(function() {
$("#container").find('.flag, .edit, .delete').remove();
$(this).parent("div").after(".move");
});
});
</script>
</head>
<body>
<div id="container">
<div class="h1" data-id="1">Teachers <span class="add" data-id="US01">Add New</span></div>
<div class="h2" data-id="2">Who is your favorite Math teacher? <span class="add" data-id="US02">Add New</span></div>
<br>
<div class="h1" data-id="8">Restaurants <span class="add" data-id="US10">Add New</span></div>
<div class="h2" data-id="9">Which is your favourtie restaurant in town? <span class="add" data-id="US20">Add New</span></div>
<div class="move">I was moved to the parent.</div>
</div>
</body>
</html>
.after() doesn't accept selectors, currently you are inserting .move string after the selected element. You can use .insertAfter() method instead:
$(".move").insertAfter(this.parentNode);
http://jsfiddle.net/RYzpG/
try this fiddle http://jsfiddle.net/QP3MZ/
$(document).ready(function () {
$('.add').click(function () {
$("#container").find('.flag, .edit, .delete').remove();
var $move = $('#container .move');
$(this).parent("div").after($move);
});
});
This code should work.
$(document).ready(function() {
$('.add').click(function(e) {
e.preventDefault();
$("#container").find('.flag, .edit, .delete').remove();
$('.move').insertAfter($(this).parent());
//Or (Note we have to pass a jQuery element inside after, if we pass string then it will copy the string instead)
//$(this).parent('div').after($('.move'));
});
});
Also here is a jsfiddle. The reason why yours wasn't working is you are passing a string inside the .after, which jQuery would treat as an HTML string. You had to pass a jQuery element or DOM element. See it here.
I have the following code
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div class="full-details-box" name="full_details_box" id="full-details-box"></div>
<hr />
<script type='text/javascript'>
function show_3136(){
document.full_details_box.style.display='block';
}
show_3136();
</script>
</body>
</html>
I get the error: window.document.full_details_box is undefined
I get the error for the line:
document.full_details_box.style.display='block';
But I do have a <div> element with the name full_details_box, so why the error?
Don't use the name attribute for divs. It doesn't even exist. Use the id, and:
document.getElementById('full-details-box')...
function show_3136(){
document.getElementById('full_details_box').style.display='block';
}
To access this element, use getElementById
function show_3136() {
document.getElementById("full-details-box").style.display = "block";
}
You could do a
document.getElementById("full-details-box").style.display='block';
Just to add to your confusion - you may have been thinking about form fields
All of these will work on a form field (the first only if you wrap the field in form tags)
<html>
<head>
<script type='text/javascript'>
function showFormField(){
document.forms[0].full_details_boxName.style.display='block';
// or document.forms[0].elements["full_details_boxName"].style.display='block';
}
function showNamedField(){
document.getElementsByName("full_details_boxName")[0].style.display='block';
}
function showFieldById(){
document.getElementsById("full_details_boxID").style.display='block';
}
function showFieldByClassName(){ // does not work in all IE browsers
document.getElementsByClassName("full_details_boxCLASS")[0].style.display='block';
}
</script>
</head>
<body>
<form>
<input class="full-details-boxCLASS" name="full_details_boxName" id="full-details-boxID"/>
</form>
</body>
</html>
for a DIV you will use ID or CLASS, but not name
HTML:
<div id="full-details-box">
Just some test content
</div>
<hr />
CSS:
div#full-details-box {
display:none;
}
JS:
function show_3136(){
document.getElementById("full-details-box").style.display = "block";
}
show_3136();
For a working example, see jsFiddle