how to render html script in reactjs - javascript

<li><a id="customPopover">Data Source One</a>
<i class="fa fa-times"></i>
<div class="axis_popover left">
<div class="axis_popover_title">Title</div>
<div class="axis_popover_content">
<p><input type="text" class="form-control box_ip"/></p>
<p><button class="btn">button</button></p>
</div>
</div>
having script like this
having html code like this and i need to render in react.


You can refer this example that will run using ReactJS. It will give you basic idea about ReactJS.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- use react js 15.0 js -->
</head>
<body>
<div id="showHere"></div>
<script type="text/babel">
var Example = React.createClass({
render: function() {
return ( <div>
<a id="customPopover">Data Source One</a>
<i class="fa fa-times"></i>
<div class="axis_popover left">
<div class="axis_popover_title">Title</div>
<div class="axis_popover_content">
<p><input type="text" class="form-control box_ip"/></p>
<p><button class="btn">button</button></p>
</div>
</div>
</div>)
}
});
ReactDOM.render(
<div>
<Example></Example>
</div>,
document.getElementById('showHere') );
</script>
</body>
</html>

Related

Uncaught ReferenceError: function is not defined at HTMLDivElement.onclick

I am encountering a problem with html/javascript that I couldn't find a solution for on the web for the last ~7 hours eventhough similar questions were asked! All offered solutions that I tried didn't help me.
My problem is the following error: Uncaught ReferenceError: function is not defined at HTMLDivElement.onclick
I get this error when pressing a button that should trigger the function. The function is called onclick and the onclick attribute is attached to a div object.
console.log("Main is alive");
function addArticletoSC() {
console.log("Main is still alive!");
};
<div class="article-element">
<div class="picture_article-element">
<img src="static/img/Chiquita_banana.PNG" alt="article" class="article_img">
</div>
<div class="text_article-element">
<p class="name_info">Chiquita Banana
<i class="material-icons button-color">info</i>
</p>
<div class="rating_comments">
<i class="material-icons rating">star_rate</i>
4.5 / 5
</div>
<div class="piece_price">
<p>1 piece</p>
<p class="price">0,50€</p>
</div>
</div>
<div class="addtocart_article-element button" onclick="addArticletoSC()">
<i class="material-icons">add_shopping_cart</i>
</div>
</div>
<script type="text/javascript" src="js/main.js"></script>
If anybody could help me with that it would be very appreciated.
PS: This is my first HTML/CSS/JS project and I don't really know what I'm doing. Also, I am using Framework7 for the project, idk if that is important.

you may forgot script tag . try this anyway..
<html lang="en">
<head>
<title>Login page</title>
</head>
<script>
console.log("Main is alive");
function addArticletoSC() {
console.log("Main is still alive!");
}
</script>
<div class="article-element">
<div class="picture_article-element">
<img src="static/img/Chiquita_banana.PNG" alt="article" class="article_img">
</div>
<div class="text_article-element">
<p class="name_info">Chiquita Banana
<i class="material-icons button-color">info</i>
</p>
<div class="rating_comments">
<i class="material-icons rating">star_rate</i>
4.5 / 5
</div>
<div class="piece_price">
<p>1 piece</p>
<p class="price">0,50€</p>
</div>
</div>
<div class="addtocart_article-element button" onclick="addArticletoSC()">
<i class="material-icons">add_shopping_cart</i>
</div>
</div>
<script type="text/javascript" src=""></script>
</html>
<html lang="en">
<head>
<title>Login page</title>
</head>
<script>
console.log("Main is alive");
function addArticletoSC() {
console.log("Main is still alive!");
}
</script>
<div class="article-element">
<div class="picture_article-element">
<img src="" alt="article" class="article_img">
</div>
<div class="text_article-element">
<p class="name_info">Chiquita Banana
<i class="material-icons button-color">info</i>
</p>
<div class="rating_comments">
<i class="material-icons rating">star_rate</i>
4.5 / 5
</div>
<div class="piece_price">
<p>1 piece</p>
<p class="price">0,50€</p>
</div>
</div>
<div class="addtocart_article-element button" onclick="addArticletoSC()">
<i class="material-icons">add_shopping_cart</i>
</div>
</div>
<script type="text/javascript" src=""></script>
</html>

