The following is a part of jstree, http://www.jstree.com/ code.
And I have a couple of questions about this javascript/jquery to ask. (actually pretty much all)
$('#pages-wrapper').tree({
callback:{
"onchange":function(node,tree){
document.location='pages.php?action=edit&id='+node.id.replace(/.*_/,'');
},
"onmove":function(node){
var p=$.tree.focused().parent(node);
var new_order=[],nodes=node.parentNode.childNodes;
for(var i=0;i<nodes.length;++i)new_order.push(nodes[i].id.replace(/.*_/,''));
$.getJSON('/ww.admin/pages/move_page.php?id='+node.id.replace(/.*_/,'')+
'&parent_id='+(p==-1?0:p[0].id.replace(/.*_/,''))+'&order='+new_order);
}
Q1. What $ in var p=$.tree is doing?
Q2. What is .parent(node) referencing to?
Q3. Is this line, var new_order=[],nodes=node.parentNode.childNodes; declearing two variables at the same time? And what is node.parentNode.childNodes doing?
Thanks in advance.
The followings are additional codes.
html is the following
<div id="pages-wrapper">
<ul>
<li id="page_24">
<ins> </ins>Home
</li>
<li id="page_25">
<ins> </ins>Second Page
</li>
<li id="page_30"><ins> </ins>Information
<ul>
<li id="page_31"><ins> </ins>Illustration</li>
</ul>
</li>
....
....
move_page.php
require '../admin_libs.php';// this one does all the db queries
$id=(int)$_REQUEST['id'];
$to=(int)$_REQUEST['parent_id'];
$order=explode(',',$_REQUEST['order']);
dbQuery("update pages set parent=$to where id=$id");
for($i=0;$i<count($order);++$i){
$pid=(int)$order[$i];
dbQuery("update pages set ord=$i where id=$pid");
echo "update pages set ord=$i where id=$pid\n";
}
What $ in var p=$.tree is doing?
$ is a helper object used by the popular javascript frameworks jQuery, prototype etc.
$.tree is referring to a extension tree which is defined somewhere.
What is .parent(node) referencing to?
Looks like it finds the parent node for of the currently selected node, to know the parentID which is passed to the php script. (You will need to let us know what the tree framework you are using...)
Is this line, var
new_order=[],nodes=node.parentNode.childNodes;
declearing two variables at the same
time?
Yes, it is declaring 2 seperate variable on the same line which is legel Javascript.
And what is
node.parentNode.childNodes doing?
It gets the list of the sibling elements for the current node selected.
Related
This question already has an answer here:
How to duplicate a div in JavaScript
(1 answer)
Closed 3 years ago.
Maybe this is a common question in javascript world, but i can't find any usefull keyword for a profitable search. Long story short:
I have html code generated server side, suppose something like this
<div id="container">
<div class="element">
<!-- yadayada -->
</div>
<div class="element">
<!-- yadayada -->
</div>
</div>
and a client script to add new elements without reloading the page
<script>
// do asynchronous server stuff, then add new div from json server output
var string = "<div class=\"element\">\n" +
" <!-- yadayada -->\n" +
"</div>";
$("#container").prepend($(string));
</script>
Well, if the <!-- yadayada --> internal layout is changed in the server scripts, the javascript code must also be changed.
How can I avoid this ? how can I have only one maintainable source for the yadayada layout ?
Clone the first of the elements and prepend it to the container like so:
$('.element:first').clone().prependTo('#container');
As mentioned in the comments, you can 'clone' an item served up by the server.
elem.cloneNode(true)
On a page that I did, I named one element 'master' and then used that to create all new elements as needed (I hid the master with CSS display: none).
As mentioned in other posts you can use .clone() with jquery.
If you do not want to use jQuery, you can use regular javascript:
Excerpt from the W3 Schools site:
// Get the last <li> element ("Milk") of <ul> with id="myList2"
var itm = document.getElementById("myList2").lastChild;
// Copy the <li> element and its child nodes
var cln = itm.cloneNode(true);
// Append the cloned <li> element to <ul> with id="myList1"
document.getElementById("myList1").appendChild(cln);
The above is an example of cloning in regular javascript from W3 Schools site: https://www.w3schools.com/jsref/met_node_clonenode.asp
I'm new to JavaScript, and for school I have to automatically make every <\h1> on my page generate into an "ol" with in every "li" a link to the place on my page where that header is placed so in the end I have a table of contents with links on every "li". So I should be able to just write text and not worry about the table of contents. Is there a way to do this without using too complixated code? And preferably not very long so I can understand it.
e.g.
<h1 id="h1-01">Title 1<\h1>
<h1 id="h1-02">Titel 2<\h1>
<h1 id="h1-03">Titel 3<\h1>
<h1 id="h1-04">Titel 4<\h1>
Make this generate like:
<ol>
<li>Title 1</li>
<li>Title 2</li>
<li>Title 3</li>
<li>Title 4</li>
</ol>
edit:
I don't want anyone to make all of my homework, this is just a tiny tiny part of the homework even. What I want to know is how do I make an organized list with list items in javascript without too complicated code. I already found a way to put every header text in a variable.
This is what I have
function generate(){
var titels = new Array();
for(var i = 1;i<10;i++){
var test = 'h1-0'+ i;
titels[i] = document.getElementById(test).textContent;
}
}
-->
</script>
The only problem is now that I have to make a list with these variables, but I haven't found anything usefull on the internet, everything that I've found uses Jquery ir is specific for someone's problem. I would also like a way to count the amount of headers I'm using but tthat's another question. Is it actually even possible to have code that gets literally implemented like I'm writing it?
like:
html.write("<ol>");
for(var i = 1, i<10,i++){
html.write("<il>" + titels[i] + "<\il>");
}
html.write("<\ol>")
I'm not going to do your homework, but will point you in a good direction.
Try building an object containing the id and the title of each entry. From there, you can use that object to build practically anything, including an ordered list.
Of course, you can hard-rewrite the h1 tags into list items, but that's just not the proper way to do it and not something you should learn from.
A start hint:
You could do it with the help of jquery.
Like this HTML:
<ol id=contents></ol>
<h1>Test</h1>
bla bla
<h1> Test2 </h1>
Ble ble ble
Jquery:
$(document).ready(function(){
$("h1").each(function(){
$("#contents").append("<li>" + $(this).html() + "</li>");
});
});
My HTML looks like
<li value="0">
<a href="#">
<span>DATA TO GET</span><![if gt IE 6]>
</a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li value="0">
<a onclick="return showPane('SomePane',this)" href="#">ACTIVE NODE</a>
</li>
</ul>
This html is produced using xsl. Now i want to get the data inside span tag using javascript. I tried the following:
var nameParent = activeTab.parentNode.parentNode.previousSibling;
window.alert(activeTab.innerHTML);
window.alert(activeTab.parentNode.parentNode.previousSibling.childNode);
Here the variable activeTab is passed the anchor that contians the text ACTIVE NODE.The first alert gives proper data i.e ACTIVE NODE but the second alert says undefined.
I think i am travsring the correct path and proper elements. Can some body point out what is wrong here and what else i can do to get the required data.
Thanks in advance.
Try this
var nameParent = activeTab.parentNode.parentNode;
window.alert(activeTab.innerHTML);
window.alert(nameParent.parentNode.children[0].children[0].innerHTML);
I stronly suggests use jQuery in your Project, it provides methods for easy navigation among dom elements like
.find() and .children(), .parent for more readable code.
Thanks
Try using firstChild instead of childNode:
var nameParent = activeTab.parentNode.parentNode.previousSibling;
window.alert(nameParent.firstChild.innerHTML);
I want to implement a jQuery plugin that converts a selector to HTML. I understand that the mapping between these two syntaxes is many-to-many, but simple selectors would be easy to covert to HTML.
Example:
$('div#my-id.my-class').create();
might generate:
<div id="my-id" class="my-class" />
EDIT:
The purpose is to create an element if the selector returns an empty set, without having to add redundant code.
var jqs = $('div#my-id');
if(jqs.length===0) jqs = jqs.create();
var elementWillAlwaysBeThere = jqs.get(0);
i know this might not be what you are lokking for. the project zen coding is about using a css like syntax to create dom structurs. so i think lokking at there source is going to help you alot, even thou its not pure css selectores.
div#wrapper>ul#imageSlider>li.image$*3 compiles to:
<div id="wrapper">
<ul id="imageSlider">
<li class="image1"></li>
<li class="image2"></li>
<li class="image3"></li>
</ul>
</div>
so if you where to use the jQuery port you can do youre example like
$.zc("div#my-id.my-class") again resulting in
<div id="my-id" class="my-class"></div>
happy source reading
I have an interesting problem. Ive had a handlebars.js template thats been working for a week and just stopped. I was hoping someone might have an idea as to why.
Heres the template
<script id="banners-template" type="text/x-handlebars-template">
<div class="banner-container" >
{{#banners}}
<ul class="banner" >
<li><div class="checkbox"></div></li>
<li>{{publisher_status}}</li>
<li>Test Link</li>
<li><img class="banner" src="{{imageurl}}"/></li>
<li>{{description}}</li>
<li>{{width}}x{{height}}</li>
</ul>
{{/banners}}
</div>
</script>
Heres the code that works with this.
var bannersRawTemplate = $("#banners-template").html();
var bannersTemplate = Handlebars.compile(bannersRawTemplate);
data = '{"banners":[{"type":"banner","width":125}]}';
alert(bannersTemplate(data));
I realize that type is not accessed in the template above but it shouldnt matter. I should still get the code inside of the "banners" array loop displayed once. This is not the case. The only part of the template that displays is . Its like its not seeing the banners array inside the JSON.
Any ideas?
Thanks in advance.
Is there a particular reason you don't pass in the actual JSON, and instead pass a string? From my experience with Mustache, and a cursory review of the Handlebars.js documentation, you should be passing:
JSON.parse('{"banners":[{"type":"banner","width":125}]}');
And, assuming the code you've shown is "really real", why not just:
{"banners":[{"type":"banner","width":125}]}
This is, of course, assuming that the issue really isn't that you've got a list with just one element.