When I double click the node text editing is going some where, instead of the node. The below is the code and I don't know what is happening. I'm using AJAX to get the mxGraph XML from server side.
Edited source code as per comments
// Creates the div for the graph
mxEvent.disableContextMenu(container);
document.body.appendChild(container);
var xmlDocument = mxUtils.parseXml(xml);
var decoder = new mxCodec(xmlDocument);
var node = xmlDocument.documentElement;
container.innerHTML = '';
graph = new mxGraph(container);
graph.cellEditor.init();
graph.cellEditor.textarea.style.position='absolute';
graph.setHtmlLabels(true);
graph.setPanning(true);
graph.setTooltips(true);
graph.setConnectable(true);
// Changes the default style for edges "in-place"
var style = graph.getStylesheet().getDefaultEdgeStyle();
style[mxConstants.STYLE_ROUNDED] = true;
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
decoder.decode(node, graph.getModel());
var layout = new mxHierarchicalLayout(graph, mxConstants.DIRECTION_WEST);
var parent = graph.getDefaultParent();
layout.execute(parent);
Adding following piece of code during initialization helped me
graph.cellEditor.init();
graph.cellEditor.textarea.style.position='absolute';
Related
I have a question I am working with a form based shopping cart add function and a livesearch (PHP) function where it requests new data with the same classes. I have seen multiple examples besides (document.ready) but none of them seemed to work correctly after the DOM Content has been modified by the PHP livesearch function. (The current method is on the document ready function as you guys can see.
Thanks in advance!
// Icon Click Focus
$('.product').on('click', function() {
var strId = '';
var strId = $(this).attr('class');
var strId2 = strId.replace(' product','');
var strId3 = strId2.replace('product-','');
var formData = "product"+strId3;
document.getElementById("product_toevoeg_id").value = strId3;
var productNaam = $("#"+formData+" .f-productnaam").val();
document.getElementById("productnaam").innerHTML = productNaam;
document.getElementById("product_naam_form").value = productNaam;
var productIngredienten = $("#"+formData+" .f-ingredienten").val();
document.getElementById("ingredienten").innerHTML = productIngredienten;
document.getElementById("ingredienten_form").value = productIngredienten;
I am using the d3js collapsible tree grid to display the nodes and when I run the code in plunker I am getting a weird 400 bad request error.
I have replaced the code which fetches the json and hard coded the json directly like below:
var treeData ={"user_id":0,"name":"Root Node","children":[{"user_id":0,"name":"Flossie Hickman","children":[....]}]};
// Calculate total nodes, max label length
var totalNodes = 0;
var maxLabelLength = 0;
// variables for drag/drop
var selectedNode = null;
var draggingNode = null;
// panning variables
var panSpeed = 200;
var panBoundary = 20; // Within 20px from edges will pan when dragging.
// Misc. variables
var i = 0;
var duration = 750;
var root;
Link to Plunker
Can you please let me know where I am going wrong.
Your code doesn't show any error in the console, here is an image to proof:
Still, nothing will show up. The reason is simple: you are calling your script...
<script src="dndTree.js"></script>
...before the <body>, where you have this div:
<div id="tree-container"></div>
Which is the div used to create the svg:
var baseSvg = d3.select("#tree-container").append("svg")
So, this is the correct order:
<body>
<div id="tree-container"></div>
<script src="dndTree.js"></script>
</body>
As a good practice, reference your script at the bottom of the body.
Here is the working plunker (and I emphasise "working"): http://plnkr.co/edit/2aLPBuEXN9f6Tlwekdg5?p=preview
I am working on a project that generates random qr code. This the plugin I am using http://davidshimjs.github.io/qrcodejs/
function createQrImage(qrValue){
//option1
var newDiv = document.createElement("div");
//option2
var qrDiv = document.getElementById("myDivId");
//only option 2 works
var qrcode = new QRCode(qrDiv);
qrcode.makeCode(qrValue)
}
Creating new QR code using options 2 works fine but if I pass the option 1 variable, no QR Code is generated. No errors in console either.
Per my comment, since newDiv isn't added to the DOM anywhere, referencing it won't affect the output. So you will need to append it to the body before using it.
function createQrImage(qrValue){
//option1
var newDiv = document.createElement("div");
document.body.appendChild(newDiv);
//option2
var qrDiv = document.getElementById("myDivId");
//only option 2 works
var qrcode = new QRCode(qrDiv);
qrcode.makeCode(qrValue)
}
I have been practicing my Vanilla Js/jQuery skills today by throwing together a newsfeed app using the news-api.
I have included a link to a jsfiddle of my code here. However, I have removed my API key.
On first load of the page, when the user clicks on an image for a media outlet, e.g. 'techcrunch', using an addEventListener, I pass the image's id attribute to the API end point 'https://newsapi.org/v1/articles' and run a GET request which then proceeds to create div elements with the news articles content.
However, after clicking 1 image, I cannot get the content to reload unless I reload the whole page manually or with location.reload().
On clicking another image the new GET request is running and returning results, as I am console logging the results.
I am looking for some general guidance on how to get the page content to reload with each new GET request.
Any help would be greatly appreciated.
Many thanks for your time.
Api convention:
e.g https://newsapi.org/v1/articles?source=techcrunch&apiKey=APIKEYHERE
EventListener:
sourceIMG.addEventListener('click', function() {
$.get('https://newsapi.org/v1/articles?source=' + this.id + '&sortBy=latest&apiKey=APIKEYHERE', function(data, status) {
console.log(data);
latestArticles = data.articles;
for (i = 0; i < latestArticles.length; i++) {
//New Article
var newArticle = document.createElement("DIV");
newArticle.id = "article";
newArticle.className += "article";
//Title
//Create an h1 Element
var header = document.createElement("H1");
//Create the text entry for the H1
var title = document.createTextNode(latestArticles[i].title);
//Append the text to the h1 Element
header.appendChild(title);
//Append the h1 element to the Div 'article'
newArticle.appendChild(header);
//Author
var para = document.createElement("P");
var author = document.createTextNode(latestArticles[i].author);
para.appendChild(author);
newArticle.appendChild(para);
//Description
var description = document.createElement("H4");
var desc = document.createTextNode(latestArticles[i].description);
description.appendChild(desc);
newArticle.appendChild(description);
//Image
var image = document.createElement("IMG");
image.src = latestArticles[i].urlToImage;
image.className += "articleImg";
newArticle.appendChild(image);
//Url link
//Create a href element
var a = document.createElement('a');
var link = document.createElement('p');
var innerLink = document.createTextNode('Read the full story ');
link.appendChild(innerLink);
a.setAttribute("href", latestArticles[i].url);
a.innerHTML = "here.";
link.appendChild(a);
newArticle.appendChild(link);
//Append the Div 'article' to the outer div 'articles'
document.getElementById("articles").appendChild(newArticle);
}
});
}, false);
I tried your fiddle using an api key. It is working for me in that content new content is appended to the previous content in the #articles div. If I'm understanding your question, when a news service image is clicked you would like for only that news service's articles to show. To do that you would need to clear the contents of #articles before appending new content.
To do that with plain js you could use the following above your for loop:
// Removing all children from an element
var articlesDiv = document.getElementById("articles");
while (articlesDiv.firstChild) {
articlesDiv.removeChild(articlesDiv.firstChild);
}
for (i = 0; i < latestArticles.length; i++) {...
Full disclosure, I added the variable name 'articlesDiv' but otherwise the above snippet came from https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild
I have a question: I'm getting in Javascript XML. I want to add a 'father' node
to that xml.
How do I do that?
/* Load the XML text from the text area to a Javascript XML object */
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = "false";
xmlDoc.loadXML(taData.innerText);
xmlObj = xmlDoc.documentElement;
/* Creating the Screen node */
var Screen = document.createElement("Screen");
Screen.setAttribute("xmlns:xsi", "http://www.w3.org/2001/XMLSchema-instance");
Screen.setAttribute("xsi:noNamespaceSchemaLocation", "../../GUIGenerator_V2/Scheme/GG_Scheme.xsd");
/* Creating the Legend node */
var Legend = document.createElement("Legend");
Legend.setAttribute("EntityType", "Request");
var ImportedNode = document.adopteNode(xmlDoc.documentElement);
Legend.appendChild(ImportedNode);
Screen.appendChild(Legend);
Legend is the child of Screen, And I want to make the xmlDoc a child of Legend.
I have tried to write: Legend.appendChild(xmlDoc.documentElement);
but getting an error. What can be the problem?
In some case, a XML is reference as a DOM inside JavaScript so you can use standard DOM functions on it. Pay attention about navigator specific implementation to avoid compatibility problems...
To add a father node you need to use something like :
/* Load the XML text from the text area to a Javascript XML object */
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = "false";
xmlDoc.loadXML(taData.innerText);
xmlObj = xmlDoc.documentElement;
/* Creating the Screen node */
var Screen = document.createElement("Screen");
Screen.setAttribute("xmlns:xsi", "http://www.w3.org/2001/XMLSchema-instance");
Screen.setAttribute("xsi:noNamespaceSchemaLocation", "../../GUIGenerator_V2/Scheme/GG_Scheme.xsd");
/* Creating the Legend node */
var Legend = document.createElement("Legend");
Legend.setAttribute("EntityType", "Request");
var ImportedNode = document.adopteNode(xmlDoc.documentElement);
Legend.appendChild(ImportedNode);
Screen.appendChild(Legend);
after execution of that code you obtain a document strucured like:
<fathernode>
<YOURXMLDOCUMENT />
</fathernode>