i hope this solved your problem, i changed the div tag into a clickable button tag so the 'onclick' function can execute....goodluck
console.log("Main is alive");
function addArticletoSC() {
console.log("Main is still alive!");
};
<div class="article-element">
<div class="picture_article-element">
<img src="static/img/Chiquita_banana.PNG" alt="article" class="article_img">
</div>
<div class="text_article-element">
<p class="name_info">Chiquita Banana
<i class="material-icons button-color">info</i>
</p>
<div class="rating_comments">
<i class="material-icons rating">star_rate</i>
4.5 / 5
</div>
<div class="piece_price">
<p>1 piece</p>
<p class="price">0,50€</p>
</div>
</div>
<!-- replaced div tags with button tags -->
<button class="addtocart_article-element button" onclick="addArticletoSC()">
<i class="material-icons">add_shopping_cart</i>
</button>
<br /><br /><br /><br />
</div>

I need to call the setLocation function when pressed

I need to call the setLocation function when pressed. I made a form with a post method, I call a click test and nothing happens. What's the matter, tell me please. And another question: If there are a lot of such forms with the post method, the code should change? Do not throw stones, I'm a newbie in Php. Thank you in advance
Game.php
<?php
require "php/set_locations.php";
if(isset($_POST['location_button_1'])){
setLocation(4);
}
?>
<html>
<head><title></title>
<link rel="stylesheet" type="text/css" href="styles/GameStyle.css">
</head>
<body>
<div class="main_container">
<div class="header"></div>
<div class="body_container">
<form method="post">
<div class="left_menu_container">
<div class="left_menu_main_div">
<a class="left_menu_button">
<span class="left_menu_span"></span>
</a>
<nav class="left_menu_nav">
Инвентарь
Персонаж
Ремесло
Охота
</nav>
<div class="left_menu_close_container"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="js/Left_menu.js"></script>
</div>
</div>
</form>
<div class="main_image_container">
<div class="image_container">
<div class="img_container">
<?php
//$locationName = R::load('locationsdb', 1);
//echo '<img class="image_location" src="'.$locationName->location_image.'">'
?>
</div>
</div>
</div>
<div class="location_buttons_container">
<div class="buttons_container">
<ul class="buttons_menu">
<li>Локации</li>
<li ><span name="location_button_1">Главные ворота</span><em>3 сек.</em></li>
<li><span>Торговый квартал</span><em>2 сек</em></li>
<li><span>Замок</span><em>5 сек</em></li>
<li><span>Гильдия</span><em>4 сек</em></li>
</ul>
</div>
</div>
</div>
<div class="footer_container">
<div class="left_footer_block"></div>
<div class="textarea_container">
<textarea class="main_textArea" readonly></textarea>
<div class="input_and_button_container">
<input class="input_for_main_textArea">
<div class="button_container">
<button class="set_text_button" ></button>
</div>
</div>
</div>
<div class="onlinelist_container">
<div class="online_list">
<ul class="online_list_ul">
<li><span>Герои в локации</span><em></em></li>
<li><span>IIITUKATUPKA</span><em>8</em></li>
<li><span>Tataliec</span><em>7</em></li>
<li><span>Nekita2012</span><em>6</em></li>
<li><span>Brion</span><em>5</em></li>
<li><span>Joken</span><em>4</em></li>
<li><span>Golden</span><em>5</em></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
setLocation.php:
<?php
require "php/include_db.php";
function setLocation($url_image){
$locationName = R::load('locationsdb', $url_image);
echo '<img class="image_location" src="'.$locationName->location_image.'">';
}
?>

Phonegap and Framework7, add external JavaScript files for specific pages

