How to get the Vue's element's child DOM?
I have bellow code, I want to get the <div>'s <input> element.
var vm = new Vue({
el: '#box',
data: {
pick: true,
a: 'a'
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="box">
<input type="radio" v-model="pick" :value="a">
</div>
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/vue-resource/1.3.4/vue-resource.min.js"></script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
How can I get that in Vue.js? Or in the Console?
I think you should tell us what functionality do you want to realize.
For your question:in vue.js there is ref binding to get the reference of DOM elements.
//html
<div id="box">
<input ref="domOfInput" type="radio" v-model="pick" :value="a">
</div>
//js code
vm.$refs.domOfInput will be the DOM node
Related
<div id="abc" style="display: none;"><h1>abc</h1></div>
Hello! I hide the div but I want to see when I type it #abc I can't see this text.
In case people want to do it without having to resort to JavaScript, the CSS solution is to use the :target pseudo class, as mentioned in the comments.
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style>
#abc {display:none}
#abc:target {display:block}
</style>
</head>
<body>
<div id="abc"><h1>abc</h1></div>
</body>
</html>
Please find below sample as per your requirement.
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
if(window.location.href.indexOf("#abc")!=-1)
{
//alert("Page is loaded");
document.getElementById("abc").style.display="block";
}
}
</script>
</head>
<body onload="myFunction()">
<h1>Hello World!</h1>
<div id="abc" style="display: none;"><h1>abc</h1></div>
</body>
</html>
This is how you can do it using jquery:
var url = "https://abcdefgh.carrd.co/#abc";
var hash = url.substring(url.indexOf("#"));
// You can use
// var hash = window.location.hash;
// but i need to write the url to show you that is working.
if ($( hash ).length) { //check if div exists
$( hash ).show();
}
#abc, #cde
{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="abc">ABC</div>
<div id="cde">CDE</div>
That should do it:
if(window.location.href.indexOf("#abc")!=-1) {
document.getElementById("abc").style.display="block";
}}
Important note: all the indexes must be 0 (tabindex="0"), I can not use another numbers (like: tabindex="1",tabindex="2"...tabindex="n").
for example: my html code is:
<div tabindex="0">first</div>
<div tabindex="0">second</div>
<div tabindex="0">third</div>
<div tabindex="0">Etc...</div>
Now - I want to focus on the second div by default, so when I click on Tab - the focus will be on third div, and so on
<!DOCTYPE html>
<head>
<meta charset="utf-8"></meta>
<script src="https://code.jquery.com/jquery-git1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div[tabindex='0']").eq(1).focus();
});
</script>
</head>
<body>
<div tabindex="0">first</div>
<div tabindex="0">Second</div>
<div tabindex="0">third</div>
<div tabindex="0">Etc...</div>
</body>
</html>
You can use jquery next function to get next sibling.
Here you have working example: https://jsfiddle.net/2muaxbbf/
I'm getting an error that says "Tag start is not closed" in the following HTML code after the input tag. I can't seem to figure out why since I am using the Handlebars syntax properly. Can someone help me out please?:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="todo">
</div>
<script id="item-template" type="text/x-handlebars-template">
// Your code goes here
<div>
<input id="todo-complete" type="checkbox" {{#if completed}} "checked" {{/if}}>
<label>{{title}}</label>
</div>
</script>
<script src= "underscore.js"> </script>
<script src="handlebars-v1.3.0.js"> </script>
<script src="backbone.js"> </script>
<script src="jquery-1.11.1.js"> </script>
<script src="main.js"> </script>
</body>
You IDE doesn't understand Handlebars syntax, hence reporting a Error, which you should ignore.
I am trying to pull in data from a JSON file and use it to populate a navigation menu, composed of divs that collapse using the Angular UI collapsible function.
Here is my code (also on Plunker here):
<!DOCTYPE html>
<html ng-app="samApp">
<head>
<link data-require="bootstrap-css#3.0.3" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<script data-require="angular.js#*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular.js"></script>
<script data-require="angular-ui-bootstrap#*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
</head>
<body>
<div CollapseCtrl navdata ng-repeat="items in item">
<div class="nav-super">{{items.img}}</div>
<div collapse="isCollapsed">
<div class="nav-sub">{{items.img}}</div>
</div>
</div>
</body>
</html>
My issues are:
I cannot make the elements within the collapsible take the json information. If I set ng-repeat on one of the divs, the sub or super div will not take it. Setting ng-repeat on the outermost div results in none of the sub divs taking the repeat.
I have enclosed my controllers in directives and assigned both directives, for the collapsing function and the HTTP GET, to the same div.
I do believe you're looking for something like this:
<!DOCTYPE html>
<html ng-app="samApp">
<head>
<link data-require="bootstrap-css#3.0.3" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<script data-require="angular.js#*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular.js"></script>
<script data-require="angular-ui-bootstrap#*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
</head>
<body ng-controller="navDataController">
<ul>
<li ng-repeat="item in items">
<span ng-click="action(item)">{{item.img}}</span>
<ul ng-show="item.isCollapsed">
<li ng-repeat="sub in item.subcontent">
<span>{{sub.title}} {{sub.}}</span>
</li>
</ul>
</li>
</ul>
</body>
</html>
http://plnkr.co/edit/DlVqJOzQwjxdCVjStvZg?p=preview
The example works, but it's a bit crude; learn basics to make it sweet.
Also modified your plunkr to work:
http://plnkr.co/edit/jxVGxl7h8gBlFLQ9zyTW?p=preview
HTML
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css#3.0.3" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<script data-require="angular.js#*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular.js"></script>
<script data-require="angular-ui-bootstrap#*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
</head>
<body ng-app="samApp" ng-controller="CollapseCtrl">
<div ng-repeat="item in items">
<div class="nav-super" ng-click="item.isCollapsed=!item.isCollapsed">{{item.img}}</div>
<div collapse="item.isCollapsed">
<div class="nav-sub" ng-repeat="subElement in item.subcontent">{{subElement.title}}</div>
</div>
</div>
</body>
</html>
JS
var app = angular.module('samApp', ['ui.bootstrap']);
app.service('navdata', function($http) {
var myServiceObj = {
myData: {},
getData: function() {
$http.get('data.json').success(function(data, status, headers, config) {
angular.copy(data, myServiceObj.myData);
});
}
}
myServiceObj.getData();
return myServiceObj;
});
app.controller('CollapseCtrl', function($scope, navdata) {
$scope.items = navdata.myData;
});
Basically directives are meant for adding encapsulated behavior or DOM element manipulation. I think a service makes more sense for taking care of the requests to the server and storing the data to be used by various controllers.
I also used the data to store the isCollapsed boolean so you may want to loop over the data and set that to false if you want them closed initially or otherwise just reverse your boolean logic in the collapse expression.
You had all the right logic just in the wrong places, also read up on the ng-repeat documentation it's a piece I visit often.
this is sample code i tried n its working
<html>
<head>
<style>
<!--
.execute { background-color: red; height: 25px; }
-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js">
</script>
<!-- Let's register a onClick handle for any .execute div. -->
</head>
<body>
<div class="execute">
<head>
<script>
dojo.ready(function() // Dojo will run this after being initialized
{
// Get A list of all tags with id execute and add a event onClick
dojo.query(".execute").connect("onclick", function(evt)
{
alert("Event triggered!");
// ...
});
});
</script>
</head>
<body>
Click me 1
</body>
</div>
<br /><br />
<div class="execute">Click me 2</div>
</body>
</html>
but if i merge it in another code it highlights and as invalid code. what does it means?
Ther are several code issues. double <head> tags, HTML elements after the <body> tag.
cleaned up code:
<html>
<head>
<style>
.execute { background-color: red; height: 25px; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js"></script>
<script>
dojo.ready(function() { // Dojo will run this after being initialized
// Get A list of all tags with id execute and add a event onClick
dojo.query(".execute").connect("onclick", function(evt) {
alert("Event triggered!");
// ...
});
});
</script>
</head>
<body>
<div class="execute">Click me 1</div>
<br><br>
<div class="execute">Click me 2</div>
</body>
</html>
<head> should only appear once, directly under the <html>, and not within <body>.
Exceptions to this are iframes embedded within existing pages, which have their own document structure.
Just remove the second <head>.
Why do you have two heads? <script>s don't have to be in <head>s.
You should only have a single <head> in your document.
The structure of an HTML page should be as follow:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Although they do not have to be, most people put script tags within the opening and closing header tags. For example:
<html>
<head>
<title></title>
<script>
<!--This is where all your functions should be.-->
</script>
</head>
<body>
</body>
</html>