I want to create a template based site(like weebly) where users can change the text on the page just by clicking on it.
I have created the page having that functionality.But it just shows on the editor's browser as localStorage store the change on browser storage area.I want the changes made visible to every visitor on that page.
Here is the code
<html>
<head>
<meta charset="UTF-8">
<title>My Tasks</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style>
body{
background:url(chobi.png);
}
</style>
</head>
<body>
<h1 id=hi contenteditable=true>My Tasks</h1>
<p>Start typing in your list, and the browser will store it for you. When you reload it will still be here.</p>
<ul id=myTasks contenteditable=true>
<li></li>
</ul>
<script>
$(document).ready(function(){
$("#myTasks").blur(function() {
localStorage.setItem('myTasData', this.innerHTML);
});
if ( localStorage.getItem('myTasData') ) {
$("#myTasks").html(localStorage.getItem('myTasData'));
}
$("#hi").blur(function() {
localStorage.setItem('hiData', this.innerHTML);
});
if ( localStorage.getItem('hiData') ) {
$("#hi").html(localStorage.getItem('hiData'));
}
});
</script>
</body>
</html>
How can I do that.
you should use php (a server side scripting language) or any other like ASP etc or a database MySQL (to store your data) you cant do it with only client side scripting :)
PhP and MYSQL are very easy
your php would be as
<?php
$content = #some cotent from database
echo "<div contenteditable='true'> ". $content."</div>" #now user can easily change the contant loaded from database
?>
and add one button then when user click on that button then all the changes will submit
on database then it will available for any one :)
Related
I am creating a dashboard that is based on google scripts which pulls data from spreadsheet.
But my page loads before the JavaScript runs.
here is my code :-
document.addEventListener('DOMContentLoaded', function() {
google.script.run.withSuccessHandler(chartData).loadCdata();
google.script.run.withSuccessHandler(otherChart).loadCdata();
});
Since I will advance further and a lot more data has to be pulled from server side and I want html to only load "view" after my scripts finish
I have two questions:
1. In current scenario how can I make my html to print after my script runs.
2. how can I prevent loading data array again and again from server side. I just want to run it once and use the array data in different functions. ".loadCdata();"
this image shows only half of my chart is printed
Hide the main div and then display it after the server-side data has loaded.
<div id="main" style="display:none">
.... content
</div>
<script>
google.script.run.withSuccessHandler(function() {
document.getElementById("main").style.display = "block";
}).loadData();
</script>
To display HTML after the server script completes, start off by having the HTML hidden (e.g. display: none) and then have your chartData() function change the display attribute so it becomes visible. (You can use a Promise to make sure it happens in the correct sequence.)
Use the Web Storage API to save your array data in the browser storage.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div id="chart1" style="display:none">
<!-- Chart 1 -->
</div>
<div id="chart2" style="display:none">
<!-- Chart 2 -->
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
google.script.run.withSuccessHandler(populateCharts).loadCdata();
});
/**
* Populate the charts, make them visible, and save data to sessionStorage for later usage.
*/
function populateCharts(data) {
return new Promise((resolve, reject) => {
// Populate charts
resolve();
}).then(() => {
// Make the charts visible
document.getElementById("chart1").style.display = "block";
document.getElementById("chart2").style.display = "block";
// Save chart data to session storage
sessionStorage.setItem("chartData", JSON.stringify(data));
});
}
</script>
</body>
</html>
I'm doing my own portfolio website (2 language TH/EN).
The buttons for changing languages. I can do it.
But I think if I change the page, the language button must have problems
because new page loads.
My question is
What should I do?
When I changed the page The language I chose from the beginning is still active.
Example :
The default language is Thai. But I click changed to English.The information in the home page changes to English.
If I click on another menu like About Us, the information on that page is displayed in English.
$("html").each(function () {
if ($(".lang-select.th").hasClass('active')) {
$('.lang-select').parents('html').attr('lang', 'th');
$('.content-th').show();
$('.content-en').hide();
} else if ($(".lang-select.en").hasClass('active')) {
$('.lang-select').parents('html').attr('lang', 'en');
$('.content-th').hide();
$('.content-en').show();
}
});
$(".lang-select.th").click(function () {
$(this).addClass("active");
$(".lang-select.en.active").removeClass("active");
$('.lang-select').parents('html').attr('lang', 'th');
$('.content-th').show();
$('.content-en').hide();
});
$(".lang-select.en").click(function () {
$(this).addClass("active");
$(".lang-select.th.active").removeClass("active");
$('.lang-select').parents('html').attr('lang', 'en');
$('.content-th').hide();
$('.content-en').show();
});
.lang-select {
width:30px;
height:30px;
background:#eaeaea;
cursor:pointer;
}
.lang-select.active {
background:yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="box-language">
<span class="lang-select th active">TH</span>
<span class="lang-select en">EN</span>
</div>
<h1 class="content-th">ภาษาไทย Thailand</h1>
<h1 class="content-en">ภาษาอังกฤษ English</h1>
</body>
</html>
If I understand correct, you don't want to pass the language information to the server-side.
If you want to use pure jquery/javascript you should pass the language information to the URL. Once you have it there you should use some javascript method to parse URL. I found this method, which may help you:
How to read GET data from a URL using JavaScript?
Good luck!
I am working on the basics of learning how to control Raspberry Pi GPIO from a web server. However, I am running into a problem. Here is my current set up.
index.html, the main webpage
<html>
<head>
<meta charset="utf-8" />
<title>Blink</title>
</head>
<body style="background-color: white;">
<!-- Button to call blink -->
<button type="button" onclick="blink()">blink</button>
<!-- javascript -->
<script src="script.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</body>
script.js (where the I call php.php through ajax)
function blink() {
$.ajax({
url:"php.php", //the page containing php script
type: "POST", //request type
});
}
php.php, where I control the GPIO
<?php
exec("gpio -1 write 11 1");
sleep(1);
exec("gpio -1 write 11 0");
?>
Currently, the code works as far as controlling the GPIO works. I have an LED hooked up and it lights up and everything. However, I am receiving a dialog box in Chrome after every time the php file is done running. The dialog box is blank, and I assume it has something to do with either Ajax or Jquery returning an empty value. This is where my knowledge is lacking, and I would appreciate if someone could help me suppress this dialog box. Thank you!
im doing a school work with Jquery and I just want to know if its possible and how to do the following:
Page A has the following : external JS file that has the function to allow a user to enter some text and then when they press the submit button that text is automatically put as the paragraph text as ive use JS to get the element and replace the text using innerhtml.
External JS file:
function grabText() {
var grabThePara = document.getElementById("firstP").value;
var intoParagraph = document.getElementById("pOne").innerHTML = grabThePara;
}
HTML FILE :
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.10.2"></script>
<script type="text/javascript" src="ts.js"></script>
</head>
<body>
<input type="text" id="firstP" name="firstP">
<br />
<p id="pOne">Static works fine -- > this is the static</p>
<input type="button" onclick="grabText()" value="Submit">
GO to JD Panel
</body>
</html>
Page B has the Jquery part, this has the code that will grab the text from the Page A's first paragrpah called ID pOne, it gets the text without an issue if its STATIC input but the moment you use as described previous by using the textbox and dynamically changing the text of the paragraph the page A does the change but Page B still shows the static text input, not the new dynamic changes that occurred after input-ed into the textbox and submitted. I will show code.
Page B code :
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript" src="ts.js"></script>
</head>
<body>
Change the text again
<script type="text/javascript">
jQuery.ajax({
url: "adminPanel.html",
success: function (printIt) {
var html = jQuery('<p>').html(printIt);
var grabIt = html.find("p#pOne").html();
var sendItToParaOne = document.getElementById("paraOne").innerHTML = grabIt;
}
});
</script>
<p id="paraOne"></p>
</body>
</html>
Sorry for my English i know its not the best. thanks for taking the time in reading my issue and any helps is appreciated
Thanks again!
M
You need to save your data somewhere. If you don't want to work with a database, you can use HTML 5 web storage: http://www.w3schools.com/html/html5_webstorage.asp
Furthermore, looking at your external JS file, you might want to have a look at jQuery selectors: http://www.w3schools.com/jquery/jquery_selectors.asp
I hope this helps you.
You're confusing yourself by thinking that pages are able to talk to each other. Your page A has to send the changes to the server, but the server also has to be programmed to listen to those changes in server code like PHP or ASP.NET. Only then can page B get the changes made by page A.
I have an iframe with a HTML form dynamically added. I need the parent page to have a button which submits this form (to a page set in the iframe), but then also is able to receive the return value.
The part I am struggling with is how to receive the return value. Submitting the form is fine, but getting the parent page to receive the return value - like with an AJAX request - is eluding me.
Here is an example of the kind of thing I am trying to achieve:
<html>
<head>
etc...
<script type="text/javascript">
$(doument).ready(function() {
$("#myFormButton").click(function () {
// This is what doesn't exist, a callback with the data
// this is what I would like to acheive somehow...
$("#myForm").submit(function(data) {
// do stuff with the data
});
});
});
</script>
</head>
<body>
<iframe>
etc...
<form action="mypage.ashx">
various inputs...
</form>
etc...
</iframe>
</body>
</html>
Thank you all very much for your help,
Richard Hughes