I would like to add external Javascript files, for specific pages in my Phonegap app. The app uses Framework7 for the UI.
Example:
Exercise page 2.1 has JavaScript file exercise2_1.js.
Exercise page 2.9 has JavaScript file exercise2_9.js ect.
I only want to load the JavaScript files, when the user is on that specific page.
The JavaScript files work, when they are included in the header section on the index page. I don't want to load all the exercise JavaScript files. I only want to load the one's being used. Is it possible to do this, without loading all the js files?
In the my-app section, i tried to load the files as an external js file. But could not get it to work. Nothing happens.
Index page
<html>
<title>My App</title>
<link rel="stylesheet" href="lib/framework7/css/framework7.ios.min.css">
<link rel="stylesheet" href="lib/framework7/css/framework7.ios.colors.min.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="css/exercise.css" />
<div class="statusbar-overlay"></div>
<div class="panel-overlay"></div>
<div class="panel panel-left panel-reveal">
<div class="list-block accordion-list">
<ul>
<li class="accordion-item"><a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">2</div>
</div></a>
<div class="accordion-item-content">
<div class="list-block">
<ul>
<li class="item-content">
<div class="item-inner">
Exercise 2</div>
</div>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="views">
<div class="view view-main">
<!-- Top Navbar-->
<div class="navbar">
<div class="navbar-inner">
<!-- We need cool sliding animation on title element, so we have additional "sliding" class -->
<div class="center sliding">Awesome App</div>
<div class="right">
<i class="icon icon-bars"></i>
</div>
</div>
</div>
<div class="pages navbar-through toolbar-through">
<div data-page="index" class="page">
<div class="page-content">
<div class="content-block">
<p>Page content goes here</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="lib/framework7/js/framework7.min.js"></script>
<script type="text/javascript" src="js/my-app.js"></script>
<script type="text/javascript" src="js/nav.js"></script>
my_app.js page
var myApp = new Framework7();
var $$ = Dom7;
var mainView = myApp.addView('.view-main', {
dynamicNavbar: true
});
$$(document).on('deviceready', function() {
console.log("Device is ready!");
});
myApp.onPageInit('exercise2_1', function (page) {
})
$$(document).on('pageInit', function (e) {
var page = e.detail.page;
if (page.name === 'exercise2_1') {
}
});
$$(document).on('pageInit', '.page[data-page="exercise2_1"]', function (e) {
myApp.alert('Test');
function includeJs(jsFilePath) {
var js = document.createElement("script");
js.type = "text/javascript";
js.src = jsFilePath;
//document.body.appendChild(js);
document.getElementsByTagName("head")[0].appendChild(js);
}
includeJs("js/exercise2_1.js");
})
Exercise 2.1 page (exercise2_1.html)
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a href="#" class="back link">
<i class="icon icon-back"></i>
<span>Back</span>
</a>
</div>
<div class="center sliding">Exercise 2.1</div>
<div class="right">
<i class="icon icon-bars"></i>
</div>
</div>
</div>
<div class="pages">
<div data-page="exercise2_1" class="page">
<form id="Cloze" method="post" action="" onsubmit="return false;">
<div class="ClozeBody">
Use verbs from the Alex-text.<br><br>Example: Alex er våken og TENKER.<br><br>Pappa <span class="GapSpan" id="GapSpan0">
<input type="text" id="Gap0" onfocus="TrackFocus(0)" onblur="LeaveGap()" class="GapBox" size="6"></span> på et kontor. <br>Han <span class="GapSpan" id="GapSpan1"><input type="text" id="Gap1" onfocus="TrackFocus(1)" onblur="LeaveGap()" class="GapBox" size="6">
</span> ingeniør.
</div>
</form>
<button id="CheckButton2" class="FuncButton" onmouseover="FuncBtnOver(this)" onfocus="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onblur="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOut(this)" onclick="CheckAnswers()"> Check </button>
<button class="FuncButton" onmouseover="FuncBtnOver(this)" onfocus="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onblur="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOut(this)" onclick="ShowHint()"> Hint </button>
<div class="Feedback" id="FeedbackDiv">
<div class="FeedbackText" id="FeedbackContent"></div>
<button id="FeedbackOKButton" class="FuncButton" onfocus="FuncBtnOver(this)" onblur="FuncBtnOut(this)" onmouseover="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOut(this)" onclick="HideFeedback(); return false;"> OK </button>
</div>
</div>
</div>

