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.
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>
http://jsbin.com/OYodAvo/1/edit
Today I was wondering if there's a way to grab a div's class that's already been clicked and mirror the class name to a textbox and set it as the value.
If another div has been clicked, replace it with that one.
Is there anyway to do this in JQuery?
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Grab Element's DIV</title>
<meta charset='utf-8'>
<meta name='viewport' content='initial-scale=1.0'>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
</head>
<body>
<div class="container">
<center>
<p>
Grab DIV Class Onclick: <input type="text" id="divclass" placeholder="show class name here" />
</p>
<div class="wrapper">
<div class="im-red"></div>
<div class="blue-foo"></div>
<div class="green-beans"></div>
</div>
</center>
</div>
</body>
</html>
JavaScript:
$(function() {
$(".wrapper div").click(function() {
});
});
I think you are looking for:
$(function() {
$(".wrapper div").click(function() {
$("#divclass").val($(this).attr('class'));
});
});
Live Demo
I'd suggest:
$('.wrapper div').click(function(){
$('#divclass').val(this.className);
});
JS Fiddle demo.
References:
val().
I'm making a prototype for a chat client. At this stage, I'm just learning how to append the user's input to the text area above. However, no matter what I do, it doesn't seem to work. The only time it actually functioned correctly was in jsfiddle, but I can't get it to work when I load my actual HTML page.
It's worth mentioning that, at the advice of a tutorial, I already tried placing the script tag for my JQuery code at the end of the body instead of in the head. The tutorial said that it was essential for all elements be allowed to load before the JQuery code, so that's the way it had to be. As you can see below, the script tags are currently in the head, but that doesn't work either.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="ChatStyle.css"/>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="Chat.js"></script>
<title>
Chat Client Prototype
</title>
</head>
<body>
<div ID="topBar">
</div>
<h2 ID="header">Chat Client</h2>
<div ID="chatBox">
<div ID="topBar2">
</div>
<div ID="header2">
Chat Client
</div>
<textarea ID="textArea" name="textArea">
</textarea>
<form ID="in">
<input ID="textField" type="text">
<button ID="send" type="button" name="Send" value="send">Send</button>
</form>
</div>
</body>
</html>
Chat.js
function sendText(){
$(document).ready(function () {
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
});
});
}
Don't wrap document ready handler inside sendText() function, use that instead:
$(document).ready(function () {
$('#send').click(sendText);
});
function sendText(){
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
}
Well, it work if you change your button to submit type and bind the event to form submit:
$('#in').submit(function () {
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
return false;
});
http://jsfiddle.net/AztSB/
This seems to work for me:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="ChatStyle.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').html($('#textArea').html() + text);
$('#textField').val('');
});
});
</script>
<title>
Chat Client Prototype
</title>
</head>
<body>
<div ID="topBar">
</div>
<h2 ID="header">Chat Client</h2>
<div ID="chatBox">
<div ID="topBar2">
</div>
<div ID="header2">
Chat Client
</div>
<textarea ID="textArea" name="textArea"></textarea>
<form ID="in">
<input ID="textField" type="text">
<input ID="send" type="button" name="Send" value="send"/>
</form>
</div>
</body>
</html>
Just don't wrap it in your function sendText:
$(document).ready(function () {
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
});
});
You dont need to put it in a function. You can just leave it to Jquery :)
Your stuff in a FIDDLE to see
Jquery:
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').append(text);
$('#textField').val('');
});
UPDATE
Use append() to update the textarea with new text!
jQuery is doing something strange for me: it just doesn't work and hides the div only for split a second. What am I doing wrong?
The code in question, as simple as can be.
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Experiment</title>
<script type="text/javascript"
src="http://code.jquery.com/jquery.min.js"></script>
</head>
<body>
<script>
function doHiding() {
$("div.thread").each(function() {
$(this).hide();
});
}
</script>
Hide
<div class="thread">I like trains.</div>
</body>
</html>
I am using Chromium on Linux. I see the div dissapear for split a second, but it appears again immediately.
function doHiding() {
$("div.thread").each(function() {
$(this).hide();
});
return false;
}
it is not hiding again it is the page that is being refreshed because href="" links to same page
NB: i guess you used onClick="doHiding()" for the sake of demo only (otherwise handle your event within jquery scope)
You could try changing
<a href="" onClick="doHiding()">
into
<a href="#" onClick="doHiding()">
See: http://jsfiddle.net/aVNuf/
You can try the click event in jquery instead doing it inline.
http://jsbin.com/iseref/1/edit
html:
Hide
<div class="thread">I like trains.</div>
jQuery:
$(function(){
$('a').on('click', function(e){
e.preventDefault();
doHiding();
});
});
function doHiding() {
$("div.thread").each(function() {
$(this).hide();
});
}
try
href="#"
its work for this case