Blank page when running HTML page with JSX - javascript

I was following a tutorial on Lynda, when they first introduce us to JSX they use the following example code:
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react#15.3.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15.3.2/dist/react-dom.js"></script>
<title>My First React File</title>
</head>
<body>
<div id='react-container'></div>
<script>
ReactDOM.render(<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>,
document.getElementById('react-container'))
</script>
</body>
</html>
But this doesn't seem to be working for me. When I run the HTML file in the browser containing the code above, it gives me a blank page.
Could someone please point me to what I'm doing wrong here?

As per the React docs, you need to:
Tell the browser that the JSX is not JavaScript
Transpile the JSX to JavaScript
So add to the head:
<script src="https://unpkg.com/babel-core#5.8.38/browser.min.js"></script>
And change your JSX script tag to:
<script type="text/babel">

Related

Javascript not rendering content

I am trying to display content using javascript DOM but every time I run my solution I get a blank page. My HTML file is as follows:
<!DOCTYPE html>
<html>
<head>
<title>Radiant HQ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<nav id="navigationcontent"></nav>
<script type="text/javascript" src="assets/js/radiant.js">
</script>
</body>
</html>
My js file looks this way:
#import ('../css/style.css');
document.getElementById("navigationcontent").innerHTML=`
<ul>
<li>Home </li>
<li>About Us </li>
<li>Research </li>
<li>Contacts </li>
</ul>`;
Your code works. There is one problem though.
It's getting stuck on the #import ('../css/style.css'); line. Try removing that whole line and include your CSS some other way. Typically this in done in the head of the document via html.

Inserting html code from one page, into another html page

I am a bit new to web based material so please bear with me.
I have two html pages on my local drive. Test1.html and test2.html.
How could I take test2.html's contents and place them into test1.html's body?
I have looked into using w3IncludeHTML(); along with things like jQuery .load()
Test1.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<p id="text"></p>
<script type="text/javascript">
$('#text').load("test2.html");
</script>
</body>
</html>
Test2.html
<ul class='myclass'>
<li>test li one</li>
<li>test li two</li>
<li>test li three</li>
</ul>
As per our chat:
https://chat.stackoverflow.com/rooms/131606/discussion-between-brandon-and-fred-ii
You need to run this as an admin, since this is a permissions issue under Windows 7.
I would try the jquery/ajax approach:
Test1.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<p id="text"></p>
</body>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$.ajax({
type:'post',
url:'get_file_contents.php',
data:'file=Test2',
success:function(content){
var content = $.trim(content);
$('#text').append(content);
}
});
</script>
</html>
This is a sample of "get_file_contents.php"
<?php
$file=$_POST["file"].".html";
$file_content=file_get_contents($file);
echo $file_content;
?>
This example assumes that:
Your web server is running php
all 3 files (Test1.html, Test2.html and get_file_contents.php are in the same folder).
Hope that helped you
Your browser is preventing this from working because "security". If you open your browser's (JavaScript) Console, you'll no doubt find an error like this:
As you allude to in your comments, the only solution is to run a webserver locally and use an http[s]:// schema.

Bootstrap JS not loading

The solution to this problem might be very trivial but its got me banging my head on walls! Bootstrap's js files are not loading on my web page for some reason.
I simplified the page to the bare minimum and here's the code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="cz" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="cz">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"/>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>
</body>
</html>
Now when I click on the button, nothing happens and I don't see the dropdown. When I checked the js files loaded(through browser inspect element), I see that only JQuery has loaded.
If I remove JQuery, I get the correct error that Bootstrap requires Jquery. I've created a codepen and it works perfectly fine on it. Could someone help me with this please?? :(
you didn't close first tag. it should be,
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
UPDATE : if you are thinking why self closing script tags are not working, refer this. Why don't self-closing script tags work?
Close script tag
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"/></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>

How can AngularJS be used replace .asp includes?

Building a small framework for .aspx sites. Project is called Dwarf and available on GitHub.
The problem that I am addressing is working with partials. For example in one of my pages I have a section in the side bar that pulls in an .html file. The reference in the page is
<!--#include file="/_includes/template/product-pages/product-links-contact-rep.html" -->
How can I integrate AngularJS to use partials here?
I am thinking
<!-- this is just an example -->
<script type=text/ng-template id=product-links-contact-rep.html>
<!-- Links -->
<ul>
<li>link 1</li>
<li>link 2</li>
</ul>
</script>
And that entire script goes in the page?, and how would the routing be addressed for a partial?
I am from a rails background and novice to ASP and new to Angular. So I would appreciate being pointed out where the gaps in my knowledge are so that I can do further research on my own.
The approach you can start with (not saying its the best one) but meets your need is to use directives in angularjs
Here's the code
main.js
var app = angular.module('myApp', []);
app.controller('MyCtrl', function($scope) {
});
app.directive("sidebar",function(){
return {
restrict: 'A',
templateUrl: "product-links-contact-rep.html.html",
link : function(scope,element,attr) {
// Do Great things here with your sidebar
},
}
});
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Side Bar</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body ng-app="myApp">
<script type="text/ng-template" id="product-links-contact-rep.html.html">
<!-- Links -->
<ul>
<li>link 1</li>
<li>link 2</li>
</ul>
</script>
<div ng-controller="MyCtrl">
<div sidebar></div>
</div>
</body>
</html>
Here is the working plunker code for reference : http://plnkr.co/edit/NAR1g5?p=preview

jQuery Mobile: Controlling what gets added to URL bar

I am building a mobile site using jquery mobile. It will contain a few static internal pages for settings etc., but primarily will be loading/linking external pages.
I have two requirements.
I do not want internal pages to affect the URL bar or add to the
urlHistory (as hashes, ie index.html/#settings)
when the user loads a new external page, I do want it to show in the
URL bar and add to the urlHistory.
This sounds simple enough, but I can not seem to get it working.
I tried the following in mobileinit. This simply NEVER modified the URL, for internal and external links.
$.mobile.changePage.defaults.changeHash = false;
Any suggestions are greatly appreciated.
You were close, mobilinit is a tricky event, it must be triggered before jQuery Mobile is loaded, here's an example:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(document).bind("mobileinit", function(){
$.mobile.changePage.defaults.changeHash = false;
});
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="operations.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
<ul data-role="listview" data-theme="a" id="test-listview">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
Test it, you will find it satisfies your every requirement.
OK,
After testing various things I ran across a possibly solution that does not involve mobileinit.
For all links that I do NOT want reflected in the url bar, I set programmatically:
$.mobile.changePage("#home", {changeHash: false, transition:'fade'});
The key here is the changeHash set to false. This will transition to the page 'home' but will not make any changes in the URL bar.
I am unsure if I can do the same thing within an href tag.

Categories