Using Javascript to insert url into Django template - javascript

I made a map application using Mapbox, where a user can click on a feature and a popup shows with details about the feature. I would also like to provide a link in the popup to the DetailView of the object using Javascript, but I'm having trouble generating the anchor tag. So far I have
new mapboxgl.Popup()
.setLngLat(e.lngLat)
.setHTML('To Detail View')
.addTo(map);
But when I try it out on the development server, it gives me a 404 error with a request url of
http://127.0.0.1:8000/map/%7B%25%20url%20app_name:view%20pk%3Dfoo%20%25%7D
How do I get it to pass the correct url? I've also tried inserting the link into a normal HTML div and I get the same problem.

It looks like its not recognizing your template tag as a template tag. Your syntax looks fine. Are you trying to use the url template tag in a javascript file? If so it wont work. You can only use template tags in the html files.
If this is in a html file, can you post the full code?

Related

Opening html code as a file preview

I am fetching the HTML code from some external API. On my website, I want to create an anchor, which will open a new tab showing that HTML code parsed. How can I do that?
One way I know of is to just make an iframe, and show the code there, but that won't open a new tab and won't adjust the size easily.
What's the best way to solve this? I am using node.js express as a website's server.
you could use window.open("your url here") javascript function. You could just use an onclick attribute to call it like below:
<span onclick='window.open("your url here")'>view</span>
after which you could replace contents of a tag (lets say the body tag) with the html code received from the external API with standard javascript

Is it possible to take HTML code that is displayed as text on a webpage and read it as HTML on another site?

I have data that is constantly updated that I need to use in my HTML. While I can create the HTML code using Google Sheets and make it public, the problem is that this creates text instead of readable HTML.
I need to find a way to embed the text from this URL as HTML code on another website, so that whenever the information is updated, the HTML code is as well:
https://docs.google.com/spreadsheets/u/1/d/1tGqU_y62F0-YgQ953RWV2vhMFFprCTs5e7E0KtSNCHg/pubhtml?gid=1350637925&single=true&range=A1&chrome=false&gridlines=false
You can use the DOM API methods like innerHTML to insert your HTML:
https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML .
so something like:
document.getElementById("yourcontainer").innerHTML =
and set that to the return of your AJAX call that fetches your code

Embed external HTML page inside AngularJS

Is it possible to embed an external HTML page inside of AngularJS? For instance if i have a page at "localhost:8080/mypage/5533n", is there an easy way to embed inside my angular app?
I have a graph/table that I want to display, but i keep hitting Lexer errors, and sometimes CORS problems which I already fixed. I'm using the below code:
<div class="slide-animate" ng-include="http://localhost:8080/#/notebook/2APHT5YD2/paragraph/20150609-170553_989764970?asIframe"></div>
Seems like you are missing ' here for your ng-include URL.
ng-include="'http://localhost:8080/#/notebook/2APHT5YD2/paragraph/20150609-170553_989764970?asIframe'"

Can't load url on same tab

I know a way to solve this but it's the wrong way and involves creating a new file and simply cheat.
Now the problem:
i have a folder with the index.html file; this file has a menu which has a <a href="reg_interlocutor.html">
in reg_interlocutor.html i use div's and in one of them i call the registration form:
this inserts the content of file form_registo_interlocutor.html into the div and sends the data inserted by the user to the file reg_interlocutor.php inside a folder called php;
in this file reg_interlocutor.php, when there is a problem with the data i use
echo "<script>alert('blablabla.'); window.location = '../index.html';</script>";
But if everything goes ok, i want to reload index.html.
The problem is that the browser reloads index.html inside the same div i was using since Step 2.
Actually, the tab url stays the same: localhost/proj/reg_interlocutor.html every step since step_2.
I already used:
header('window-target: main');
header('location:../index.html');
<script>top.window.location='../index.html';</script>
window.open("http://localhost/proj/index.html","_self");
Can anyone help me? I understand that my code is stuck on the div and that is why the index file is open inside that div.
You would probably be better off by using PHP (instead of HTML) to include an external html file instead of doing this directly in HTML. PHP can inject the external HTML file into the final output, which results in a much cleaner result than having the user's web browser fetch the other html file (creating a second request). This should also resolve the html loading into the <object> tag instead of the full page.

Document.titles while using html templates?

So I'm dynamically filling a small set of template pages with dynamic data from a DB, with the dynamic inputs contained in the URL params.
I'm using a URL rewriter(mod_rewrite) to create static-looking URLs for these template pages, but I'd really like to have the page titles be dynamic too.
I've found out how to do this in javascript after the page has been loaded, but apparently that won't work correctly for SEO, or for links to the page.
The main example I have, is that the wiki page for genome.
http://en.wikipedia.org/wiki/genome
… is rewritten to:
http://en.wikipedia.org/w/index.php?title=genome
Yet the page title will be Genome - Wikipedia, instead of Template - Wikipedia.
How does wikipedia dynamically rename the page title? Somehow I doubt they create new static html pages for every single article, they probably use a template.
Is there any way to have a parameter be assigned to the page title?
Thanks in advance.
You can always write javascript to rename the page title from the argument;
document.title = "This is the new page title.";
How to dynamically change a web page's title?

Categories

Resources