Why does this not really work?
I have a field test.
But when I click on the <p> of child1 it will not affect the child2 <p>.
<div ng-init="test=false">
<div id="child1">
<p ng-click="test=!test">
Click!
</p>
</div>
<div id="child2">
<p ng-if="test">
Clicked..
</p>
</div>
</div>
You need to define an angular module in JS and assign it using the ng-app directive. Like this:
<!DOCTYPE html>
<html ng-app="sample">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>
angular.module('sample', []);
</script>
</head>
<body>
<div ng-init="test=false">
<div id="child1">
<p ng-click="test=!test">
Click!
</p>
</div>
<div id="child2">
<p ng-if="test">
Clicked..
</p>
</div>
</div>
</body>
</html>
Every directive creates its own scope.
So,if you want to access the variable/object in parent scope, you need use $parent
<div ng-init="test=false">
<div id="child1">
<p ng-click="$parent.test=!$parent.test">
Click!
</p>
</div>
<div id="child2">
<p ng-if="$parent.test">
Clicked..
</p>
</div>
</div>
Related
I'm trying to select an element by clicking on its grand grand grand child. But I can't find the way without using parent().parent() etc.
General HTML
I have an HTML divided in pages
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
Inner page HTML
<div class="page">
<div class="">
<div class="to_move">
<div class="">
<div class="clicked_element"></div>
</div>
</div>
</div>
</div>
When clicking clicked_element I want to copy to_move class element to previous page.
The inner structure of the page element is not always the same, that's why I want to avoid using multiple parent().
I tried
$(this).parentsUntil('.page').html()
But I get only clicked_element parent.
$(this).parents('.page').html()
With this parents() option I get undefined.
$(this).closest('.page').html()
Again I get undefined.
Any clues welcome.
You could very well use closest :
$('body').on('click', '.clicked_element', function() {
$(this).closest('.page').clone().appendTo('body')
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<div class="page">
<div class="">
<div class="to_move">
<div class="">
<div class="clicked_element">Click me to copy my whole class</div>
</div>
</div>
</div>
</div>
$(this).parents('.page') should work. I'm guessing you're binding the the wrong event. The key to this answer is not the selector ($(this).parents...) but the event binding ($(".clicked_element").click...). In your case, I guess that this is not the element you were looking for because the event binding is probably wrong.
$(".clicked_element").click(function() {
alert($(this).parents('.page').attr('printme'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="page" printme="You found me!">
<div class="">
<div class="to_move">
<div class="">
<div class="clicked_element" style="width: 250px; height:250px; background-color: blue">
</div>
</div>
</div>
</div>
</div>
Hi I am doing a Vanilla JS practice and I'd like to remove a div whenever I click on a span saying"continue". However, I got stuck at the JS coding.
EACH DIV HAS THE CLASSES one, two and three respectively.
here's my code
HTML:
<body>
<div class="container">
<div class="one">
<p class="card" id="test"><span class="texta">Hello<br><span class="next">Continue</span><span></p>
</div>
<div class="two">
<p class="card" id="test"><span class="texta">Hello<br><span class="next">Continue</span><span></p>
</div>
<div class="three">
<p class="card"><span class="texta">Hello<br><span class="next" onClick="move()">Continue</span><span></p>
</div>
</div>
</body>
JS:
function move(){
document.getElementsByClassName("three")[0].style="opacity:0";
}
I'm trying to do the effect using as much JS as possible, and as little html as possible. Apart from coding each and every div by getElementsByClassName(""), is there a more efficient way to go about it?
Also, I thought I saw event.target syntax somewhere online before and I wonder if it could be applied in this context?
Thanks for any help rendered!! :)
Here's a more dynamic solution. Also in your HTML-Code are some mistakes (missing '/' in an ending span; identical id's).
function move(el) {
el.closest('div').style = 'display: none;'
}
<body>
<div class="container">
<div class="one">
<p class="card">
<span class="texta">Hello<br>
<span class="next" onClick="move(this)">Continue</span>
</span>
</p>
</div>
<div class="two">
<p class="card">
<span class="texta">Hello<br>
<span class="next" onClick="move(this)">Continue</span>
</span>
</p>
</div>
<div class="three">
<p class="card">
<span class="texta">Hello<br>
<span class="next" onClick="move(this)">Continue</span>
</span>
</p>
</div>
</div>
</body>
function move(className){
document.getElementsByClassName(className)[0].style="display:none";
}
<body>
<div class="container">
<div class="one">
<p class="card" id="test"><span class="texta">Hello1<br><span class="next" onClick="move('one')">Continue</span><span></p>
</div>
<div class="two">
<p class="card" id="test"><span class="texta">Hello2<br><span class="next" onClick="move('two')">Continue</span><span></p>
</div>
<div class="three">
<p class="card"><span class="texta">Hello3<br><span class="next" onClick="move('three')">Continue</span><span></p>
</div>
</div>
</body>
Can you please check you want this type of thing or not?
For some reason , I could not use ng-include in my main page..
Right now i need an alternative solution to ng-include as my product environment(Microsoft Excel Online is not initializing having ng-include on the main page).
Also, I dont want to use ng-view as i have to stick to single route.
FYI, My ng-include url will point to a html template containing its own controller and its scope variables.
Main Page.html
<body ng-app="myapp">
<div class="container-main" ng-controller="MainCtrl">
<div class="container-content">
<div ng-include="content.url"> </div>
</div>
</div>
</body>
controller.js
angular.module('myapp').controller('MainCtrl', function ($scope) {
$scope.content = { url : 'views/templates/mycontent.html'};
});
views/templates/mycontent.html:
<div class="flat-footer" ng-controller="FooterCtrl">
<div class="icon-home" ng-click="settings=false;help=false;gohome()">
</div>
<div class="icon-question" ng-click="settings=false;help=!help;showHelpPreview()" ng-init="help=false">
<div class="arrow-down" ng-show="help"/>
</div>
<div class="icon-cog" ng-init="settings=false" ng-click="settings=!settings;help=false" ng-show="isloggedIn">
<div class="arrow-down" ng-show="settings" />
</div>
<div class="settings-list" ng-show="settings">
<div class="pull-right icon-cancel-circle" ng-click="settings=!settings;help=false"/>
<button type="button" class="btn btn-primary logout" ng-click="settings=!settings;help=false;logout()">Logout</button>
</div>
<div class="help-option" ng-show="help">
<div class="pull-right icon-cancel-circle" ng-click="help=!help;settings=false"/>
<div>
<h1 class="title">//showHelpForUsecase.name//</h1>
<p class="title-description">//showHelpForUsecase.description// </p>
<dl>
<dt class="welcome-title"> //showHelpForUsecase.subtitle// </dt>
<dd class="welcome-definition"> //showHelpForUsecase.subdescription//</dd>
</dl>
</div>
<div class="footer-help-info">
<p class="more-info">More Info</p>
</div>
<div class="help-buttons-group">
<button type="button" class="btn btn-default help-go-back-btn" ng-click="help=!help;settings=false">Back</button>
</div>
</div>
</div>
I want to remove the ng-include in the main page and load the mycontent.html into "div.container-content" element on loading.
Note : Using bind-html-unsafe attribute instead of ng-include not compiling the html template and just binds the html content and resulting inner html content is not bound to its controller at all.
Please help me with a solution for this.
Regards,
Ram
bind-html-unsafe attribute is the possible workaround for ng-include.
Main Page.html
<body ng-app="myapp">
<div class="container-main" ng-controller="MainCtrl">
<div class="container-content">
<div bind-html-unsafe="content"> </div>
</div>
</div>
</body>
angular.module('myapp').controller('MainCtrl', function ($scope) {
$scope.content = { url : 'views/templates/mycontent.html'};
$http.get('views/templates/mycontent.html', {cache: $templateCache}).success(function(data) {
var newScope = $scope.$new();
$scope.content = $compile(data)(newScope);
});
});
I'm fairly inexperienced with JS/Jquery in general, so this could be something simple I'm missing. I am trying to hide some text on a page, then enable it via a toggle link. This is the JS being used. The top one for "Attendence" works fine, but the one for "Description" does not hide nor toggle the text. I basically copy/pasted description from attendance, so I'm not sure why it's not working.
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".attend_list").hide();
$(".attend_toggle").click(function()
{
$(this).parent().next('.attend_list').toggle();
});
$(".description_text").hide();
$(".description_toggle").click(function()
{
$(this).parent().next('.description_text').toggle();
});
});
</script>
This is the relevant HTML that is generated for each.
Attendance
<div id="attending10" class="membersAttending">
<div style="clear: both;"></div>
<div id="membertoggle10">
<p class="attend_toggle">
Toggle Attendance
</p>
<div style="clear: both;"></div>
</div>
<p class="attend_list">
test - Yes<br />
</p>
</div>
Description
<div id="description10" class="description">
<div style="clear: both;"></div>
<div id="descriptiontoggle10">
<p class="description_toggle">
Description
</p>
<div style="clear: both;"></div>
</div>
<p class="description_text">
<p>Test</p>
</p>
</div>
The problem is in your HTML not your jQuery
You are missing a </div> and you have a paragraph inside a paragraph.
<div id="attending10" class="membersAttending">
<div style="clear: both;"></div>
<div id="membertoggle10">
<p class="attend_toggle">
Toggle Attendance
</p>
<div style="clear: both;"></div>
</div>
<p class="attend_list">
test - Yes<br />
</p>
</div> <!--- this was missing -->
<div id="description10" class="description">
<div style="clear: both;"></div>
<div id="descriptiontoggle10">
<p class="description_toggle">
Description
</p>
<div style="clear: both;"></div>
</div>
<p class="description_text">
Test <!--- this was a p in a p-->
</p>
</div>
Working demo http://jsfiddle.net/qLPEw/
Also (not part of the problem) if you create an event that does something to an element, and it needs actioning on load, trigger that event instead of writing more lines of jQuery.
jQuery(document).ready(function($) {
$(".attend_toggle").click(function(){
$(this).parent().next('.attend_list').toggle();
}).click(); // trigger the bound function on load
$(".description_toggle").click(function(){
$(this).parent().next('.description_text').toggle();
}).click(); // trigger the bound function on load
});
Though, I would hide those with CSS instead if they are meant to be hidden when the user first looks at the page.
Majorly stuck here and would love some help. I am trying migrate the hidden div content of a particular topic to a separate area when it's specific title is clicked. At the minute I can get the content to migrate but instead of the specific topic content it just cycles through the content upon clicking.
Sorry for my poor Title, I'm struggling to define my exact problem. Please change if you feel you can do better.
http://jsfiddle.net/vBCs5/1/
Clicking the grey subtitles migrates the content.
Thank you in advance.
Jquery:
$(document).ready(function() {
$(".freemarker-wrap div").hide();
$(".test").click(function () {
$(".freemarker").each(function () {
var working = $(this).contents();
var ref = $(".content-box").contents();
$(this).append(ref);
$(".content-box").append(working);
});
});
});
HTML
<html>
<body>
<div class="page-wrap">
<div class="left-column-wrap">
<h1>FreeMarker +</h1>
<div class="freemarker-wrap">
<span class="test">
<h2>Lucene Call ></h2>
<div class="freemarker">
<p>Click to hide stories</p>
</div>
</span>
<span class="test">
<h2>Arrays ></h2>
<div class="freemarker">
<p>Arrays</p>
</div>
</span>
<span class="test">
<h2>Declaring and outputting variables ></h2>
<div class="freemarker">
<p>Declaring</p>
</div>
</span>
<span class="test">
<h2>IF Statements ></h2>
<div class="freemarker">
<p>Statements</p>
</div>
</span>
<span class="test">
<h2>Fragments ></h2>
<div class="freemarker">
<p>Fragments</p>
</div>
</span>
<span class="test">
<h2>Working with Numbers ></h2>
<div class="freemarker">
<h3>Numbers</h3>
</div>
</span>
<span class="test">
<h2>Current Date ></h2>
<div class="freemarker">
<p>Current</p>
</div>
</span>
</div>
<div class="javascript-wrap">
<h1>JavaScript +</h1>
</div>
<div class="javascript-wrap">
<h1>JQuery +</h1>
</div>
<div class="javascript-wrap">
<h1>HTML +</h1>
</div>
<div class="javascript-wrap">
<h1>CSS +</h1>
</div>
</div>
<div class="content-box">
</div>
</div>
</body>
</html>
assuming this is what your are asking for...
$(document).ready(function() {
$(".freemarker-wrap div").hide();
$(".test").click(function () {
var working=$(this).find(".freemarker").html(); // get that particular <span> html
$(".content-box").html(working); <migrate it to content
});
});
fiddle here
I think you're over complicating it ;)
$(document).ready(function() {
$(".freemarker-wrap div").hide();
$("span.test").click(function () {
$(".content-box").html( $(this).find("div.freemarker").html() );
});
});