I accomplished this by including JQuery and doing the following:
$$(document).on('pageInit', function (e) {
var page = e.detail.page;
if (page.name == 'page1') {
$.getScript("js/page1.js");
} else if (page.name == 'page2') {
$.getScript("js/page2.js");
}
});

I found the problem. It had to do with the onload event on the index page.
I removed the onload event from the index page and put it in the exercise page.
This solved my issue.
<iframe style="display:none" onload="StartUp()" id="TheBody" src="js/exercise2_1.js"></iframe>
Hopes this helps someone else.

Bug in Meteor/Semantic-UI?

the usage of a semantic-ui modal window does not work if the root-element is a meteor template:
package: semantic-ui-css
Error reproduction:
hello.html:
<template name="hello">
<head>
<title>Hello Error</title>
</head>
<body>
<h1>Reproduce error</h1>
{{> navigation}}
<div class="delete openModal">OPEN<i class="close icon"></i></div>
<div id="modalView" class="ui modal">
<div class="content">
<div class="ui fluid input">
Modal Error Test
</div>
</div>
<div class="actions">
<div class="ui button cancel">Cancel</div>
<div class="ui button ok">OK</div>
</div>
</div>
</body>
</template>
<template name="navigation">
<div class="ui menu">
<a class="item" id="home" href="/">
<i class="home icon"></i> welcome
</a>
</div>
</template>
And in Javascript (hello.js) code:
if (Meteor.isClient) {
Template.hello.events({
'click .openModal': function (event,template) {
$('#modalView')
.modal({
onDeny : function(){
console.log('canceled');
},
onApprove : function() {
console.log("yeah!");
}
})
.modal('show')
;
}
});
}
if (Meteor.isServer) {
Meteor.startup(function () {
// code to run on server at startup
});
}
Router.route('/', function () {
this.render('hello');
});
The error is:
TypeError: $dimmer.on is not a function
semanti...27ec43c (Line 5786)
Does anyone know how to solve this?

The root element being a template is not the problem. The problem is having the BODY tag in the template. You wind up with two BODY tags, which leads to having two $dimmers. So when $dimmer.on is called, it is actually an array and the semantic-ui code would have to call $dimmer[i].on (where i would be 0 and 1) and it doesn't work that way.
So change hello.html to:
<template name="hello">
<div class="delete openModal">OPEN<i class="close icon"></i></div>
<div id="modalView" class="ui modal">
<div class="content">
<div class="ui fluid input">
Modal Error Test
</div>
</div>
<div class="actions">
<div class="ui button cancel">Cancel</div>
<div class="ui button ok">OK</div>
</div>
</div>
</template>
<template name="navigation">
<div class="ui menu">
<a class="item" id="home" href="/">
<i class="home icon"></i> welcome
</a>
</div>
</template>
And create a layout (layout.html):
<head>
<title>Hello Error</title>
</head>
<body>
<h1>Reproduce error</h1>
{{> navigation}}
</body>
That works.
Of course you could just remove the BODY tag from hello.html:
<template name="hello">
<head>
<title>Hello Error</title>
</head>
<h1>Reproduce error</h1>
{{> navigation}}
<div class="delete openModal">OPEN<i class="close icon"></i></div>
<div id="modalView" class="ui modal">
<div class="content">
<div class="ui fluid input">
Modal Error Test
</div>
</div>
<div class="actions">
<div class="ui button cancel">Cancel</div>
<div class="ui button ok">OK</div>
</div>
</div>
</template>
<template name="navigation">
<div class="ui menu">
<a class="item" id="home" href="/">
<i class="home icon"></i> welcome
</a>
</div>
</template>
That works too, but I think the first approach is the clean/Meteor way.

How to make the contents of multiple div class elements editable

