I'm trying to load a gexf file from javascript in my Asp.Net MVC Web Application from inside a View and am not sure why when I run the website, it doesn't find the file I'm looking for even if the path is 'correct'.
http://localhost:55833/Content/les_miserables.gexf is where the file is being looked for and I have the file in my Content folder yet I get the error that it can't be found (404).
I'm using T4MVC to generate the link to http://localhost:55833/Content/les_miserables.gexf in case any of you are unfamiliar. I am sure that this is link that is being generated because I have just copy and pasted from my Google Chrome browser the path that is returning a 404.
What am I doing wrong?
This is my javascript:
<script src="#Links.Scripts.sigma.sigma_parsers_json_min_js"></script>
<script src="#Links.Scripts.sigma.sigma_plugins_animate_min_js"></script>
<script>
sigma.parsers.gexf(
'#Links.Content.les_miserables_gexf',
{ // Here is the ID of the DOM element that
// will contain the graph:
container: 'sigma-container'
},
function(s) {
// This function will be executed when the
// graph is displayed, with "s" the related
// sigma instance.
}
);
</script>
This is my straightforward html:
<div class="page">
<div class="page-content padding-30 container-fluid">
<div id="container">
<div id="sigma-container"></div>
</div>
</div>
</div>
Thanks for your time.
Related
I am trying to load an external HTML page (common navigation) into my current HTML page. I tried the load function but it is deprecated. Can you tell me another way to include it? I am not using any server.
Here's my code
<!DOCTYPE html>
<html>
<head>
<script src="ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#content').load(" nav.html ");
});
</script>
</head>
<body>
<div id="content "></div>
</body>
</html>
Try this
<script>
function loadPage(href) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", href, false);
xmlhttp.send();
return xmlhttp.responseText;
};
document.getElementById('content').innerHTML =
loadPage('your_html_file.html');
</script>
<div id="content">
</div>
Take both file pages in same directory then you can use simple button on link to use external file. for example
<button> External file </button>
Button is your choice it's just example for understanding you can simple use html link.
You should use the SSI-function.
There is several ways but this can solve your problem.
<!--#include virtual="PathToYourFile/YourFile.html" -->
This can be inserted into a <div> for further styling in CSS.
REMEMBER! Due to some limitations in html-doctypes you cannot inlude a .html-file into an .html-file. You have to use another format as .shtml where you can inlude your .html-files. You can include .html into your .shtmlfile. This was also what .shtml was originally created for.
This is because it is part of the XHTML (Dynamic XML HTML)...
To change a file
Your approach on the HTML is correct and also your JS. I include a lot of html-files containing texts there.
My approach is that when a page is loaded some text will be loaded with the <!--#include virtual="" --> inside a <div>. Below JS is used to change the content in the <div>. As Daniel Beck stated below: "...at least in Apache the server needs to be configured to check particular file extensions...".
You configure your file in your .htaccess-file. But ONLY do this if you know what you are doing.
Some (newer?) servers have a default setup of which you don't need to alter the .htaccess-file if you want to be able to include .html-files. At least you are able to include .html-files into .shtml-files.
I have included a Mimetype converter which tells the browser how it should read the file. For txt/html I have told the script that it should use the character encoding ISO-8859-1. Others as UTF-8 could also be used. This depends on your and your receivers native language.
Take into consideration to use the e.preventDefault();. With this i tells the browser NOT to see this as navigation link and will therefore only load the content in the <div>.
$(function() {
$('#ButtonsID').click(function(e) {
$('.DivClass').load('PathToFile/File.shtml');
e.preventDefault();
});
});
$.ajaxSetup({
'beforeSend': function(xhr) {
xhr.overrideMimeType('text/html; charset=ISO-8859-1');
}
});
I have a web page which does navigation using templates and filling / showing them depending of user interactions.
It works quite well, but the templates contains some JS included with them. This JS code is correctly loaded (in the example below, it provides an alert saying "Hi") when the page is just loaded. However, I don't see the code within the debugger console, either in Chrome or Firefox.
I've provided a minimal example below, where I see in the console > Source, under localhost, only my HTML page and jquery.min.js in the asset/js sub-folder.
Here is my HTML :
<script src="assets/js/jquery.min.js"></script>
<template id="my_screen">
Hello
<script type="application/javascript" src="assets/js/testouille.js"></script>
</template>
<section class="container">
<div class="my_screen hide"></div>
</section>
<script type="application/javascript">
function useTemplate(elem) {
var myTemplate = $('#' + elem),
normalContent = $('.' + elem),
clonedTemplate = myTemplate.html();
normalContent.empty();
normalContent.append(clonedTemplate);
}
$(document).ready(function() {
useTemplate('my_screen');
}
)
</script>
And here is my Javascript :
alert("Hi");
Any idea?
Since testouille.js is in a <template>, it's not loaded automatically by the browser when the page is loaded.
When you clone the template and append it to a regular DIV, jQuery emulates loading the file using $.getScript(). In the Chrome debugger, code that's loaded this way will be shown in a VM:#### filename (where #### is an arbitrary number) in Sources, rather than with its actual filename.
You can make the debugger give this a filename by putting the following comment in testouille.js:
//# sourceURL=testouille.js
I am having trouble getting files such as index.html, main.js, style.css and more on my server made in Go.
My html file works fine with javascript and css on my local file but I can not make it work on a server.
I already tried making this in my code, but it only starts html file and javascript, css, jquer, font are listed in console like the page was not found (404 Page not found).
r := mux.NewRouter()
r.Handle("/", http.FileServer(http.Dir("./static")))
r.HandleFunc("/events", eventHandler) //Ignore this
r.NotFoundHandler = http.HandlerFunc(notFound) //This is just a custom 404.
// Create and start HTTP server.
s := &http.Server{
Handler: r,
Addr: config.Address,
}
My question is:
Is there any possibility to do this without Node.js. Is there any option that will display all my javascript files and css in the html. I really would not like to get this things complicated with Node.
Note
My codes for html, css, javascript all work. My server also works, the only thing needed now is adding the files to the server.
This is what I get This is what I should get on server.
<html>
<head>
<link rel="stylesheet" href="main.css">
<script src="jquery-3.3.1.min.js"></script>
</head>
<body id='body'>
<div class="app-body">
<div id='left' class="left">
<div class='conferenceRoom'>Conference room
<h1 class="roomName">crane
</h1>
</div>
<div class="status">
<h1 id="free_busy" class="free_busy"></h1>
<h1 id="duration" class="duration"></h1>
</div>
</div>
</div>
<div class="right">
<div class="date" id="date"></div>
<div id='eventList' class="eventList"></div>
</div>
</div>
<script src="main.js"></script>
</body>
index.html
This are my files in a directory called Website. Server is started by:
go run *.go -c config.toml
This is ran from the website folder. And this is what the files look like
The problem is you're trying to feed a http.FileServer to Gorilla mux's route.Handle function. This handles a single URL, so it's only valid for the given URL, /.
What you want for serving static files is a route.PathPrefix(). This serves any URL path which begins with the given string, while route.Handle() serves only a path which matches the string exactly.
package main
import (
"log"
"net/http"
"github.com/gorilla/mux"
)
func main() {
r := mux.NewRouter()
r.PathPrefix("/").Handler(http.FileServer(http.Dir("./static")))
// Create and start HTTP server.
s := &http.Server{
Handler: r,
Addr: ":8009",
}
log.Fatalln(s.ListenAndServe())
}
I am facing a issue when I am trying to get my JSX file by a content server. The application has a view Test.cshtml and in this calls a jsx file to render the react portion of the UI to the 'content' div.
When I run it locally in the project using the file structure from the solution it works fine.
<div id="content">
#*react renders here*#
</div>`
#section Scripts{
<script src="_linktoReact_/react-0.14.0.js"></script>
<script src="_linktoReact_/react-dom-0.14.0.js"></script>
<script src="~/Scripts/JSX/test.jsx">
</script>
}
But when I try to run from content server to host the files in a central location (which in this case is localhost:8111) it does not work. The file loads into the browser, but the jsx doesnt execute. This will give me an error of "Uncaught SyntaxError: Unexpected token <" which points to the first line of HTML in the jsx file.
<div id="content">
#*react renders here*#
</div>`
#section Scripts{
<script src="_linktoReact_/react-0.14.0.js"></script>
<script src="_linktoReact_/react-dom-0.14.0.js"></script>
<script src="http://localhost:8111/Scripts/JSX/test.jsx">
</script>
}
So I tried adding the type tag to reference jsx, like below. This removed the "uncaught syntax error" but then doesn't give any errors but also doesn't render the react.
<div id="content">
#*react renders here*#
</div>`
#section Scripts{
<script src="_linktoReact_/react-0.14.0.js"></script>
<script src="_linktoReact_/react-dom-0.14.0.js"></script>
<script type="text/jsx" src="http://localhost:8111/Scripts/JSX/test.jsx">
</script>
}
I tried to find the problem a few different ways and have tinkered with solutions around scoping, CORS, maybe even an issue with routing on the server, but not sure what fixes it.
Attempts to fix:
One suggestion was to use window instead of var like
var TestDataTile = React.createClass({
replace with
window.TestDataTile = React.createClass({
But that to is not working. I am using react-0.14.0.js, react-dom-0.14.0.js
Tried to recompile into js file, which rendered as expected in the solution, but still some issues with some of the code in the test.js file in regard to some api calls.
What could be causing the jsx disconnect?
Can anyone guide me towards correct direction?
Im using a responsive menu code which uses document.getElementById to trigger the menu.
It works for pages that are on the same folder as the masterpage. However for pages on a seperate folder, the menu isn't popping up.
Sample of the code:
<body>
<div class="mp-pusher" id="mp-pusher">
<nav id="mp-menu" class="mp-menu">
</nav>
</div>
<a class="codrops-icon codrops-icon-prev" href="#" id="trigger"><span>Menu</span></a>
<script src="/CodeTest/js/classie.js"></script>
<script src="/CodeTest/js/mlpushmenu.js"></script>
<script>
new mlPushMenu(document.getElementById('mp-menu'), document.getElementById('trigger'));
</script>
</body>
The script has to be in the body of the html for some reason as when I moved it up into the it doesn't work.
Try this,
<script type='text/javascript' src='js/classie.js'></script>
<script type='text/javascript' src='js/mlpushmenu.js'></script>
You need to show to the browser where to look for the JS file on the file you want to call the JS file.
If your JS file is in a folder called JS that is inside a folder called CodeTest, and you want to call this file in an html inside a folder called (for example) somethingFolder.. you should go back one level (. .) and then search for CodeTest -> js -> file.js, example:
src="../CodeTest/js/file.js"
Now if you want to call the JS file in a file that is on the same level of CodeTest folder, you must link without the dots (..), example:
src="CodeTest/js/file.js"