My objective is to make the contents of multiple div elements editable either with all of the same div class name, or with different class names. I am aware of the contenteditable attribute but my problem is being able to save it using java-script so that when the page reloads, the edited content is saved and displayed. I have been trying to follow the tutorial on this website...
http://www.developerdrive.com/2012/06/allowing-users-to-edit-text-content-with-html5/
So far i have separated the java-script code into a different file called mailscript.js
I included the file near the top of the html5 file using...
I also changed the ...
document.getElementById
to...
document.getElementsByClassName
in the Java-script file that a made. I don't really know where to go from here. In short, the edits fail to save. Her are the files...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Package Information</title>
<script type="text/javascript" src="mailscript.js"></script>
<link rel="stylesheet" href="mailstyle.css">
<link rel="icon"
type="image/ico"
href="favicon.ico">
</head>
<body onload="checkEdits()">
<div id="wrapper">
<div id="header">
<header><h1>Bison Mail</h1></header>
</div>
<hr>
<br id="clearleft">
<div id="leftcolumn">
<hr>
<ul class="navbar">
<li>Home</li>
<li>Packages</li>
<li>Contact Us</li>
<li>Sign-Out</li>
</ul>
<hr>
</div>
<div id="rightcolumn">
<div class="container">
<div class="table-row">
<div class="heading">Name:</div>
<div class="name" contenteditable="true">Meshech Price</div>
</div>
<div class="table-row">
<div class="heading">Date Received:</div>
<div class="dateRecieved" contenteditable="true">11/1/2014</div>
</div>
<div class="table-row">
<div class="heading">Date of Pickup:</div>
<div class="dateOfPickup" contenteditable="true">None</div>
</div>
<div class="table-row">
<div class="heading">ID:</div>
<div class="ID" contenteditable="true">N/A</div>
</div>
<div class="table-row">
<div class="heading">E-mail:</div>
<div class="email" contenteditable="true"><address>shackster3773#yahoo.com</address></div>
</div>
<div class="table-row">
<div class="heading">E-mail Sent:</div>
<div class="emailSent" contenteditable="true">Sent</div>
</div>
<div class="table-row">
<div class="heading">Signature:</div>
<div class="signature" contenteditable="true">N/A</div>
</div>
</div>
<hr>
<input type="button" value="save my edits" onclick="saveEdits()"/>
<input type="button" value="add package" onclick="addElement()"/>
<br>
<hr>
<div id="footer">
<br>
<p>By: Meshech ©</p>
</div>
</div>
</div>
</body>
</html>
and for the java-script file
function saveEdits() {
//get the editable element
var editElem = document.getElementsByClassName("name");
//display.write(editElem);
//get the edited element content
var userVersion = editElem.innerHTML;
//display.write(userVersion);
//save the content to local storage
localStorage.userEdits = userVersion;
//write a confirmation to the user
document.getElementsByClassName("update").innerHTML="Edits saved!";
}
function checkEdits() {
//find out if the user has previously saved edits
if(localStorage.userEdits!==null)
document.getElementsByClassName("name").innerHTML = localStorage.userEdits;
}
Any help would be Greatly appreciated. Thanks in advance!

Try this. Your divs need to look like <div id="name" class="edit" contenteditable="true">Meshech Price</div>
HTML
<div class="container">
<div class="table-row">
<div class="heading">Name:</div>
<div id="name" class="edit" contenteditable="true">Meshech Price</div>
</div>
<div class="table-row">
<div class="heading">Date Received:</div>
<div id="dateRecieved" class="edit" contenteditable="true">11/1/2014</div>
</div>
Javascript
function saveEdits() {
var editElem = document.getElementsByClassName("edit");
localStorage.userEdits = {}
Array.prototype.forEach.call(editElem, function(e) {
console.log(e.id)
localStorage.setItem([e.id], e.innerHTML);
});
document.getElementsByClassName("update").innerHTML="Edits saved!";
}
function checkEdits() {
if(localStorage.userEdits) {
var editElem = document.getElementsByClassName("edit");
Array.prototype.forEach.call(editElem, function(e) {
console.log(e.id)
e.innerHTML = localStorage.getItem(e.id);
});
}
}

Categories